基于jquery的轮播图插件

最新推荐文章于 2024-05-17 01:50:40 发布

kxydoublek

最新推荐文章于 2024-05-17 01:50:40 发布

阅读量387

点赞数 1

分类专栏： javascript 文章标签： jquery 插件

本文链接：https://blog.csdn.net/kxydoublek/article/details/77160122

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基于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);