jq写无缝轮播
今天分享一下我自己早几天写的一个效果：无缝轮播，虽然不难，很简单，也没有封装处理过，但是还是希望能帮到一些前端的小伙伴吧，如果有小伙伴感觉有更简化的写法希望可以一起交流一下，技术在于交流嘛，我的邮箱是 15857240771@163.com ,下面就直接上代码了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.box{
width: 500px;
height: 300px;
border: 1px solid #f00;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.box_ul{
position: absolute;
height: 100%;
left:0;
}
.box_ul li{
float: left;
height: 100%;
box-sizing: border-box;
border: 1px solid #0a9dc7;
}
.togBtn{
width: 500px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #f00;
margin: 50px auto;
}
.ulReadius{
position: absolute;
z-index: 333;
width: 40%;
left:30%;
bottom: 20px;
height: 20px;
}
.ulReadius li{
width: 15px;
float: left;
height: 15px;
border-radius: 7px;
background: #0a9dc7;
margin: 5px 10px;
}
</style>
</head>
<body>
<div class="box">
<ul class="box_ul">
<li>第一个轮播图</li>
<li>第二个轮播图</li>
<li>第三个轮播图</li>
<li>第四个轮播图</li>
</ul>
<ul class="ulReadius"> </ul>
</div>
<div class="togBtn">点击我暂停或者启动轮播</div>
<script src="../jquery-1.11.3.js"></script>
<script>
(function () {
var page={
//li内容的长度
len:null,
//当前运动到到位置 下标
index:0,
//最外面到盒子
box:$('.box'),
//盒子里面到ul
ul:$('.box_ul'),
//获取一下每一次移动的距离
boxWidth:null,
//是否执行动画
isint:true,
//暂停或者启动按钮
togBtn:$('.togBtn'),
//圆点定位
ulReadius:$('.ulReadius'),
//执行函数
init:function () {
//初始化加载
this.start();
//点击按钮操作是否执行轮播
this.clicktogBtn();
//点击圆点跳转到对于到图片
this.clickRadius();
//鼠标移入暂停动画
this.mouseTog();
},
clicktogBtn:function(){
var that=this;
this.togBtn.click(function () {
that.isint=!that.isint;
})
},
//初始化执行
start:function(){
this.len=this.ul.children('li').length;
var liHtml=this.ul.children('li:nth-child(1)').get(0).outerHTML;
this.ul.append(liHtml)
//获取box的宽度 li的宽度和box的宽度一致
var boxwidth=this.box.width();
//获取ul的宽度 根据li的总长度来获取
var ulwidth=boxwidth*(this.len+1);
//给ul和li添加上宽度
this.ul.css({
width:ulwidth+'px'
})
this.ul.children('li').css({
width:boxwidth+'px'
})
//每一次移动的距离
this.boxWidth=boxwidth;
var that=this;
//定时器执行轮播
setInterval(function () {
that.indexPosition()
},1000)
var tlen=this.len;
this.rediusStyle(tlen);
},
//小圆点的样式
rediusStyle:function(len){
var liHtml=[];
for(var i=0;i<len;i++){
liHtml.push('<li></li>')
}
this.ulReadius.append(liHtml.join(""));
},
//点击小圆点
clickRadius:function(){
var that=this;
this.ulReadius.on('click','li',function () {
that.isint=true;
var index=$(this).index();
that.index=index-1;
that.indexPosition();
that.isint=false;
})
},
//移入的时候暂停动画 移出继续执行动画
mouseTog:function(){
var that=this;
this.box.mousemove(function () {
that.isint=false;
}).mouseout(function () {
that.isint=true;
})
},
indexPosition:function () {
//判断是否启用轮播动画
if(!this.isint){
return true;
}
//指针指向全局page对象
var that=this;
//每执行一次轮播一个图片 下标+1
that.index++;
// 因为是向右边滚动到 所以是负数
that.ul.animate({
left:-that.index*that.boxWidth
},300,function () {
//根据len的长度判断是否已经轮播到最后一张 如果到最后一张 那么复原从新开始轮播
if(that.index==that.len){
that.ul.css({
left:0
},300)
that.index=0;
}
})
}
}
page.init();
})(jQuery)
</script>
</body>
</html>
