HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carousel</title> </head> <body> <div class="container"> <div id="list" style="left:-500px;"> <img src="../image5" alt="5"> <img src="../image1" alt="1"> <img src="../image2" alt="2"> <img src="../image3" alt="3"> <img src="../image4" alt="4"> <img src="../image5" alt="5"> <img src="../image1" alt="1"> </div> <div id="submit"> <a href="javascript:;" id="prev">>></a> <a href="javascript:;" id="next"><<</a> </div> <!-- 指示圆点 --> <div id="button"> <div class="on"></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>CSS代码：
*{margin:0px; padding:0px;} #container{height:330px; width:500px; position:relative; overflow:hidden; border:3px solid #ccc; margin:0 auto;} #list{width:3500px; height:310px; position:absolute;} #list img{height:310px; width:500px; float:right;} #submit{position:absolute; top:150px; width:500px; color:red; z-index:999} #submit a{font-size:25px; font-weight:800; color:#ccc; opacity:0.3; text-decoration:none;} #container:hover a{opacity:0.8;} #next{float:right;} #button{position:absolute; top:315px; left:220px;} #button div{height:10px; width:10px; border-radius:50%; border:1px solid #ccc; float:left;} #button .on{background-color:yellow;}JavaScript代码：
window.onload = function () { var container = document.getElementById('container'); var list = document.getElementById('list'); var buttons = document.getElementById('button').getElementsByTagName('div'); var index = 1; var next = document.getElementById('next'); var prev = document.getElementById('prev'); // 指示圆点 function showTab () { for (var i = 0; i < buttons.length; i ++) { if (buttons[i].className = 'on') { buttons[i].className = ''; } buttons[index - 1].className = 'on'; } } // 定义动画方法 function animate (offset) { var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if (newLeft > -500) { list.style.left = -2500 + 'px'; } if (newLeft < -2500) { list.style.left = -500 + 'px'; } } // 下一页点击 next.onclick = function () { // if (index == 5) // { // index = 1; // } else { // index +=1; // } // 这里可以用到三元运算符 index==5?index=1 : index+=1; showTab(); animate(-500); } prev.onclick = function () { index==1?index=5 : index-=1; showTab(); animate(+500); } }
转载于:https://www.cnblogs.com/phpcurd/p/8473915.html
相关资源：利用js实现轮播图效果的小例子