<!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].οnmοuseοver=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.οnmοuseοver=function(){
clearInterval(timer);
arrBtn.style.display='block';
}
wrap.οnmοuseοut=function(){
timer=setInterval(autoPlay,1000);
arrBtn.style.display='none';
}
//5.左右切换的按钮。
arrBtn.children[0].οnclick=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].οnclick=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
最新推荐文章于 2023-01-17 20:39:29 发布