js代码：
<script type="text/javascript"> var timer; //鼠标移入移出事件 //获取所有的div var divbg = document.getElementsByClassName("divbg")[0]; //鼠标移上去计时器停止 divbg.onmouseenter = function() { clearInterval(timer); } //鼠标移开计时器开始 divbg.onmouseleave = function() { timer = setInterval(function () { showimg("right"); }, 2000) } //鼠标点击左右按钮事件 //获取左右按钮 var left = document.getElementsByClassName("btn_left")[0]; var right = document.getElementsByClassName("btn_right")[0]; //左按钮点击事件 left.onclick = function() { showimg("left"); } //右按钮点击事件 right.onclick = function() { showimg("right"); } //实现图片的淡入淡出 //获取所有的图片元素 var img_info = document.getElementsByClassName("img_list"); //给所有的图片加上z-index样式，使第一个图片在最上边，然后依次排列 for(var i = 0; i < img_info.length; i++) { img_info[i].style.zIndex = img_info.length - i - 1; //将第一个图片下边的图片隐藏 if(i != 0) { img_info[i].style.opacity = 0; } } //构造函数 function showimg(isleftorright) { //让所有的图片的z-index样式索引循环加1，将下一张图片显示出来 for(var i = 0; i < img_info.length; i++) { var zindex = parseInt(img_info[i].style.zIndex); //将z-index转化为整型 if(isleftorright == "right") { zindex += 1; //+1 if(zindex > 5) { zindex = 0; img_info[i].style.opacity = 0; } if(zindex == 5) { img_info[i].style.opacity = 1; } } else{ zindex -= 1; //-1 if(zindex < 0) { zindex = 5; img_info[i].style.opacity = 1; } if(zindex == 4) { img_info[i].style.opacity = 0; } } img_info[i].style.zIndex = zindex; //索引值-1 } } timer = setInterval(function () { showimg("right"); }, 2000) </script>css代码：
.divbg { width: 1000px; height: 424px; border: 1px #000 solid; margin: 0 auto; position: relative; } .img_list { position: absolute; transition: all 2s linear; } .btn_left, .btn_right { width: 60px; height: 120px; line-height: 120px; display: block; font-size: 5em; color: #fff; position: absolute; z-index: 10; cursor: pointer; } .btn_left { top: 152px; } .btn_right { right: 0px; top: 152px; } .btn_left:hover { background-color: #000; opacity: 0.5; } .btn_right:hover { background-color: #000; opacity: 0.5; }html代码：
<div class="divbg"> <span class="btn_left"> < </span> <span class="btn_right"> > </span> <img class="img_list" src="img/visual_slide01.jpg" /> <img class="img_list" src="img/visual_slide02.jpg" /> <img class="img_list" src="img/visual_slide03.jpg" /> <img class="img_list" src="img/visual_slide04.jpg" /> <img class="img_list" src="img/visual_slide05.jpg" /> <img class="img_list" src="img/visual_slide06.jpg" /> </div>