html
<div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.jpg" width="500" height="200"/></li> <li><img src="images/2.jpg" width="500" height="200"/></li> <li><img src="images/3.jpg" width="500" height="200"/></li> <li><img src="images/4.jpg" width="500" height="200"/></li> <li><img src="images/5.jpg" width="500" height="200"/></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div></div> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style>js
<script> var times = null; //獲取全部對象 var box = document.getElementById("box"); var screen = box.children[0]; var ul = screen.children[0]; var ol = screen.children[1]; var ulLis = ul.children; var arr = document.getElementById("arr"); var left = document.getElementById("left"); var right = document.getElementById("right"); //獲取banner的寬度 var imgW = screen.offsetWidth; var imgIndex = 0; var seqare = 0; //在OL中生成對象 for (var i = 0; i < ulLis.length; i++) { //創建原點"li" var li = document.createElement("li"); //ol 添加全部li ol.appendChild(li); li.innerHTML = i + 1; } //獲取OL中全部的li var olLis = ol.children; olLis[0].className = "current"; //克隆第一章到最后 var fristImg = ulLis[0].cloneNode(true); ul.appendChild(fristImg); for (var i = 0; i < olLis.length; i++) { olLis[i].index = i; //注冊鼠標移動事件 olLis[i].onmouSEOver = function () { //注冊排他 for (var i = 0; i < olLis.length; i++) { olLis[i].removeAttribute("class"); } this.setAttribute("class", "current"); var target = -this.index * imgW; animate(ul, target); seqare = this.index; imgIndex = this.index; } } //顯示左右箭頭 box.onmouseover = function () { arr.style.display = "block"; clearInterval(times); }; box.onmouseout = function () { arr.style.display = "none"; times = setInterval(right.onclick,1000); }; right.onclick = function () { if (imgIndex == ulLis.length - 1) { ul.style.left = 0 + "px"; imgIndex = 0; } imgIndex++; var target = -imgIndex * imgW; animate(ul, target); if (seqare < olLis.length - 1) { seqare++; } else { seqare = 0; } for (var i = 0; i < olLis.length; i++) { olLis[i].removeAttribute("class"); } olLis[seqare].setAttribute("class", "current"); }; times = setInterval(right.onclick,1000); left.onclick = function () { if (imgIndex == 0) { ul.style.left = -(ulLis.length - 1) * imgW + "px"; imgIndex = ulLis.length - 1; } imgIndex--; var target = -imgIndex * imgW; animate(ul, target); if (seqare > 0) { seqare--; } else { seqare = olLis.length - 1; } for (var i = 0; i < olLis.length; i++) { olLis[i].removeAttribute("class"); } olLis[seqare].setAttribute("class", "current"); }; //運動動畫 function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var leader = obj.offsetLeft;//獲取當前位置 var step = 30; step = leader < target ? step : -step; if (Math.abs(leader - target) >= Math.abs(step)) { leader = leader + step; obj.style.left = leader + "px"; } else { obj.style.left = target + "px"; clearInterval(obj.timer); } }, 15); }</script>新聞熱點
疑難解答
