* {
margin: 0;
padding: 0;
list-style: none;
border: 0;
}img {
cursor: pointer;
width: 500px;
height: 200px;
}.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #cccccc;
margin: 100px auto;
position: relative;
}.screen {
width: 500px;
height: 200px;
position: relative;
overflow: hidden;
}.screen ul {
width: 3000px;
top: 0;
left: 0;
position: absolute;
}.screen li {
width: 500px;
height: 200px;
float: left;
/*overflow: hidden;
*/
}.screen ol {
position: absolute;
width: 140px;
height: 20px;
border-radius: 10px;
background: rgba(0, 0, 0, .6);
bottom: 15px;
left: 50%;
margin-left: -70px;
cursor: pointer;
}.screen ol li {
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
float: left;
margin: 4px 8px;
}.screen ol .current {
background-color: #f10215;
}#arr {
display: none;
}#arr #left,
#arr #right {
position: absolute;
width: 30px;
height: 50px;
top: 50%;
margin-top: -25px;
background: rgba(0, 0, 0, .3);
font-size: 30px;
color: #ffffff;
;
cursor: pointer;
text-align: center;
line-height: 50px;
}/*.arrCol{
background: rgba(0,0,0,.6);
}*/#right {
right: 7px;
}
文章图片
文章图片
文章图片
文章图片
文章图片
id="left"><
id="right">>
>
//获取最外层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;
//全局变量
//创建下方按钮
for (var i = 0;
i < list.length;
i++) {
var liObj = document.createElement("li");
olObj.appendChild(liObj);
//创建自定义属性，存储索引
liObj.setAttribute("index", i);
//注册按钮鼠标进入事件
liObj.onmouseover = function () {
//清除所有ol中li的样式
for (var j = 0;
j < olObj.children.length;
j++) {
olObj.children[j].removeAttribute("class");
}
this.className = "current";
//获取当前索引值
pic = this.getAttribute("index");
animate(ulObj, -pic * imgWidth);
};
}
//设置按钮默认颜色
olObj.children[0].className = "current";
//自动播放---直接调用右边按钮点击事件
var timeId = setInterval(clickHandle, 1000);
//复制ul中的第一个li然后加入到ul中的最后一个（为了实现无缝衔接）
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//鼠标进入box显示左右焦点
box.onmouseover = function () {
arr.style.display = "block";
//停止自动播放
clearInterval(timeId);
};
//鼠标离开隐藏左右焦点
box.onmouseout = function () {
arr.style.display = "none";
//继续自动播放
timeId = setInterval(clickHandle, 1000);
};
//右边按钮点击事件
my$("right").onclick = clickHandle;
function clickHandle() {
//length=6,若当前索引值为5（当前显示的是第六张图片）.就将索引值重新设置为0，并在下一次点击时显示的是第二张图片
if (pic == list.length - 1) {
pic = 0;
ulObj.style.left = 0 + "px";
}
pic++;
animate(ulObj, -pic * imgWidth);
//如果pic为5，此时显示第六张图片（用户看到的是第一张），第五个按钮样式应该取消，第一个按钮添加样式
if (pic == list.length - 1) {
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
} else {
//遍历ol，将所有样式清除，设置当前样式为current
for (var i = 0;
i < olObj.children.length;
i++) {
olObj.children[i].className = "";
}
olObj.children[pic].className = "current";
}
};
//左边按钮点击事件
my$("left").onclick = function () {
//若当前索引为0，
if (pic == 0) {
pic = list.length - 1;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
console.log(pic);
animate(ulObj, -pic * imgWidth);
for (var i=0;
i
【完整的轮播图】
文章图片
