【jquery】凡客轮播图(仿)

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();
        })

    })

图片自填就可以用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值