跪求js 图片切换轮播效果 代码 急,谢了!
发布网友
发布时间：2022-04-25 15:25
共2个回答
热心网友
时间：2022-04-23 14:27
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>转换</title>
<style type="text/css">
<!--
html,body{
height: 100%;
}
.numSpan {
margin-left: 5px;
background-color: #cc7cde;
display: inline-block;
width: 20px;
height: 20px;
line-height: 16px;
cursor: pointer;
text-align: center;
}
.numSpanChange {
margin-left: 5px;
background-color: #7ccced;
display: inline-block;
width: 20px;
height: 20px;
line-height: 16px;
cursor: pointer;
text-align: center;
}
#numDiv {
/*border:solid 1px red;*/
margin-right: 3px;
text-align :right;
z-index:10;
/*position:absolute;
top:88px;
*/
position:relative;
top:-20px;
width:100%;
height: 18px;
/*滤镜效果 */
/*IE*/
filter: Alpha(opacity=60);
/*for ff*/
opacity: 0.6;
}
-->
</style>
<script type="text/javascript">
var imgCount = 3;
function changeImg(imgIndex) {
clickChangeImg(imgIndex);
//3秒换
setTimeout("changeImg()", 3000);
}
function clickChangeImg(imgIndex) {
var temObj = document.getElementById("testId");
var spans = document.getElementById("numDiv").childNodes;
var nextIndex;
if (imgIndex) {
nextIndex = imgIndex;
} else {
var temArr = temObj.src.split("/");
if (temArr.length >= 2) {
var srcStr = temArr[temArr.length - 1];
var idStr = srcStr.match("\\d+");
if (parseInt(idStr) < imgCount) {
nextIndex = parseInt(idStr) + 1;
} else {
nextIndex = 1;
}
}
}
for ( var i = 1; i < imgCount + 1; i++) {
if (nextIndex != i) {
spans[i].className = "numSpan";
} else {
spans[i].className = "numSpanChange";
}
}
temObj.src = "./imgs/img" + nextIndex + ".jpg";
}
</script>
</head>
<body onload="changeImg()">
<div style="width: 500px; height: 300px ; z-index: 1;">
<div id="imgDiv" style="width: 300px; height: 200px ; z-index: 1;" ><img
id="testId" alt="" src="./imgs/img1.jpg" width="100%" height="100%" />
<div id="numDiv"><script>
for ( var i = 1; i < imgCount + 1; i++) {
document.write("<span class='numSpan' onclick=clickChangeImg(" + i + ")>" + i + "</span>");
}
</script>
</div>
</div>
<button onclick="clickChangeImg();">测试</button>
</div>
</body>
</html>
和a同级目录下 建立imgs文件夹，文件夹里面有imgCount (代码中为3) 张jpg格式图片，图片名称以img+i.jpg形式命名 如： img1.jpg。 直接运行即可
热心网友
时间：2022-04-23 15:45
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?5=f&id=10895
