基于jquery的轮播图插件

来源：互联网发布：积分软件哪个最好编辑：程序博客网时间：2024/05/22 09:35

基于jQuery的轮播图插件（无缝切换）

思路是将所有li定位，将要开始显示的li用css({left:})来显示到要开始滑动的地方，接下来开始滑动

贴上代码

HTML

<body>    <div class="wrap">        <ul id="scroll">            <li><img src="images/1.jpg" alt="1"></li>            <li><img src="images/2.jpg" alt="2"></li>            <li><img src="images/3.jpg" alt="3"></li>            <li><img src="images/4.jpg" alt="4"></li>        </ul>        <div class="butt">            <button id="prev">&lt;</button>            <button id="next">&gt;</button>                 </div>        <div>            <ul id="dots">                <li class="active"></li>                <li></li>                <li></li>                <li></li>            </ul>    </div>    </div></body>

CSS

<style type="text/css">        *{            padding: 0;            margin: 0;        }        li{            list-style: none;        }        .wrap{            width: 1080px;            height: 432px;            margin: 30px auto;            overflow: hidden;            position: relative;        }        #scroll{            width: 100%;            height: 432px;            position: absolute;             }        #scroll li{            float: left;            width: 1080px;            height: 432px;            position: absolute;            left: 1080px;        }        #scroll li:nth-child(1){            left: 0;        }        .butt{            width: 100%;            position: absolute;            top: 40%;        }        .butt button{            width: 50px;            height: 80px;            background: #9c9a9a;            color: #FFF;            border: 0;            outline: none;            opacity: 0.5;            font-size: 30px;            cursor: pointer;        }        #prev{            float: left;        }        #next{            float: right;        }        #dots{            width: 180px;            height: 20px;            position: absolute;            bottom: 10px;            right: 40%;        }        #dots li{            float: left;            display: inline-block;            width: 15px;            height: 15px;            border-radius: 10px;            margin-right: 30px;            background-color: red;        }        #dots li.active{            background-color: #fff;        }    </style>

jquery代码（记住要先引入jQuery文件）

(function($){    $.fn.extend({        scroll: function(options){ // 参数是对象，preB指的是向前按钮，nextB是向后按钮，dotsDiv是焦点div,parDiv是指轮播图的父元素，dis是一次移动的距离，speed是滑动的速度，autospeed是隔几秒自动播放            var defaultSetting = {                prevB : null,                nextB : null,                dotsDiv : null,                parDiv : null,                dis : null,                speed : null,                autoSpeed : null            }            var settings = $.extend({}, defaultSetting, options);        var that=this;          var index=0;        var status=true;        var timer=null;        //小圆点class变化        function active(index){            $(settings.dotsDiv).children('li').removeClass('active');            $(settings.dotsDiv).children('li').eq(index).addClass('active');        };        //为小圆点添加点击事件        $(settings.dotsDiv).children('li').click(function(){            var this_index=$(this).index();            if(status==true){            status=false;                if(this_index>index){                    $(that).children('li').eq(index).animate({left:-settings.dis+'px'},settings.speed);                                $(that).children('li').eq(this_index).css({left:settings.dis+'px'});                                $(that).children('li').eq(this_index).animate({left:'0px'},settings.speed,function(){                                    status=true;                                });                                index = this_index;                                active(index);                }else if(this_index<index){                    $(that).children('li').eq(index).animate({left: settings.dis+'px'},settings.speed);                    $(that).children('li').eq(this_index).css({left: -settings.dis+'px'});                    $(that).children('li').eq(this_index).animate({left: '0px'},settings.speed,function(){                        status=true;                    });                    index=this_index;                    active(index);                }else{                    status=true;                }            };        });        //为向前按钮添加点击事件        $(settings.prevB).click(function(){            prevPlay();         });        //为向后按钮添加点击事件        $(settings.nextB).click(function(){            nextPlay();        });        //向前播放函数        function prevPlay(){            if(status==true){                status=false;                $(that).children('li').eq(index).animate({left: settings.dis+'px'},settings.speed);                index--;                if(index<0){                    index= $(that).children('li').length-1;                }                $(that).children('li').eq(index).css({left:-settings.dis+'px'});                     $(that).children('li').eq(index).animate({left:'0px'},settings.speed,function(){status = true;});                     active(index);            }        }        //向后播放函数        function nextPlay(){            if(status==true){                status=false;                $(that).children('li').eq(index).animate({left: -settings.dis+'px'},settings.speed);                index++;                if(index==$(that).children('li').length){                    index= 0;                               }                $(that).children('li').eq(index).css({left:settings.dis+'px'});                     $(that).children('li').eq(index).animate({left:'0px'},settings.speed,function(){status = true;});                     active(index);            }        }        //自动播放函数        function autoPlay(){             timer = setInterval(nextPlay, settings.autoSpeed);        }        //移动到轮播图上，停止自动播放        //移出轮播图时恢复自动播放        $(settings.parDiv).mouseover(function(){            clearInterval(timer);                    timer = null;        }).mouseout(function() {            autoPlay();        });        //页面加载自动播放        autoPlay();        return this;    }    })})(jQuery);

阅读全文

0 0