用jq实现无限轮播

最新推荐文章于 2023-12-08 15:24:23 发布
UNDERCOVERj
最新推荐文章于 2023-12-08 15:24:23 发布
阅读量1k
点赞数
CC 4.0 BY-SA版权
分类专栏： jq
本文链接：https://blog.youkuaiyun.com/github_37037281/article/details/56309157
jq 专栏收录该内容
0 篇文章
订阅专栏
本文详细介绍了如何利用jQuery库创建一个无限循环的轮播效果，包括图片切换、自动播放、导航点指示等功能的实现步骤和关键代码，帮助读者掌握动态网页交互设计技巧。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *{margin: 0;padding: 0}
            .wrapper{position: relative;overflow: hidden;}
            .wrapper-content{position: absolute;left: 0;z-index: 1;}
            .wrapper-content_img{border: none;outline:none;float: left}
            .wrapper-buttons{position: absolute;width: 100px;height: 20px;text-align: center;bottom: 3px;z-index: 2;}
            .wrapper-button{float: left;width: 20px;height: 20px;border-radius: 10px;background: gray;margin: 0 2.5px;cursor: pointer;}
            .wrapper-arrow{position: absolute;width: 40px;height:40px;cursor: pointer;background-color: RGBA(0,0,0,.3); color: #fff;display: none;top:50%;line-height: 40px;font-size: 36px;text-align: center;z-index: 2;}
            .wrapper:hover .wrapper-arrow{display: block;background-color: rgba(0,0,0,.7);}
            .wrapper-prev{left:10px;}
            .wrapper-next{right:10px;}
            .wrapper_on{background-color: yellow}
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="wrapper-content">
            <img class="wrapper-content_img" alt="4" src="img/4.jpg"/>
            <img class="wrapper-content_img" alt="1" src="img/1.jpg"/>
            <img class="wrapper-content_img" alt="2" src="img/2.jpg"/>
            <img class="wrapper-content_img" alt="3" src="img/3.jpg" />
            <img class="wrapper-content_img" alt="4" src="img/4.jpg" />
            <img class="wrapper-content_img" alt="1" src="img/1.jpg" />
        </div>
        <div class="wrapper-buttons">
            <span class="wrapper-button wrapper_on" index="1" ></span>
            <span class="wrapper-button" index="2"></span>
            <span class="wrapper-button" index="3"></span>
            <span class="wrapper-button" index="4"></span>
        </div>
        <a href="javascript:;" class="wrapper-arrow wrapper-prev">&lt;</a>
        <a href="javascript:;" class="wrapper-arrow wrapper-next">&gt;</a>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            function Slide(){
                this.data={
                    img_width:300,
                    img_height:300,
                    btn_width:40,
                    btn_height:40,
                    num:4,
                    delay:300
                };
                var self=this
                this.index=1;
                this.timer=null;
                this.wrapper=$('.wrapper');
                this.wrapperContent=$('.wrapper-content');
                this.wrapperContentImg=$('.wrapper-content_img');
                this.wrapperButton=$('.wrapper-button');
                this.wrapperButtons=$('.wrapper-buttons')
                this.wrapperPrev=$('.wrapper-prev');
                this.wrapperNext=$('.wrapper-next');
                this.setCss()
                this.wrapper.hover(function(){
                    self.stop()
                },
                function(){
                    self.play()
                })
                this.play()

                this.wrapperPrev.bind('click',function(){
                    self.prev()
                })
                this.wrapperNext.bind('click',function(){
                    self.next()
                })
                this.wrapperButton.each(function(){
                    var _this=self
                    $(this).bind('click',function(){
                        if (_this.wrapperContent.is(':animated') || $(this).attr('class')=='on') {
                            return;
                        }
                        var offset=($(this).attr('index')-_this.index)*_this.data.img_width;
                        _this.index=$(this).attr('index')
                        _this.animate(offset)
                        _this.showButton()
                    })
                })

            }
            Slide.prototype={
                setCss:function(){
                    var self=this;
                    this.wrapper.css({
                        width:self.data.img_width,
                        height:self.data.img_height,
                    })
                    this.wrapperContent.css({
                        left:-self.data.img_width,
                        width:self.data.img_width*(self.data.num+2),
                        height:self.data.img_height,
                    })
                    this.wrapperPrev.css({
                        marginTop:-parseInt(self.data.btn_height/2)
                    })
                    this.wrapperNext.css({
                        marginTop:-parseInt(self.data.btn_height/2)
                    })
                    this.wrapperContentImg.css({
                        width:self.data.img_width,
                        height:self.data.img_height
                    })
                    this.wrapperButtons.css({
                        left:(self.data.img_width-100)/2
                    })

                },
                next:function(){
                    if(this.wrapperContent.is(':animated')){
                        return
                    }
                    if(this.index==this.data.num){
                        this.index=1
                    }else{
                        this.index+=1
                    }
                    this.animate(this.data.img_width)
                    this.showButton()
                },
                prev:function(){
                    if(this.wrapperContent.is(':animated')){
                        return
                    }
                    if(this.index==1){
                        this.index=this.data.num
                    }else{
                        this.index-=1
                    }
                    this.animate(-this.data.img_width)
                    this.showButton()
                },
                animate:function(offset){
                    var self=this;
                    var left=parseInt(this.wrapperContent.css('left'))-offset
                    this.wrapperContent.animate({
                        left:left
                    },this.data.delay,function(){
                        if(left<-self.data.num*self.data.img_width){
                            self.wrapperContent.css({left:-self.data.img_width})
                        }
                        if(left>-100){
                            self.wrapperContent.css({left:-self.data.num*self.data.img_width})
                        }
                    })
                },
                showButton:function(){
                    this.wrapperButton.eq(this.index-1).addClass('wrapper_on').siblings().removeClass('wrapper_on')
                },
                play:function(){
                    var self=this
                    this.timer=setInterval(function(){
                        self.wrapperNext.trigger('click')
                    },2000)
                },
                stop:function(){
                    var self=this
                    clearInterval(self.timer)

                }

            }
            new Slide()
        })
    </script>
    </body>
</html>