博客列表 >原生JS无缝滚动轮播图(计时器,鼠标点击功能)

原生JS无缝滚动轮播图(计时器,鼠标点击功能)

赵哲云的网络日志
赵哲云的网络日志原创
2017年08月09日 00:43:151215浏览
不知道因为什么原因,只要把代码复制到这里,就会少一些字,应该是字符串过滤了,
可以看我的其他博客,
如果不管用,可以选择下面的网址,可以直接复制这用
http://www.52xunyi.com/?p=86
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动播放焦点图</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box .ul1 {
width: 600%;
list-style: none;
position: absolute;
}
.box .ul1 li {
float: left;
}
.box ol {
list-style: none;
position: absolute;
top: 170px;
left: 328px;
display: block;
}
.box ol li {
float: left;
height: 20px;
width: 20px;
background: #eee;
margin-left: 10px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.box .ul2{
list-style: none;
position: absolute;
top: 80px;
left: 0;
display: none;
}
.box .ul2 li {
float: left;
height: 40px;
width: 40px;
background: #ccc;
text-align: center;
line-height: 40px;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
}
.box .ul2 .ul2Li2 {
margin-left: 420px;
} 
.box ol .current {
background: #f00;
color: #fff;
}
</style>
</head>
<body>
<div id="box" class="box">
<ul class="ul1">
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul class="ul2">
<li>&lt;</li>
<li>&gt;</li>
</ul>
</div>
<script>
 //需求:无缝滚动。
 //思路:赋值第一张图片放到ul的最后,然后当图片切换到第五张的时候
 //直接切换第六章,再次从第一张切换到第二张的时候先瞬间切换到
 //第一张图片,然后滑动到第二张
 //1.获取事件源及相关元素。(老三步)
 //2.复制第一张图片所在的li,添加到ul的最后面。
 //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。
 //4.鼠标放到ol的li上切换图片
 //5.添加定时器
 //6.左右切换图片(鼠标放上去隐藏,移开显示)

//1.获取事件源及相关元素。(老三步)
 // 获取盒子
 var box = document.getElementById('box');
 // 获取ul1
 var ul1 = box.getElementsByTagName('ul')[0];
 // 获取图片宽度,其实就是box的宽度,不过最好是获取图片的宽度,这样子更好理解,但是我的图片没有设置宽度,所以只可以用box的宽度
 // var imgWidth = ul1.children[0].children[0].offsetWidth;
 var imgWidth = box.offsetWidth;
 // 图片个数
 var imgArr = ul1.children;
 console.log(imgArr);
 // 获取ul2
 var ul2 = box.getElementsByTagName('ul')[1];
 // 获取索引盒子
 var olLiArr = box.getElementsByTagName('ol')[0].children;
 // console.log(olLiArr);
 // 获取左右箭头
 var ul2Li2Left = ul2.firstElementChild || ul2.firstChild;
 var ul2Li2Right = ul2.lastElementChild || ul2.lastChild;
 // console.log(ul2Li2Right);
 //2.复制第一张图片所在的li,添加到ul的最后面。
 var newUl1Li1 = ul1.children[0].cloneNode(true);
 console.log(newUl1Li1);
 ul1.appendChild(newUl1Li1);
 // console.log(ul1.children[5]);
 //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。
 // 点亮盒子,排他思想,干掉其他人,剩下我自己
 olLiArr[0].className = "current";

 for(var i = 0; i < olLiArr.length; i++){
 // 采用给小盒子增加属性的方式,用来平移ul1
 olLiArr[i].index = i;
 olLiArr[i].onmouseover = function(){
 // 当鼠标放到小盒子上面的时候,干掉其他人的类,
 for(var i = 0; i < olLiArr.length; i++){
  olLiArr[i].removeAttribute("class");
 }
 // 然后给自己设置类名
 this.className = "current";
 //4.鼠标放到ol的li上切换图片
 //鼠标放到哪个小盒子上面就显示哪张图片
 console.log(this.index);
 // 鼠标放到那个就把自动播放的key变成哪个
 key = square = this.index;

// ul1.style.left = "200px";
animate(ul1,-this.index*imgWidth);
 // console.log(1);
}
}

//5.添加定时器
 //固定向右切换图片
 //两个定时器(一个记录图片,一个记录小方块)
 var key = 0;
 var square = 0;
 function autoPlay () {
 // 设置定时器移动位置
 // ul1.style.left = -key*imgWidth + "px";
 // 判断key的值,如果key的值大于了图片的个数,那么就把key设置为0,并瞬间移动盒子到left = 0;
 if(key > imgArr.length - 1 ){
 // 如果感到很生硬,那么应该先瞬间跳转到第一张,然后直接执行第二张
 ul1.style.left = 0;
 key = 1;

}
animate(ul1,-key*imgWidth);
key++;


 // 让小盒子点亮
 // 因为小盒子只有5个,所以当square变为5之前就要改变为0;
 if (square > olLiArr.length - 1) {
  square = 0;
 }
 for (var i = 0;i<olLiArr.length; i++) {
  olLiArr[i].className = "";
 }
 olLiArr[square].className = "current";
 square++;
}
var timer = null;
timer = setInterval(autoPlay,1000);
 //6.左右切换图片(鼠标放上去隐藏,移开显示)
 box.onmouseover = function () {
  ul2.style.display = "block";
  clearInterval(timer);
 }
 box.onmouseout = function () {
  clearInterval(timer);

  ul2.style.display = "none";
  timer = setInterval(autoPlay,1000);
 }

// 左右切换图片
ul2Li2Right.onclick = function () {
autoPlay();
}
ul2Li2Left.onclick = function () {
 //先移动到最后一张,然后key的值取之前一张的索引值,然后在向前移动
 //为了保证不移动的那么的生硬,当key小于0的时候,把图片设置为最后一张,然后key的值取前一张的索引值,然后再次执行匀速动画
 key--;
 if(key < 0){
  ul1.style.left = -imgWidth*(imgArr.length-2) + "px";
  key = imgArr.length - 2;
 }
 animate(ul1,-key*imgWidth);

// 控制小盒子
square --;
if(square < 0){
square = olLiArr.length - 1;
}
for(var i = 0; i < olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";

}

// 匀速运动切换函数
function animate(element,target){
 // 用到定时器,先清定时器,把定时器当作元素的一个属性绑定到自身
 clearInterval(element.timer);
 // 1.用定时器的思想,
 // 2.获取步长,如果目标值大于原始位置,则步长为正值,否则为负值
 var step = target > element.offsetLeft ? 10:-10;
 element.timer = setInterval(function(){
 // 3.设置offsetWidth给left,
 element.style.left = element.offsetLeft + step + "px";
 var result = target - element.offsetLeft;
 // 4.判断目标值和盒子的位置,如果小于步长,则停止计时器,并瞬间把盒子的left设置为目标值
 if(Math.abs(result) <= Math.abs(step)){
  element.style.left = target + "px";
  clearInterval(element.timer);
 }
},10);
 
}
</script>
</body>
</html>

不知道因为什么原因,只要把代码复制到这里,就会少一些字,应该是字符串过滤了,可以看我的其他博客

http://www.52xunyi.com/?p=86

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议