<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
li,
a {
cursor: pointer;
}
img {
vertical-align: middle;
}
.box {
width: 500px;
height: 200px;
padding: 2px ;
border: 1px solid deepskyblue;
margin: 200px auto;
position: relative;
}
.box .photoframe {
height: 100%;
overflow: hidden;
position: relative;
}
.box .photoframe ul.photo {
width: 600%;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.box .photoframe ul.photo li {
float: left;
}
.box .photoframe ul.photo li a {
display: block;
}
.box .photoframe ul.photo img {
width: 500px;
height: 200px;
}
.box .photoframe ul.point {
position: absolute;
bottom: 10px;
right: 10px;
}
.box .photoframe ul.point li {
float: left;
width: 16px;
height: 16px;
background-color: #fff;
border: 1px solid gray;
color: green;
margin-left: 10px;
text-align: center;
line-height: 16px;
}
.box .photoframe ul.point li.current {
background-color: yellow;
}
ul.jiantou {
display: none;
}
ul.jiantou li {
position: absolute;
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,.4);
text-align: center;
line-height: 30px;
color: #ffffff;
font-weight: bolder;
}
ul.jiantou li:hover {
background-color: rgba(0,0,0,.8);
}
ul.jiantou li.left {
left: 10px;
}
ul.jiantou li.right {
right: 10px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="photoframe" id="photoframe">
<ul id="photo" class="photo">
<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>
</ul>
<ul class="point" id="point">
</ul>
</div>
<ul class="jiantou" id="jiantou">
<li id="left" class="left"><</li>
<li id="right" class="right">></li>
</ul>
</div>
<script src="js/id.js"></script>
<script src="js/moveEle.js"></script>
<script src="js/creat.js"></script>
<script src="js/getsetText.js"></script>
<script>
//获取box
var box=my$('box');
//获取相框
var phf=my$('photoframe');
//获取ul
var ull=phf.children[0];
//获取图片
var list=ull.children;
//console.log(list);
//获取每个图片的宽度
var imgWidth=list[0].offsetWidth;
//获取点
var uist=my$('point');
//动态创建点
for(var i=0;i<list.length;i++){
var liObj=creat('li');
liObj.setAttribute('index',i);
setText(liObj,i+1);
console.log(liObj);
uist.appendChild(liObj);
}
//console.log(uist.children);
var pist=uist.children;
//设置第一个点的背景颜色
pist[0].className='current';
var index=0;
for(var k=0;k<list.length;k++) {
pist[k].onmouseover = function () {
for (var j = 0; j < list.length; j++) {
pist[j].removeAttribute('class');
}
this.className = 'current';
index=this.getAttribute('index');
console.log(index);
move(ull,-index*imgWidth,50);
};
}
//克隆ul的第一个子元素,放到最后的位置
// ull.appendChild(ull.children[0].cloneNode(true));
//鼠标进入box的时候显示左右箭头,移出消失
var jiantou=my$('jiantou');
box.onmouseover=function(){
jiantou.style.display='block';
clearInterval(time);
};
box.onmouseout=function(){
jiantou.style.display='none';
time=setInterval(willing,1000);
};
//左箭头事件
my$('left').onclick=function(){
if(index>0){
index--;
for(var q=0;q<list.length;q++){
pist[q].removeAttribute('class');
}
pist[index].className='current';
move(ull,-index*imgWidth,50);
}
else if(index===0){
index=4;
ull.style.left='-2000px';
move(ull,-index*imgWidth,50);
pist[0].removeAttribute('class');
pist[4].className='current';
}
};
//右箭头事件
my$('right').onclick=willing;
function willing() {
if (index < list.length - 1) {
index++;
for (var q = 0; q < list.length; q++) {
pist[q].removeAttribute('class');
}
pist[index].className = 'current';
move(ull, -index * imgWidth, 50);
} else if (index === list.length - 1) {
index = 0;
ull.style.left = '0px';
move(ull, -index * imgWidth, 50);
pist[4].removeAttribute('class');
pist[index].className = 'current';
}
}
//实现自动播放
var time=setInterval(willing,1000);
</script>
</body>
</html>
最终效果如下:
实现了自动轮播,鼠标移入显示左右箭头并且可以点击箭头切换图片,鼠标移出箭头消失,以及鼠标悬浮下方方块切换图片