仿天猫、京东、麦包包等,无缝循环轮播图的开发(jQuery)

我之前写过一个常见的轮播图效果,详情见:http://www.jianshu.com/p/44ab9edd8c57
本文内容实现的是无缝循环轮播图效果,也比较常见,天猫、京东、麦包包中也经常会有。图片自动滑动,且点击下面文字(指示器)进行图片的切换。
如果想让动画效果更有趣,可引入jquery.easing包,里面有很多贝塞尔曲线特效,结合animate里使用,效果会更加炫酷!

实现效果:

无缝轮播图.gif

实现原理:

image.png

实现难点:
1、解决点击事件与轮播动画的问题(注:点击时候不轮播,轮播动画时不可点击)
2、解决指示器显示异常问题
3、解决动画叠加问题

代码(文中5张图片大小均为:952x440,最后第6张与第一张相同):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #bor{
            width: 952px;
            height: 440px;
            border: 2px black solid;
            margin: 200px auto;
            overflow: hidden;
            position: relative;
        }   
        #bor #pic_bor{
            width: 5712px;
            height: 440px;
            position: absolute
        }
        #bor #pic_bor img{
            float: left;
        }
        #bor ul{
            width: 585px;
            height: 30px;
            bottom: 0px;
            right: 0px;
            position: absolute
        }
        #bor ul li{
            width: 116px;
            height: 30px;
            color: white;
            list-style: none;
            font-family: '宋体';
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            margin-left: 1px;
            background: black;
            float: left;
            opacity: 0.4;
        }
        #bor ul li:hover{
            color: #c00;
            text-decoration: underline;
        }
        </style>
        
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var i = 0;//用于做标记
            var inTimer;//将定时器设置成成员变量
            var outTimer;
            var isCli = true;
            //图片轮播函数
            function run(){
                i++;
                if(i==6){//如果最后一张,left属性改变成0
                    $("#bor #pic_bor").css({'left':0+'px'});
                    i=1;
                }
                    var left = i*-952;
                    isCli = false;//轮播动画切换时不可点击
                    $("#bor #pic_bor").animate({'left':left+'px'},300,function(){
                            isCli = true;
                        });
                    if(i==5){//指示器显示问题解决
                        $("#bor ul li").eq(0).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
                    }else{
                        $("#bor ul li").eq(i).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
                    }
            }
            inTimer = setInterval(run,2000);
//          li的点击的时候不让有轮播动画
            $("#bor ul li").click(function(){
                if(!isCli){//动画不能点击
                    return;
                }
                //清理定时器
                clearTimeout(outTimer);
                //清理定时器
                clearInterval(inTimer);
                //点击的时候不开启定inTimer
                outTimer = setTimeout(function(){
                    inTimer = setInterval(run,2000);
                },400);
                // 标记
                var liThis = $(this);
                i = liThis.index();
                var picl = i*-952; 
                //指示器
                $("#bor ul li").eq(i).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
                //轮播
                $("#bor #pic_bor").stop().animate({'left':picl+'px'},300);
            })
            
        })
    </script>
    </head>
    <body>
        <div id="bor">
            <div id="pic_bor">
                ![](mbb_images/img1.jpg)
                ![](mbb_images/img2.jpg)
                ![](mbb_images/img3.jpg)
                ![](mbb_images/img4.jpg)
                ![](mbb_images/img5.jpg)
                ![](mbb_images/img1.jpg)
            </div>
            <ul>
                    <li style="opacity: 0.7;">起舞少女</li>
                    <li>小小心机</li>
                    <li>海岛假日</li>
                    <li>星空幻想</li>
                    <li>马戏游园</li>
            </ul>
        </div>
    </body>
</html>

下载:https://github.com/wangwei66666/SeamlessSlideshow/tree/master
如有问题欢迎交流。

如转载请注明出处,谢谢!

推荐阅读更多精彩内容