一.结构
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#">![](images/slidepic1.jpg)</a></li>
<li><a href="#">![](images/slidepic2.jpg)</a></li>
<li><a href="#">![](images/slidepic3.jpg)</a></li>
<li><a href="#">![](images/slidepic4.jpg)</a></li>
<li><a href="#">![](images/slidepic5.jpg)</a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:void (0)" class="prev"></a>
<a href="javascript:void (0)" class="next"></a>
</div>
</div>
</div>
二.样式
*{margin: 0;padding: 0}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
width:1200px;
height:112px ;
opacity: 0;
position:absolute;
z-index:100;
top: 50%;
transform: translateY(-50%);
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
三.js
<script>
var wrap = document.getElementById("wrap");
var slide = document.getElementById("slide");
var litags = slide.getElementsByTagName("li");
var arrow = document.getElementById("arrow");
var btns = arrow.children;
var flag = true;
var josn =[
{width:300,top:50,left:50,opacity:30,zIndex:1},
{width:600,top:100,left:0,opacity:60,zIndex:5},
{width:800,top:200,left:200,opacity:100,zIndex:10},
{width:600,top:100,left:600,opacity:60,zIndex:5},
{width:300,top:50,left:850,opacity:30,zIndex:1}
];
change();//页面登录了立即执行一次,赋予样式,
//箭头显示隐藏事件
wrap.onmouseenter = function(){
move(arrow,{opacity:100})
};
wrap.onmouseleave = function(){
move(arrow,{opacity:0})
};
//箭头点击事件
//图片切换动画封装,传一个参数,用于判断是向前还是向后
function change(which){
if(which){
josn.push(josn.shift());
}else{
josn.unshift(josn.pop());
}
//利用for循环对li绑定move,给对应的li传对应的json对象
for(var i = 0;i<litags.length;i++){
move(litags[i],josn[i],function(){
flag =true;//再对节流阀取反
})
}
}
//利用事件委托,实现按钮点击事件
arrow.onclick = function(ev){
var e = ev ||event;
var target = e.target || e.srcElement;
console.log(target.className);
if(target.className == "prev"){
if(flag){//传flag是阻止连续点击,节流,
change(true);
flag = false ;//运动完将值反向
}
}else if(target.className == "next"){
console.log(target);
if(flag){
change(false);
flag = false
}
}
}
//代码简化,如上
// btns[0].onclick = function() {
// if (flag) {
// change(true);
// flag = false
// }
// };
// btns[1].onclick = function() {
// if (flag) {
// change(false);
// flag = false
// }
// }