实现原理 将点击的a标签的href属性值赋给img标签的src属性，这样有个好处，就是如果浏览器不支持js的话，点击a标签也可跳转到图片地址看到图片，不会影响内容的呈现
注：需要导入jquery库
html代码
<div class="banner"> <img src="1.png"> <ul> <li><a href="1.png">1</a></li> <li><a href="2.png">2</a></li> <li><a href="3.png">3</a></li> <li><a href="4.png">4</a></li> </ul> </div> css代码 /* 先取消默认样式 */ a { text-decoration: none; } ul { list-style-type: none; } ul, li { padding: 0; margin: 0; } .banner li { float: left; } .banner img { width: 600px; height: 400px; } /* relative和absolute用于控制切换按钮位置 */ .banner { position: relative; width: 600px; height: 400px; margin: auto; } .banner ul { position: absolute; right: 10px; bottom: 10px; } .banner ul li {margin-left: 5px;} .banner ul li a { display: inline-block; width: 20px; height: 20px; background-color: #8c8c8c; text-align: center; border-radius: 50%; /* 让按钮变圆形 */ color: #FFF } js代码导入jquery库
<script src="jquery.js"></script> $(document).ready(function(){ // 在一开始绑定a的点击切换轮播图事件 $(".banner>ul>li>a").click(function(){ banner(this); return false; }); bannerRoll(); }); // 用a标签按钮切换轮播图 function banner(obj) { // obj 当前标签 var img = $(obj).parent().parent().prev(); $(img).attr("src", $(obj).attr("href")); } var t; // 用于标识定时器 function bannerRoll() { t = setInterval(showPic, 3000); // 设置每三秒调用换图函数换张图 } var x = 0; // 全局变量，记录当前第几张轮播图 function showPic() { // 获取a父标签li的个数，轮流播放 var arr_uls = $(".banner>ul"); arr_uls.each(function() { // 遍历ul标签，给它的img换张图 if (x >= $(this).children().length) x = 0; $(this).prev("img").attr("src", arr_uls.children("li").eq(x).children("a").attr("href")); }); x++; } //鼠标经过盒子时，清除定时 $(".banner").mouseenter( function(){ clearInterval(t); }).mouseleave( function(){ //鼠标离开盒子时，再次定时 bannerRoll(); });