【jquery】凡客轮播图（仿）

最新推荐文章于 2019-05-09 19:54:48 发布

pg_tang

最新推荐文章于 2019-05-09 19:54:48 发布

阅读量463

点赞数

分类专栏： jquery练习文章标签： jquery html

本文链接：https://blog.csdn.net/pg_tang/article/details/77159605

版权

jquery练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html代码片段

<body>
    <div class="main">
        <img src="img/0.jpg" style="display: block;"/>
        <img src="img/1.jpg"/>
        <img src="img/2.jpg"/>
        <img src="img/3.jpg"/>
        <img src="img/4.jpg"/>
        <img src="img/5.jpg"/>
        <img src="img/6.jpg"/>  
        <ul>
            <li style="background-color: red;"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a id="lest" href="javascript:void(0)"></a>
        <a id="next" href="javascript:void(0)"></a>
    </div>
</body>

jquery代码片段

$(function(){
        var c = 0;
        function bangding(){
            //图片轮播
            $(".main img").eq(c).show().siblings('img').hide();
            //小圆点轮番变为红色
            $(".main ul li").eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#999999'});
        }
//自动轮播图函数
        function zidong(){
            c++;
            c = c==7?0:c;
            bangding();

        }
        var dong = setInterval(zidong,2300);
//鼠标事件，鼠标指针移入.main动画停止，移出动画继续
        $('.main').mouseover(function(){
            clearInterval(dong);
        })
        $('.main').mouseout(function(){
            dong = setInterval(zidong,2300);    
        })
//鼠标事件，点击上下按钮实现上下翻页,css背景图变化
//      上一张
        $('#lest').click(function(){
            c--;
            c=c==-1?6:c;
            bangding();
        }).mousemove(function(){
            $(this).css({'background-position':'bottom left'})
        }).mouseout(function(){
            $(this).css({'background-position':'top left'})
        })

//      下一张
        $('#next').click(function(){
            c++;
            c=c==7?0:c;
            bangding();
        }).mousemove(function(){
            $(this).css({'background-position':'bottom right'})
        }).mouseout(function(){
            $(this).css({'background-position':'top right'})
        })
//鼠标事件，点击小圆点实现切换图片
        $('.main ul li').click(function(){
            c = $(this).index();
            bangding();
        })

    })