效果图
HTML
<body> <div class="scroll"> <div id="num"> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">4</a> <a href="javascript:;">5</a> </div> <img src="img/伽罗.jpg" id="photo" width="800px" /> </div> </body>
CSS
* { margin: 0; padding: 0; } /* 让图片不要基于文字基线对齐 */ img { border: 0; vertical-align: middle; } a { text-decoration: none; color: #000000; } /** * 整体水平居中 * 相对定位：小圆点绝对定位需要 * 还要给盒子一个宽度 */ .scroll { position: relative; /* 宽度等于最大图片的宽度 */ width: 800px; margin: 50% auto; } #num { position: absolute; bottom: 10px; right: 15px; } #num a { overflow: hidden; display: inline-block; width: 20px; height: 20px; font-size: 0.75rem; /*12px*/ text-align: center; line-height: 20px; color: #ffffff; border: 1px solid #f5f5f5; border-radius: 50%; }
JQUERY
$(function() { setInterval("changeImg()", 1500); }); var index = 0; function changeImg() { var imgarr = [ 'img/伽罗.jpg', 'img/高渐离.jpg', 'img/公孙离.jpg', 'img/宫本武藏.jpg', 'img/干将莫邪.jpg' ]; var photo = $("#photo"); var a = $("#num a"); //清除未选中项的聚焦点背景色 a[index].style.backgroundColor = ""; // 根据余数改变图片索引 // 1 4 1 // 2 4 2 // 3 4 3 // 4 4 0 index = (index + 1) % imgarr.length; //将索引对应图片取出并赋值给img的src属性,替换当前图片（即要显示的下一张图片） photo.attr("src", imgarr[index]); //设置选中的聚焦点背景颜色 a[index].style.backgroundColor = "pink"; }
小结
1.后续将要完成点击小圆点跳转到相应图片
2.后续为轮播图添加上/下轮播图切换图标并实现