今天分享一下我自己早幾天寫的一個效果：無縫輪播，雖然不難，很簡單，也沒有封裝處理過，但是還是希望能幫到一些前端的小伙伴吧，如果有小伙伴感覺有更簡化的寫法希望可以一起交流一下，技術在於交流嘛，我的郵箱是 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>