<!-- 思路:
1.实现变量更改图片的src属性值：一个计时器
2.实现鼠标离开 鼠标放上图片时的图片停止和开始功能 主要关键字：onmousover/onmousout
3.实现图片底部的序号与图片链接，因为序号的下标是从0开始的所以图片的变量值需要-1；而且开始计时器是从2开始的，需要在执行定时器时首先增加一个它的对应需要的classname 实现class值得变换需要注意首先每次先全部清除
4.实现序号鼠标经过或者鼠标离开图片的对应显示：如果实现鼠标经过改变图片，需要停止定时器，并传参数，进行图片src值得更改，鼠标离开就直接开启计时器就行
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:500px;
height: 180px;
margin: 300px auto 1px;
border: 1px solid red;
}
ul li{
display:inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
border: 1px solid blue;
}
.box1{
margin: 20px auto;
width: 200px;
height: 20px;
}
.li{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<img src="./image/dd_scroll_1.jpg" alt="" οnmοuseοver="stop()" οnmοuseοut="starts()">
</div>
<div>
<ul class="box1">
<li οnmοuseοver="stop1(1)" οnmοuseοut="starts()">1</li>
<li οnmοuseοver="stop1(2)" οnmοuseοut="starts()">2</li>
<li οnmοuseοver="stop1(3)" οnmοuseοut="starts()">3</li>
<li οnmοuseοver="stop1(4)" οnmοuseοut="starts()">4</li>
<li οnmοuseοver="stop1(5)" οnmοuseοut="starts()">5</li>
<li οnmοuseοver="stop1(6)" οnmοuseοut="starts()">6</li>
</ul>
</div>
<script type="text/javascript">
/*获取到img标签对象*/
/*获取到li标签对象*/
var img_object=document.getElementsByTagName("img")[0];
var li_object=document.getElementsByTagName("li");
/*开启一个定时器*/
li_object[0].className="li";
var start=2;
var stops=setInterval("img_huan()", 1000); /*调用计时器的时候 代码块需要加引号*/
function img_huan(){ /*实现变量的更新来改变图片的路径*/
img_object.src="./image/dd_scroll_"+start+".jpg";
for(var i=0;i<li_object.length;i++){
li_object[i].className="";
}
li_object[start-1].className="li";
start++;
if(start==7){
start=1
}
}
function stop(){ /*鼠标放上的时候停止计时器*/
clearInterval(stops);
}
function starts(){ /*鼠标离开的时候又开启定时器 两个定时器的返回值都用变量stops保存 实现鼠标放上时清除两个计时器*/
stops=setInterval("img_huan()", 1000);
}
function stop1(s){
clearInterval(stops);
for(var i=0;i<li_object.length;i++){
li_object[i].className="";
}
img_object.src="./image/dd_scroll_"+s+".jpg";
li_object[s-1].className="li";
}
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-6772.html
