怎么用Js做到用鼠标移到下面的标志就会自动切换图片

JavaScript071

怎么用Js做到用鼠标移到下面的标志就会自动切换图片,第1张

添加onmouseover 事件

即鼠标移入对象时触发的时间

js图片自动切换 用的是js的定时器方法吧

添加

onmouseover 事件方法中可以写一段脚本 终止定时器的作用。则可以停止切换

onmouseout 在鼠标从元素上离开后会触发的事件 可以再写方法让定时器生效。

js特效里图片不会滚动的原因是没有使用js里的定时器。根据查询相关资料信息,js特效里让图片无缝滚动就是要让图片集在一定时间里自动切换,需要js里的定时器来控制时间,没有使用定时器功能就无法实现图片滚动。js指JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

需要js+css配合,我给您找段代码吧。

JS代码

$(function () {

    $(".dummy").click(function () { return false })

    var flipDelay = 5500

    var flipCount = $("div.banner_footer a").size() // 图片总数

    var flipId = 1

    var flipId1 = 0

    var flipTimer = null

    var flipTimer1 = null

    var i = 0

    var flip = function () {

        if (flipCount < 2) return

        $("div.banner_footer a").removeClass("current")

        $($("div.banner_footer a").get(flipId)).addClass("current")

        $($("div.banner_footer a").get(flipId)).css("current")

        $("div.banner > a:visible").fadeOut()

        $($("div.banner a").get(flipId)).fadeIn("slow")

        flipId = (flipId + 1) % flipCount

        flipTimer = window.setTimeout(flip, flipDelay)

    }

    flipTimer = window.setTimeout(flip, flipDelay)

    $("div.banner_footer a").click(function () {

        clearTimeout(flipTimer)

        flipId = $("div.banner_footer a").index(this)

        flip()

        return false

    })

    var flipserver = function () {

        $("div.index_server_box > a:visible").fadeOut()

        $($("div.index_server_box a").get(flipId1)).fadeIn("slow")

    }

    $("a.index_server_left").click(function () {

        flipId1 = (flipId1 - 1) % 3

        flipserver()

        return false

    })

    $("a.index_server_right").click(function () {

        flipId1 = (flipId1 + 1) % 3

        flipserver()

        return false

    })

    var documentWidth = $(window).width()

    var left = (documentWidth - 310) / 2

    var right = left + 306

    $("div.services_box div.left").css("width", left + "px")

    $("div.services_box div.right").css("width", right + "px")

    $(window).resize(function () {

        var documentWidth = $(window).width()

        var left = (documentWidth - 310) / 2

        var right = left + 306

        $("div.services_box div.left").css("width", left + "px")

        $("div.services_box div.right").css("width", right + "px")

    })

})

html样式

<div class="banner_box">

        <div class="banner">

            <a href="" class="banner1"><img src="img/banner1.jpg" alt="视觉为您解决网站建设中企业品牌形象问题" /></a>

            <a href="" class="banner2"><img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" /></a>

            <a href="" class="banner3"><img src="img/banner3.jpg" alt="针对用户需求,提供高品质网站设计服务" /></a>

            <a href="" class="banner4"><img src="img/banner4.jpg" alt="网站建设公司团队的力量" /></a>

            <a href="" class="banner5"><img src="img/banner5.jpg" alt="招聘网页设计师" /></a>

            <div class="banner_footer">

                <a class="a1 current"><img src="img/a13.jpg" alt="" /></a>

                <a class="a2" ><img src="img/a14.jpg" alt="" /></a>

                <a class="a3"><img src="img/a15.jpg" alt="" /></a>

                <a class="a4"><img src="img/a16.jpg" alt="" /></a>

                <a class="a5"><img src="img/a17.jpg" alt="" /></a>

            </div>

        </div>

    </div>

css样式

div.banner_box{height:430px overflow:hidden background:url(../img/b1.jpg) repeat-x}

div.banner_box div.banner{width:990px height:430px overflow:hidden margin:auto position:relative}

div.banner_box div.banner a{border:0}

div.banner_box div.banner a.banner1 img{margin-left:200px}

div.banner_box div.banner a.banner2 img{margin-left:236px}

div.banner_box div.banner a.banner3 img{margin-left:250px}

div.banner_box div.banner a.banner4 img{margin-left:231px}

div.banner_box div.banner a.banner5 img{margin-left:245px}

div.banner_box div.banner div.banner_footer{position:absolutewidth:120pxheight:20pxtop:30px right:0z-index:100  }

div.banner_box div.banner div.banner_footer a{float:left width:19px height:19px cursor:pointer }

div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat}

div.banner_box div.banner div.banner_footer a img{border:0 margin:3px 0 0 3px}

希望能帮到您!祝您好运!