JS---案例：完整的轮播图---重点！
程序员文章站
2022-05-04 12:13:32
案例：完整的轮播图 思路： 分5部分做 1. 获取所有要用的元素 2. 做小按钮，点击移动图标部分 3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变 （克隆了第一图到第六图，用索引liObj.setAttribute("index", i)，pic = this.getAttribute(" ......
案例：完整的轮播图
思路：
分5部分做
1. 获取所有要用的元素
2. 做小按钮，点击移动图标部分
3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变 （克隆了第一图到第六图，用索引liobj.setattribute("index", i)，pic = this.getattribute("index");pic++, 当pic到5的时候，就回到pic=0的时候，同时设置样式）
4. 做左边焦点按钮 (用索引，当pic=0的时候，pic--，设置样式)
5. 自动轮播加上，设置个定时器，鼠标进入就清除定时器，鼠标移开就启用定时器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<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: #db192a;
}
#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>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<!--相框-->
<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>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取当前相框的宽度
var imgwidth = screen.offsetwidth;
//获取ul
var ulobj = screen.children[0];
//获取ul中所有的li
var list = ulobj.children;
//获取ol
var olobj = screen.children[1];
//获取焦点的div
var arr = my$("arr");
var pic = 0;//全局变量
//创建小按钮，根据ul中li的个数
for (var i = 0; i < list.length; i++) {
//创建li标签，加入到ol中
var liobj = document.createelement("li");
olobj.appendchild(liobj);
liobj.innerhtml = (i + 1);
//在每个ol中的li标签上添加一个自定义属性，存储索引值
liobj.setattribute("index", i);
//注册鼠标进入时间
liobj.onmouseover = function () {
//先干掉所有ol中的li背景颜色
for (var j = 0; j < olobj.children.length; j++) {
olobj.children[j].removeattribute("class");
}
//设置当前鼠标进入li的背景颜色
this.classname = "current";
//设置鼠标进入的li的当前索引值
pic = this.getattribute("index");
//移动ul
animate(ulobj, -pic * imgwidth);
};
}
//克隆一个ul中第一个li，加入到ul中的最后----克隆
ulobj.appendchild(ulobj.children[0].clonenode(true));
// 自动播放
var timeid = setinterval(clickhandle, 1000);
//鼠标进入到box 显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearinterval(timeid);
};
//鼠标离开box，隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
timeid = setinterval(clickhandle, 1000);
};
//右边按钮
my$("right").onclick = clickhandle;
function clickhandle() {
//如果pic的值是5，恰巧是ul中li的个数-1的值，此时页面显示第六个图片
//而客户认为这是一个图，所以如果用户再次点击按钮，应该看到第二个图片
if (pic == list.length - 1) {
//如何从第六个图跳转到第一个图
pic = 0; //先设置pic=0;
ulobj.style.left = 0 + "px";//把ul位置还原成开始的默认位置
}
pic++;//立刻设置pic+1，那么用户就会看到第二个图片；
animate(ulobj, -pic * imgwidth);
//如果pic==5,此时显示第六个图，内容是第一张图片，第一个小按钮有颜色
if (pic == list.length - 1) {
//第五个颜色干掉
olobj.children[olobj.children.length - 1].classname = "";
olobj.children[0].classname = "current";
} else {
//干掉所有小按钮背景颜色
for (var i = 0; i < olobj.children.length; i++) {
olobj.children[i].removeattribute("class");
}
olobj.children[pic].classname = "current";
}
};
//左边按钮
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulobj.style.left = -pic * imgwidth + "px";
}
pic--;
animate(ulobj, -pic * imgwidth);
//设置小按钮的颜色---先所有小按钮干掉颜色
for (var i = 0; i < olobj.children.length; i++) {
olobj.children[i].removeattribute("class");
}
//当前pic索引对应的按钮，设置颜色
olobj.children[pic].classname = "current";
};
// </script>
</body>
</html>