<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
width: 500px;
height: 200px;
border: 1px solid #cccccc;
margin: 200px auto;
padding: 5px;
position: relative;
}
#box #inner{
width: 500px;
height: 200px;
position: relative;
overflow: hidden;
}
#box ul {
width: 1000%;
position: absolute;
left: 0;
top: 0;
}
#box li {
float: left;
}
#box ol {
/*加宽度会报错，为什么*/
position: absolute;
right: 10px;
bottom: 10px;
}
#box ol li {
width: 20px;
height: 20px;
background-color: #fafafa;
color: #000;
border: 1px solid #000;
float: left;
margin-left: 5px;
text-align: center;
line-height: 20px;
opacity: 0.5;
}
#box ol li.current {
background-color: coral;
}
#foucs {
display: none;
}
#foucs span{
width: 40px;
height: 40px;
font-weight: bold;
font-family: "黑体";
font-size: 40px;
text-align: center;
line-height: 40px;
background-color: #000;
color: white;
border: 1px solid #ffffff;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
opacity: 0.3;
cursor: pointer;
}
#foucs #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box">
<!--相框-->
<div id="inner">
<ul id="bigimg">
<li><a href="#"><img src="images_integrity/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images_integrity/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images_integrity/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images_integrity/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images_integrity/5.jpg" alt=""/></a></li>
</ul>
<!--数字小图标-->
<ol></ol>
</div>
<!--箭头焦点-->
<div id="foucs" class="foucs">
<span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="../common.js"></script>
<script>
//获取box对象
var boxobj=my$("box");
//获取相框对象
var innerobj=my$("inner");
//获取图片的长度
var innerwidth=innerobj.offsetWidth;
//获取ul对象
var ulobj=my$("bigimg");
//获取各个图片
var imgobj=ulobj.children;
//获取ol对象
var olobj=innerobj.children[1];
//获取左右图标盒子的对象
var foucsobj=my$("foucs");
//获取右箭头的对象
var rightobj=my$("right");
//获取左箭头的对象
var leftobj=my$("left");
//非常重要，全局遍历，用于绑定箭头和小下标
var pic=0;
//循环遍历创建ol小图标
for(var i=0;i<imgobj.length;i++){
//创建ol中的li元素
var olli=document.createElement("li");
//添加li到父元素中
olobj.appendChild(olli);
//给li元素加值
olli.innerHTML=(i+1);
//给li元素添加下标
olli.setAttribute("index",i);
//遍历的过程中给ol小图标添加鼠标进入事件
olli.onmouseover=function(){
//排他功能
for(var j=0;j<olobj.children.length;j++){
olobj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
move(ulobj,-innerwidth*pic);
};
// //遍历的过程中给ol小图标添加鼠标离开事件
// olli.onmouseout=function(){
// this.className="";
// };
}
//给第一个olli元素设置背景颜色
olobj.children[0].className="current";
//因为需要无缝的效果，所以需要先克隆一个图片
ulobj.appendChild(ulobj.children[0].cloneNode(true));
//鼠标放在盒子上，左右箭头的图标需要显示出来
boxobj.onmouseover=function(){
foucsobj.style.display="block";
clearInterval(timeid);
};
//鼠标离开盒子，左右箭头的图标隐藏
boxobj.onmouseout=function(){
foucsobj.style.display="none";
timeid=setInterval(rightClick,2000);
};
//为右边的箭头添加鼠标事件
rightobj.onclick=rightClick;
function rightClick(){
//如果图片到第六个的时候，因为客户会以为是第一个图。这是图片的位置应该马上到第一个,下标也要设置为0
if(pic==ulobj.children.length-1){
pic=0;
ulobj.style.left=0+"px";
}
//正常情况下，点一下，移动一个位置
pic++;
move(ulobj,-innerwidth*pic);
//图片位置改变，对应的小下标也要跟着改变。
if(pic==ulobj.children.length-1){
//第5个小下标的颜色去掉
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";
}
}
//为左边的箭头添加鼠标事件
leftobj.onclick=function(){
if(pic==0){
pic=5;
ulobj.style.left=-(innerwidth*pic)+"px";
console.log(ulobj.style.left);
}
pic--;
move(ulobj,-innerwidth*pic);
//对应的下标也要变化，排他功能
for(var i=0;i<olobj.children.length;i++){
olobj.children[i].removeAttribute("class");
}
olobj.children[pic].className="current";
};
//自动播放（将为右边的箭头添加的鼠标事件，循环播放）
//但是鼠标只要放在盒子上，就停止，离开就继续
var timeid=setInterval(rightClick,2000);
//移动动画函数
function move(element, target) {
//第二个坑，每点一次按钮就出现一个定时器，容易造成越点越快，所以搜先要清理之前的定时器，保证只存在一个定时器。
clearInterval(element.timeid);
//timeid之前是一个变量，现在定义为element的一个属性，这样无论开多少定时器，timeid内存只占一个，不会开辟新的内存空间。
element.timeid = setInterval(function () {
var current = element.offsetLeft;
var step = 10;
step = target - current > 0 ? step : -step;
//每次移动后的距离
current += step;
//第一个坑
//判断移动后的距离是否到达目标位置
if (Math.abs(target - current) > Math.abs(step)) {
//显示移动后的距离，但是要考虑最后马上到的距离。
element.style.left = current + "px";
} else {
//如果距离小于10，就直接到目标点。
clearInterval(element.timeid);
element.style.left = target + "px";
}
}, 20);
}
</script>
</body>
</html>
效果如图所示
完整的轮播图
网友评论