不知道因为什么原因,只要把代码复制到这里,就会少一些字,应该是字符串过滤了,
可以看我的其他博客,
如果不管用,可以选择下面的网址,可以直接复制这用
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><</li>
<li>></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
