<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{width: 50px; height: 600px;}
li{list-style: none;width: 40px; height: 40px; background-color:bisque; margin-top: 18px; margin-left: 5px;font-size: 12px;line-height: 40px;text-align: center;}
.div{width: 500px; height: 600px; border: 1px solid red; position:relative;}
#div_one{width: 400px; height:550px; border: 1px solid blue; position: absolute; top: 22px; left: 50px;}
#ul_two{position: absolute;top:0px;right: 0px;}
img{width: 400px; height:550px;}
</style>
<script>
window.onload = function(){
var div = document.getElementById("div");
var ali = div.getElementsByTagName('li')
var img = document.getElementById("img");
var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/10.jpg','img/11.jpg','img/12.jpg','img/13.jpg','img/14.jpg','img/15.jpg','img/16.jpg','img/17.jpg','img/18.jpg','img/19.jpg','img/20.jpg']
var num = 0;
var timer = null;
//图片轮播
function fn2(){
timer = setInterval(function(){
num++;
num%=ali.length;
for(var i=0;i<ali.length;i++){
img.src = arr[num%=ali.length];
ali[i].style.backgroundColor = 'bisque';
ali[num].style.backgroundColor = 'orange';
}
},500);
}
fn2();
//鼠标聚焦时显示该图片
function fn1(){
for(var i=0; i<ali.length;i++){
ali[i].index = i ;
ali[i].onmousemove = function(){
//取消轮播
clearInterval(timer);
img.src = arr[this.index];
for(var i=0;i<ali.length;i++){
ali[i].style.backgroundColor = 'bisque';
}
this.style.backgroundColor = 'orange';
}
ali[i].onmouseout = function(){
fn2();
this.style.backgroundColor = 'bisque';
}
}
}
img.onmousemove = function(){
fn1();
}
}
</script>
</head>
<body>
<div class="div" id="div">
<ul id="ul_one">
<li>美女1</li>
<li>美女2</li>
<li>美女3</li>
<li>美女4</li>
<li>美女5</li>
<li>美女6</li>
<li>美女7</li>
<li>美女8</li>
<li>美女9</li>
<li>美女10</li>
</ul>
<div id="div_one"><img id="img" src="img/1.jpg" /></div>
<ul id="ul_two">
<li>美女11</li>
<li>美女12</li>
<li>美女13</li>
<li>美女14</li>
<li>美女15</li>
<li>美女16</li>
<li>美女17</li>
<li>美女18</li>
<li>美女19</li>
<li>美女20</li>
</ul>
</div>
</body>
</html>
JS实例-图片轮播
最新推荐文章于 2022-11-05 16:33:29 发布