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

html+js写的图片轮寻

2016-12-07 20:17 399 查看

效果图

<!DOCTYPE html>
<html onclick="star(event)">
<head>
<meta charset="utf-8">
<style type="text/css">
div{
border:1px solid red;
width:600px;
}
div ul{
float:right;
}
ul li{
list-style: none;
border:1px solid red;
padding: 5px;
margin-right: 40px;
}
</style>
<script type="text/javascript">
var timeout=setInterval("change()",1000);
var index=2;

function change(){
var obj=document.getElementById("image");
if (index>6) {
index=1;
}
obj.src="images/h00"+index+".jpg";

var lii=document.getElementById("li"+index);
changecolor();
lii.style.background="red";
index++;
}

function changecolor(){
for (var i = 1; i <=6; i++) {
var abc=document.getElementById("li"+i);
abc.style.background="white";
}
}
function stoping(){
clearInterval(timeout);
}
function starting(){
timeout=setInterval("change()",1000);
}
function showpage(num){
var indexli=num.innerHTML;
changecolor();
num.style.background="red";
var obj=document.getElementById("image");
obj.src="images/h00"+indexli+".jpg";

stoping();
}
function outpage(num){
var indexli=num.innerHTML;
// num.style.background="white";
index=indexli;
starting();
}
</script>
</head>
<body >
<div>
<img src="images/h001.jpg" id="image" onmouseover="stoping()" onmouseout="starting()">
<ul id="ull">
<li id="li1" onmouseover="showpage(this)" onmouseout="outpage(this)" style="background:red">1</li>
<li id="li2" onmouseover="showpage(this)" onmouseout="outpage(this)">2</li>
<li id="li3" onmouseover="showpage(this)" onmouseout="outpage(this)">3</li>
<li id="li4"onmouseover="showpage(this)" onmouseout="outpage(this)">4</li>
<li id="li5"onmouseover="showpage(this)" onmouseout="outpage(this)">5</li>
<li id="li6"onmouseover="showpage(this)" onmouseout="outpage(this)">6</li>
</ul>
</div>
</body>
</html>

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

标签： html javascript 图片轮播

相关文章推荐

新的分享

章节导航