<!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"><</a>
<a href="javascript:;" class="wrapper-arrow wrapper-next">></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>
用jq实现无限轮播
最新推荐文章于 2023-12-26 17:43:52 发布