代码如下：
<!DOCTYPE html><html><head> <title>轮播图制作</title> <style type="text/css"> .imgContainer { width: 1000px; height: 400px; border: 1px solid #ccc; margin: 0 auto; } .imgContainer .imgs img { width: 1000px; height: 400px; } .imgContainer .imgsBtn { width: 112px; height: 32px; margin: 0 auto; position: relative; top: -38px; text-align: center; z-index: 5; } .imgContainer .imgsBtn span { display: block; float: left; width:20px; height: 20px; line-height: 20px; font-size: 13px; margin: 3px; border-radius: 50%; } .imgsBtnOne { background-color: #ccc; color: #222; opacity: 0.8; } .imgsBtnTwo { background-color: red; color: #fff; opacity: 0.8; } .imgContainer .imgsBtn span:hover { cursor: pointer; } </style> <script type="text/Javascript"> var count = 1; //图片起始序号 var speed = 3000;//图片轮播速度 var ti = window.setInterval(changeImg,speed);//调用函数，使图片实现轮播 var spans; //包含数字的span var imgs; //包含图片的div var img; //图片标签 window.Onload= function() { init(); //获取包含数字的span，进行初始化 clickJumpImg(); } //初始化 function init() { imgs = document.getElementById("carouselImg"); //获取图片所在的div img = imgs.firstElementChild; //获取图片标签 //获取包含数字的span的集合 spans = document.getElementById("spans").getElementsByTagName("span"); } //切换图片和数字样式 function changeImg() { img.src = "img/" + count + "a.jpg"; //设置图片路径 //使数字改变样式 for (var i = 0; i < spans.length; i++) { //第i个span对应第i+1张图片 //因为图片数字是从1开始，二span集合的下标从0开始 if (spans[i].innerHTML == count) { spans[i].className = "imgsBtnTwo"; }else { spans[i].className = "imgsBtnOne"; } } count++; if (count>4) { //到最后一张图片后，设置下一张图片为第一张 count = 1; } } //鼠标移入数字时，切换到对应图片 function clickJumpImg() { for (var i = 0; i < spans.length; i++) { spans[i].Onclick= function() { count = this.innerHTML; //设置显示图片后，立即执行一次changeImg()函数，否则图片会延迟speed秒才出现 changeImg(); } } } </script></head><body> <div class="imgContainer"> <div id="carouselImg" class="imgs"> <img src="img/1a.jpg"> </div> <div id="spans" class="imgsBtn"> <span class="imgsBtnTwo">1</span> <span class="imgsBtnOne">2</span> <span class="imgsBtnOne">3</span> <span class="imgsBtnOne">4</span> </div> </div></body></html>效果如下：
