html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/carousel.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrap"> <ul id="banner"> <li><img src="images/one.jpg"></li> <li><img src="images/two.jpg"></li> <li><img src="images/three.jpg"></li> <li><img src="images/four.jpg"></li> <li><img src="images/five.jpg"></li> <li><img src="images/six.jpg"></li> </ul> <ol id="number"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> </div> </body> <script src="js/carousel.js"></script> </html> css： *{ margin: 0; padding: 0; list-style: none; } #wrap{ position: relative; width: 80%; height: 300px; overflow: hidden; margin: 0 auto; cursor: pointer; } #wrap ul{ position: absolute; width: 100%; } #wrap ul li img{ width: 100%; height: 300px; } #wrap ol{ position: absolute; margin: 250px 50px; } #wrap ol li{ float: left; margin-left: 5px; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #ccc; color: #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; cursor: pointer; } #wrap ol li.on, #wrap ol li:hover{ background: #d4660f; color: #fff; } js： window.onload = function () { var wrap = document.getElementById('wrap'); var banners = document.getElementById('banner').getElementsByTagName('li'); var numbers = document.getElementById('number').getElementsByTagName('li'); var timer = null; var index = 0; // 调用自动播放函数，每两秒执行一次 timer = setInterval(autoPlay, 2000); // 鼠标滑过图片时停止轮播 wrap.onmouseover = function(){ clearInterval(timer); }; // 鼠标离开图片时继续轮播 wrap.onmouseout = function(){ timer = setInterval(autoPlay, 2000) }; // 遍历所有数字点击时切换到对应的图片 for(var i = 0; i < numbers.length; i++){ numbers[i].onclick = function(){ clearInterval(timer); index = this.innerText - 1; changeBanner(index); } } // 自动轮播 function autoPlay(){ index ++; if(index >= banners.length){ index = 0; } changeBanner(index) } // 定义图片切换 function changeBanner(curIndex){ for(var i = 0; i < banners.length; i++){ banners[i].style.display = 'none'; numbers[i].className = ''; } banners[curIndex].style.display = 'block'; numbers[curIndex].className = 'on'; } };