<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图4</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box {
overflow: hidden;
position: relative;
}
img {
width: 640px;
height: 400px;
}
ol {
width: 30000px;
position: absolute;
}
ol li{
float: left;
}
.box{
width: 640px;
height: 400px;
border: orange 2px solid;
}
#btn{
position:absolute;
right: 10px;
bottom: 10px;
}
#btn li {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: white;
display: inline-block;
border: 1px solid deepskyblue;
margin-right: 5px;
cursor: pointer;
}
.foc{
background-color: coral;
}
.arr {
width: 640px;
height: 400px;
position: absolute;
top: 0;
/*display: block;*/
}
.arr span {
width: 50px;
height: 80px;
background-color: rgba(255,255,255,0.3);
color: #E2D762;
position: absolute;
top: 50%;
margin-top: -40px;
line-height: 80px;
font-size: 20px;
font-weight: bold;
text-align: center;
z-index: 65151;
cursor: pointer;
border-radius: 0 8px 8px 0;
}
#right{
right: 0;
border-radius: 8px 0 0 8px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class = "arr">
<span id = "left"> < </span>
<span id= "right"> > </span>
</div>
<ol class = "pic">
<li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/5.jpg" alt=""></a></li>
</ol>
<ul id="btn">
<!--这里放小按钮-->
</ul>
</div>
<script>
var box = document.getElementById("box");
var pic = document.getElementsByClassName("pic")[0];
var imgW = document.getElementsByTagName("img")[0].width;
var list = pic.children;
var btn = document.getElementById("btn");
var arr = document.getElementsByClassName("arr")[0];
var left = arr.firstElementChild;
var right = arr.lastElementChild;
//引入移动的函数
function move(element,target){
clearInterval(timeId); //解决隐藏的BUG，每次点击先清理定时器再创建定时器，解决多次点击时运动变快的BUG
var current = element.offsetLeft;
var timeId = setInterval(function(){
if (current != target) {
var temp = 9; //设置每次走的距离 这句代码放进计时器中才能实现往回走，即current>target的情况。因为这种情况每次计时都要设置temp = -10,不放进来的话temp会10，-10来回变，导致盒子抖动不能到达目标地
temp = current <= target ? temp : -temp; //根据当前和目标的关系确定往哪走
if (Math.abs(current-target) > Math.abs(temp)) { //当前距离大于每次走得距离则继续走
current += temp;
element.style.left = current + "px";
} else { //当前距离小于等于每次走得距离：则直接跳到目标位置,并且清理定时器
element.style.left = target + "px";
clearInterval(timeId);
}
}
},1);
}
//创造小按钮
for (var i = 0; i < list.length; i++) {
var li = document.createElement("li");
btn.appendChild(li);
li.innerText = i+1;
li.setAttribute("index",i);//设置一个自定义属性
btn.firstElementChild.className = "foc";//设置初始第一个按钮的样式
//创造的同时注册鼠标进入事件
var index = 0; //全局变量
li.onmouseover = function () {
for (var j = 0; j < btn.children.length; j++) {
btn.children[j].className = "";//清除所有按钮的样式
this.className = "foc"; //设置当前按钮的样式
}
index = this.getAttribute("index");
move(pic, -index*imgW);
};
}
//制作左右点击的部分
//设置鼠标进入离开
box.onmouseover = function(){
arr.style.display = "block";
};
box.addEventListener("mouseout",function(){
arr.style.display = "none";
},false)
pic.appendChild(list[0].cloneNode(true));//克隆第一个图放到最后
//设置 鼠标点击事件
right.onclick = rightMove;
function rightMove(){
console.log(index);
//设置图片的运动
if(index == list.length-1){ //当到达克隆的那一张再点击时，
index = 0; //索引复原
pic.style.left = 0+"px";//立即跳到第一张
}
index ++; //将索引加一即下一个小按钮对应的索引。这里调用了上个函数内的变量，必须将这个变量设置为全局变量才能得到
move(pic, -index*imgW);//这两句放在if的外面，每次点击都会做的事
//设置小按钮的样式变化
if(index == list.length-1 ){ //当到达克隆的图时，应该把第一个小按钮设置上
for (var j = 0; j < btn.children.length; j++) {
btn.children[j].className = "";//清除所有按钮的样式
btn.children[0].className = "foc"; //设置第一个按钮的样式
}
}else{
for (var j = 0; j < btn.children.length; j++) {
btn.children[j].className = "";//清除所有按钮的样式
btn.children[index].className = "foc"; //设置当前按钮的样式
}
}
// 特别注意：由于小按钮个数和图片个数不同，导致利用索引设置小按钮样式时会出现BUG，
// 即索引值加到length-1时已经无法设置这个对应的小按钮（这个小按钮不存在）所以设置按钮样式的代码和设置图片移动的代码应分开
//克隆的加入，最后一张伪图的加入导致这里很绕，索引值与图片的对应关系变化，索引值与小按钮的对应变化应注意
};
left.onclick = function () {
console.log(index);
if(index == 0){ //在第一张时点击
index = list.length-1; //索引到最大
pic.style.left = -index*imgW+"px";//立即跳到clone的那张图
}
index --;
move(pic, -index*imgW);
for (var j = 0; j < btn.children.length; j++) {
btn.children[j].className = "";//清除所有按钮的样式
}
btn.children[index].className = "foc"; //设置当前按钮的样式，这句放在for外面更好，只执行一次，放在for里会执行多次
//这里的按钮样式设置不需要考虑特殊情况，因为这里的索引会--，索引与按钮会对应，而上面索引++时要考虑索引大于按钮的情况
};
//设置自动轮播
//思路：利用定时器每隔一段时间执行一次点击有点按钮的事件
</script>
</body>
</html>
浙公网安备 33010602011771号