简单的HTML+js图片轮播?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tab { overflow:hidden; width:400px; height:250px; position:relative; float:left;}
#tab>img:not(:first-child){ display:none; }
</style>
<script>
window.onload = function(){
var images = document.getElementsByTagName('img');
var pos = 0;
var len = images.length;
setInterval(function(){
images[pos].style.display = 'none';
pos = ++pos == len ? 0 : pos;
images[pos].style.display = 'inline';
},1000);
};
</script>
</head>
<body>
<div id="tab">
<img src="img/01.jpg" width="400" height="250"/>
<img src="img/02.jpg" width="400" height="250"/>
<img src="img/03.jpg" width="400" height="250"/>
</div>
</body>
</html>
如何用onmouseover和onmouseout(鼠标移入div播放滚动图,移出的时候就停止播放)来控制是否自动播放呢？,具体怎么写...谢谢 展开
h5代码：
<div id=“wrap”><ul id=“list”><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</ul></div>
css代码：
<style type="text/css">@-webkit-keyframes move{0%{left:-500px;}100%{left:0;}}#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;overflow:
hidden;}#list{position:absolute;left:0;top:0;padding:0;margin:0;-webkit-animation:5s move infinite linear;width:200%;}#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}#wrap:hover #list{-webkit-animation-play-state:paused;}</style>
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。
参考资料来源：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tab {
overflow: hidden;
width: 400px;
height: 250px;
position: relative;
float: left;
}
#tab>img:not(:first-child) {
display: none;
}
</style>
<script>
var interval;
var pos = 0;
window.onload = function() {
var images = document.getElementsByTagName('img');
var tab = document.getElementById("tab");
tab.onmouseover = function() {
clearInterval(interval);
}
tab.onmouseout = function() {
run(images);
}
run(images);
}
var run = function(images) {
interval = setInterval(function() {
images[pos].style.display = 'none';
pos = ++pos == images.length ? 0 : pos;
images[pos].style.display = 'inline';
}, 1000);
}
</script>
</head>
<body>
<div id="tab">
<img src="img/01.jpg" width="400" height="250" />
<img src="img/02.jpg" width="400" height="250" />
<img src="img/03.jpg" width="400" height="250" />
</div>
</body>
</html>
你好，我刚刚试了一下您的修正过的代码后发现了个问题，我鼠标没移动到DIV内图片也在播放呢，将鼠标移动进DIV后图片就停止了。可以修改成鼠标不在DIV内就不播放图片吗？
var interval;
var pos = 0;
window.onload = function() {
var images = document.getElementsByTagName('img');
var tab = document.getElementById("tab");
tab.onmouseover = function() {
run(images);
}
tab.onmouseout = function() {
clearInterval(interval);
}
}
var run = function(images) {
interval = setInterval(function() {
images[pos].style.display = 'none';
pos = ++pos == images.length ? 0 : pos;
images[pos].style.display = 'inline';
}, 1000);
}
是我看反了你的需求
var is_over = 0;
window.onload = function(){
var images = document.getElementsByTagName('img');
var tab = document.getElementsById('tab');
tab.onmouseover = function(){
is_over = 1;
}
tab.onmouseout = function(){
is_over = 0;
}
var pos = 0;
var len = images.length;
setInterval(function(){
if( !is_over){
images[pos].style.display = 'none';
pos = ++pos == len ? 0 : pos;
images[pos].style.display = 'inline';
}
},1000);
};
我将代码替换掉结果无法播放图片了呢
