<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作图片轮显效果</title>
</head>
<style type="text/css">
img{border: 0px;}
.imgsBox{overflow: hidden; width: 282px; height: 176px;}
.imgs a{display: block; width: 282px; height: 164px;}
.clickButton{
background-color: #999999; width: 282px; height: 12px;
position: relative; top: -1px; _top: -5px;
}
.clickButton div{float: right;}
.clickButton a{
background-color: #666; border-left: #ccc 1px solid;
line-height: 12px; height: 12px; font-size: 10px;
float: left; padding: 0 7px;
text-decoration: none; color: #fff;
}
.clickButton a.active,.clickButton a:hover{background-color: #d34600;}
</style>
<body><script src="jquery-3.4.1.min.js"></script>
<script>
$(function(){
$(".clickButton a").attr("href","javascript:return false;");
$(".clickButton a").each(function(index){
$(this).click(function(){
changeImage(this,index);
});
});
autoChangeImage();
});
function autoChangeImage(){
for(var i=0;i<=10000;i++){
window.setTimeout("clickButton("+(i%5+1)+")",i*2000);
}
}
function clickButton(index){
$(".clickButton a:nth-child("+index+")").click();
}
function changeImage(element,index){
var arryImgs=["照片/1.jpg","照片/2.jpg","照片/3.jpg","照片/4.jpg","照片/5.jpg"];
$(".clickButton a").removeClass("active");
$(element).addClass("active");
$(".imgs img").attr("src",arryImgs[index]);
}
</script>
<div class="imgsBox">
<div class="imgs">
< a href=" ">< img id="pic" src="../img/1.PNG" width="282" height="164" /></ a>
</div>
<div class="clickButton">
<div>
<a class="active" href="">1</ a>
<a class="" href="">2</ a>
<a class="" href="">3</ a>
<a class="" href="">4</ a>
<a class="" href="">5</ a>
</div>
</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/sihuan/p/12091588.html