<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
div.mask{width:508px ;height:206px ;margin:100px auto;position: relative;overflow: hidden;}
ul{list-style: none;}
ul.img{width: 700%;height: 206px;position: absolute;left: 0;top: 0;}
ul.img li{float: left;}
ul.img li img{width: 508px;height: 206px;}
ul.arrow{position:absolute;left:0;top:50%;transform:translateY(-50%);width: 100%;font-size: 30px;text-align: center;color: white;}
ul.arrow li{float: left;width: 50px;line-height: 50px;cursor: pointer;background-color:rgba(0,0,0,.8)}
ul.arrow li:nth-child(1){float: right;}
ul.point{width: 100px; height: 5px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}
ul.point li{width:10px;height: 5px;border-radius: 10px;margin-left: 10px;float: left;background-color:rgba(255,0,0,.5) ;cursor: pointer;}
ul.point li:nth-child(1){margin-left: 0;}
ul.point li.active{transition:all 2s infinite;width: 20px;}
</style>
</head>
<body>
<div class="mask">
<ul class="img">
<li>
<img src="../img/5b56fefbe2cd3901156b0e70979730da.png" alt="" />
</li>
<li><img src="../img/c22ff27949d96c8592b8c91514703ecd.jpg" alt="" /></li>
<li><img src="../img/9fb97f15c5a219d7ffdd9ee8f26aa9cc.jpg" alt="" /></li>
<li><img src="../img/136e244dcf4130d87633e3f6af7df94d.png" alt="" /></li>
<li><img src="../img/1cea15a7acb21dd44df8a6ee3dd7ea45.jpg" alt="" /></li>
</ul>
<ul class="point">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="arrow aww">
<li>></li>
<li><</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../js/move.js" ></script>
<script>
window.onload=function(){
/*封装的getbyclassname开始*/
function getByclassName(classname){
var arr=[];
var doM=document.getElementsByTagName('*');
for(var i=0;i<doM.length;i++){
var index=doM[i];
if(index.className.indexOf(classname)==0){
arr.push(index);
}
}
return arr;
}
/*封装的getbyclassname结束*/
var oArrow=getByclassName("arrow")[0];//自己封装的getclassname;
var oPoint=getByclassName('point')[0];
var oIMG=getByclassName('img')[0];
var oMask=getByclassName('mask')[0];
oIMG.now=0;
/*克隆图片开始*/
/*var liFirst=oIMG.children[0].cloneNode(true);
var liLast=oIMG.children[4].cloneNode(true);
oIMG.appendChild(liFirst);
oIMG.insertBefore(liLast,oIMG.children[0]);*/
//console.log(liFirst,liLast);
// oIMG.style.left=-oMask.offsetWidth+'px';
/*克隆图片结束*/
/*单击切换实现转换开始*/
var len=oIMG.children.length;
oArrow.children[0].onclick=function(){
if(oIMG.now==len-1){
oIMG.now=0;
startMove(oIMG,{left:0});
updatePoint(oIMG.now);
}else{
oIMG.now++;
var current=oIMG.offsetLeft;
var target=oIMG.now*oMask.offsetWidth;
var dis=Math.abs(target)-Math.abs(current);
startMove(oIMG,{left:-dis+current});
console.log(dis,oIMG.now,len)
updatePoint(oIMG.now);
}
}
oArrow.children[1].onclick=function(){
if(oIMG.now==0){
oIMG.now=len-1;
startMove(oIMG,{left:-oIMG.now*oMask.offsetWidth});
updatePoint(oIMG.now);
}else{
oIMG.now--;
var current=oIMG.offsetLeft;
var target=oIMG.now*oMask.offsetWidth;
var dis=Math.abs(target)-Math.abs(current);
startMove(oIMG,{left:-dis+current});
updatePoint(oIMG.now);
}
console.log(oIMG.now)
}
/*单击实现转换结束*/
/*单击小圆点的转换开始*/
function updatePoint(index){
for(var i=0;i<oIMG.children.length;i++){
oPoint.children[i].className='';
}
oPoint.children[index].className='active';
}
/*单击开始*/
for(var i=0;i<oIMG.children.length;i++){
oPoint.children[i].index=i;
console.log(oPoint.children[i])
oPoint.children[i].onclick=function(){
updatePoint(this.index);
startMove(oIMG,{left:-this.index*oMask.offsetWidth});
oIMG.now=this.index;
}
}
/*单击结束*/
/*单击小圆点的转换结束*/
/*自动播放开始*/
function autoPlay(){
clearInterval(oIMG.time);
oIMG.time=setInterval(function(){
oArrow.children[0].click();
},3000)
}
autoPlay();
/*自动播放结束*/
/*鼠标移动在Omask上面时停止播放开始*/
oMask.onmouseenter=function(){
clearInterval(oIMG.time);
console.log(11)
}
oMask.onmouseleave=function(){
autoPlay();
console.log(22)
}
/*鼠标移动在Omask上面时停止播放结束*/
}
</script>
</html>