图片轮播

最新推荐文章于 2021-10-24 15:29:29 发布

aronphper

最新推荐文章于 2021-10-24 15:29:29 发布

阅读量231

点赞数

分类专栏： html+js 文章标签：图片轮播

本文链接：https://blog.csdn.net/user20173/article/details/69062764

版权

html+js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

aronphper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播

1.实现变量更改图片的src属性值：一个计时器2.实现鼠标离开鼠标放上图片时的图片停止和开始功能主要关键字：onmousover/onmousout3.实现图片底部的序号与图片链接，因为序号的下标是从0开始的所以图片的变量值需要-1；而且开始计时器是从2开始的，需要在执行定时器时首先增加一个它的对应需要的classname 实现class值得变换需要注意首先每次先全部清除4.实现序
复制链接

扫一扫

专栏目录