<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
width:500px;
height:200px;
padding:7px;
border:1px solid #ccc;
margin:100px auto;
/*position:relative;*/
}
.screen{
width:500px;
height:200px;
overflow:hidden;
position:relative;
}
.screen li{ width:500px; height:200px; overflow:hidden; float:left;}
.screen ul{ position:absolute; left:0; top:0px; width:3000px;}
.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
.all ol li.current{ background:yellow;}
#arr {display: none;}
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑體'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
#arr #right{right:5px; left:auto;}
</style>
</style>
<meta charset="UTF-8">
<title>cycle roll</title>
</head>
<div class="all" id='all'>
<div class="screen" id="screen">
<ul id="ul">
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
<script type="text/javascript">
//需求：無縫輪播圖
//步驟：
//1.老三步。獲取相關元素。
//2.補齊相互盒子
//1.複製第一張圖片所在的li，填入所在的ul中。
//2.生成相關的ol中的li。
//3.點亮第一個ol中的li。
//3.鼠標放到小方塊兒上，輪播圖片。
//4.添加定時器。
//5.左右切換的按鈕。
var wrap=document.getElementById('all');
var screen=document.getElementById('screen');
var ol=screen.children[1];
var ul=document.getElementById('ul');
var imgWidth=ul.children[0].offsetWidth;
var arrBtn=document.getElementById('arr');
// 2補齊相互盒子
// 拷貝li
var newLi=ul.children[0].cloneNode(true);
ul.appendChild(newLi);
// 添加下方控制按鈕
for(var i=0;i<ul.children.length-1;i++)
{
var item=document.createElement('li');
item.innerHTML=i+1;
ol.appendChild(item);
}
ol.children[0].className='current';
//3.鼠標放到小方塊兒上，輪播圖片。
for(var j=0;j<ul.children.length-1;j++)
{
ol.children[j].index=j;
ol.children[j].onmouseover=function(){
// 排他思想
for(var k=0;k<ul.children.length-1;k++)
{
ol.children[k].className='';
}
this.className='current';
// 鼠標放到圖片上時。index與square和key同步
square=key=this.index;
animate(ul,-this.index*imgWidth);
}
}
//4.添加定時器。
var timer=null;
var key=0;
var square=0;
timer=setInterval(autoPlay,1000);
// 自動播放函數
function autoPlay(){
// 設置兩個定時器，一個控制小方塊，一個控制圖片
key++;
// 當滾動到最後一張時，滑動到第一張，滾動到第二張
if(key>ul.children.length-1)
{
key=1;
// 立即滑動到第一張
ul.style.left=0;
}
animate(ul,-key*imgWidth);
square++;
if(square>ol.children.length-1)
{square=0;}
for(var i=0;i<ol.children.length;i++)
{
ol.children[i].className='';
}
ol.children[square].className='current';
}
// 鼠標移入，停止輪播，移出，繼續輪播
wrap.onmouseover=function(){
clearInterval(timer);
arrBtn.style.display='block';
}
wrap.onmouseout=function(){
timer=setInterval(autoPlay,1000);
arrBtn.style.display='none';
}
//5.左右切換的按鈕。
arrBtn.children[0].onclick=function(){
// 設置兩個定時器，一個控制小方塊，一個控制圖片
key--;
// 當滾動到第一張時，立即設置當前爲最後一張，然後滑動倒數到第二張
if(key<0)
{
key=ul.children.length-2;
// 立即滑動到倒數第二張
ul.style.left=-(ul.children.length-1)*imgWidth+'px';
}
animate(ul,-key*imgWidth);
square--;
if(square<0)
{square=ol.children.length-1;}
for(var i=0;i<ol.children.length;i++)
{
ol.children[i].className='';
}
ol.children[square].className='current';
}
arrBtn.children[1].onclick=function(){
autoPlay();
}
function animate(obj,target){
// 清除定時器
clearInterval(obj.timer);
// 目標值大於當前位置，則向右滾動，否則，向左
var speed=obj.offsetLeft < target ? 15 : -15;
obj.timer=setInterval(function(){
obj.style.left=obj.offsetLeft+speed+'px';
// 判斷是否還足夠一步長
if(Math.abs(target - obj.offsetLeft)<Math.abs(speed)){
// 若不夠一步長，則停止運動，並且後退一步
obj.style.left=target+'px';
clearInterval(obj.timer);
}
},10);
}
</script>
</html>js 輪播圖Demo
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur