.clickButton a:hover{background-color: #d34600;} /style body
<!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="http://www.mamicode.com/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>
<div>
< a href=" ">< img src="" /></ a>
</div>
<div>
<div>
<a href="">1</ a>
<a href="">2</ a>
<a href="">3</ a>
<a href="">4</ a>
<a href="">5</ a>
</div>
</div>
</div>
</body>
</html>
ASP动态网页设计与Ajax技术----制作图片轮显效果
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33167.html
- 上一篇：这个一般也会加上
- 下一篇：webpack配置操练typescript的web项目
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")