html插入javascript,图片轮转

发布网友发布时间：2022-04-24 23:14

共2个回答

热心网友时间：2022-04-25 00:44

<html>
<head>
<title>图片循环显示</title>
<script language="javascript">
var n = 1;
function img1() {
if (n == 1) { myForm.imgflash.src = "image/flower.jpg"; }
if (n == 2) { myForm.imgflash.src = "image/flower2.jpg"; }
if (n == 3) { myForm.imgflash.src = "image/s1.jpg"; }
if (n == 4) {
myForm.imgflash.src = "image/s2.jpg";
n = 0;
}
n++;
}
window.setInterval("img1()", 3000);
</script>
</head>
<body>
<form name="myForm">
<img id="imgflash"/>
</form>
</body>
</html>追问是javascript的图片滑动切换

追答你的描述很简单，我不是很理解。

热心网友时间：2022-04-25 02:02

<html>
<head>
<title>ddddd</title>
<style type="text/css">
.frame{width:100px;height:100px;border:1px solid;position:absolute;overflow:hidden;}
#carrier{height:100px;position:absolute;width:770px;}
#carrier img{width:80px;height:80px;margin:10px;}
</style>
<script type="text/javascript">
var len = 780; //为document.getElementById('carrier').style.width;的高度
var imgW = 110; //每张图片所占宽度
var cartoon = false; //当前是否正在执行动画
var dt = null; //执行的动画方向
function slideImage() {
var obj = document.getElementById("carrier");
var px = obj.style.pixelLeft;
if(px < - len + imgW) {
px = 0;
}
if(px > 0) {
px = - len + imgW;
}
px -= (dt ? 1 : -1);
obj.style.left = px+"px";
if(px % imgW != 0) {
setTimeout('slideImage()',5);
}else{
cartoon = false;
}
}
function moveImage(direction) {
if(!cartoon) {
cartoon = true;
if(direction == 0) {
dt = true;
slideImage();
}else{
dt = false;
slideImage();
}
}
}
</script>
</head>
<body>
<a href="javascript:moveImage(0);">左移动</a>
<a href="javascript:moveImage(1);">右移动</a>
<div class="frame">
<div id="carrier" >
<img src="a.jpg" />
<img src="a.jpg" />
<img src="a.jpg" />
<img src="a.jpg" />
<img src="a.jpg" />
<img src="a.jpg" />
<img src="a.jpg" />
</div>
</div>
</body>
</html>
有的参数要自己设置，注意style样式不要忽略，基本上ok的，虽然整体形象不大好看，花了半个小时写的啊，呵呵