用jq实现无限轮播

本文详细介绍了如何利用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值