您的位置：首页 > Web前端 > JavaScript

Javascript图片轮播效果一秒换一个

2015-12-21 10:34 671 查看

/*增加一秒换一个的功能/运用定时器的用法。

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

body,div,ul,li,img{

margin: 0px;

padding: 0px;

}

#menu{

width: 496px;

margin: auto;

}

#head{

border: 1px solid blue;

}

#head img{

width: 100%;

height: 300px;

}

#footer li{

list-style-type: none;

float: left;

border: 1px solid red;

width: 60px;

text-align: center;

padding: 5px 0px;

}

</style>

</head>

<body>

<div id="menu">

<div id="head">

<img src="img/1.jpg">

</div>

<div id="footer">

<ul>

<li onmouseover="showPic(1)">1</li>

<li onmouseover="showPic(2)">2</li>

<li onmouseover="showPic(3)">3</li>

<li onmouseover="showPic(4)">4</li>

<li onmouseover="showPic(5)">5</li>

<li onmouseover="showPic(6)">6</li>

<li onmouseover="showPic(7)">7</li>

<li onmouseover="showPic(8)">8</li>

</ul>

</div>

</div>

<script type="text/javascript">

var img = document.getElementsByTagName('img')[0];

var li = document.getElementsByTagName('li');

function showPic(num){

img.src = 'img/'+num+'.jpg';

}

//图片轮播

var count =1;

function change(){

img.src = 'img/'+count+'.jpg';

for(var i = 0; i < 8; i++){

li[i].style.background='';

}

li[count-1].style.background='blue';

count++;

if(count==9){

count = 1;

}

}

//定义个定时器

var timer = setInterval("change()",1000);

//鼠标移入图片上，停止播放

img.onmouseover = function(){

clearInterval(timer);

}

//鼠标离开，继续播放

img.onmouseout = function(){

timer = setInterval("change()", 1000);

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航