1.HTML代码
<div id="wrap"><img src="images/1.jpg" alt="" class="on"><img src="images/2.jpg" alt=""><img src="images/3.jpg" alt=""><img src="images/4.jpg" alt=""><div class="btn"><span class="active"></span><span></span><span></span><span></span></div><i class="left" id="prev"></i><i class="right" id="next"></i></div>
2.css代码
#wrap{position: relative;width:590px;height: 470px;}#wrap img{position: absolute;top: 0;left: 0;/*display: none;*/opacity: 0;}#wrap .on{/*display: block;*/transition: 2s;opacity: 1;}.btn {position: absolute;bottom: 20px;left: 50%;margin-left: -44px;}.btn span{float: left;width: 8px;height: 8px;border:2px solid rgba(255,255,255,0.4);border-radius: 5px;margin-right: 10px;}.btn .active{background: white;cursor: pointer;}.left,.right{display: block;width: 37px;height: 53px;position: absolute;top: 50%;margin-top: -27px;cursor: pointer;}.left{background: url("images/arrow.png") left top;}.right{background: url("images/arrow.png") left -53px;right: 0;}
3.js代码
window.onload = function () {var oWrap = document.getElementById('wrap');var aImg = oWrap.getElementsByTagName('img');var aBtn = oWrap.getElementsByTagName('span');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next');var iNow =0;function tab(){for (var i =0;i<aBtn.length;i++){//清空所有按钮选中样式以及图片显示样式aBtn[i].className='';aImg[i].className='';}aBtn[iNow].className='active';//设置当前按钮选中样式以及当前图片透明度aImg[iNow].className='on';}setInterval( function () {//每两秒循环变换下一张图片iNow++;if (iNow==aBtn.length)iNow=0;tab();},2000);for (var i =0;i<aBtn.length;i++){aBtn[i].index=i;//为按钮添加自定义属性（索引）目的是使图片和按钮相对应//按钮aBtn[i].οnmοuseοver= function () {iNow=this.index; //是按钮所控制显示的图片与左右箭头控制显示的图片相对应tab();}//下一个箭头oNext.onclick = function () {iNow++;if (iNow==aImg.length)iNow=0;tab();}//上一个箭头oPrev.onclick = function () {iNow--;if (iNow==-1)iNow=aImg.length-1;tab();}}}
静态效果图：（不会截动态的）
