用jq实现无限轮播

来源：互联网发布：刷棒棒糖辅助软件编辑：程序博客网时间：2024/06/03 16:54
<!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>
0 0