JavaScript基础——切换图片轮播

最新推荐文章于 2022-12-03 23:29:34 发布

我不抽烟zzm

最新推荐文章于 2022-12-03 23:29:34 发布

阅读量270

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_35052286/article/details/72861401

版权

 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
div{
border:1px solid red;
width:700px;
}
div ul{
float:right;
}
ul li{
list-style:none;
border:1px solid red;
width:20px;
height:20px;
margin-top:2px;
margin-right:35px;
text-align:center;
line-height:22px;
}
  </style>
   <script type="text/javascript">
  //页面加载完成之后让图片自动动起来。
window.οnlοad=init; //onload 事件会在页面或图像加载完成后立即发生(网页加载完成时，调用init)
var i=1;
var dingshiqi;
function init(){
var obj=document.getElementById("li1");
obj.style.background="orange";
                    //定时器,每秒钟触发image()函数
   dingshiqi=window.setInterval("image()",1000);  //setInterval() 方法会不停地调用函数
}
//让图片自动切换的函数。
function image(){
i++;
if(i>8){
i=1;
}
//获取img对象
var obj=document.getElementById("d1");
//修改img对象的src属性。
obj.src="image"+i+".jpg"
//再去修改li标签的背景颜色
ys(); 
var yanse=document.getElementById("li"+i);
yanse.style.background="orange";
}


//鼠标放到图片上停止自动切换的函数。
function stopimage(){
window.clearInterval(dingshiqi);
}
//鼠标离开让图片自动切换的函数。
function starimage(){
dingshiqi=window.setInterval("image()",1000);
}
//鼠标放在标签上显示对应图片的函数。
function tingTu(n,m){
i=n;
var obj=document.getElementById("d1");
obj.src="image"+n+".jpg"
//把所有li标签的背景颜色变成白色。
ys();
window.clearInterval(dingshiqi);
m.style.background="orange";
}
//鼠标离开li标签让图片继续自动切换。
function dongTu(){
dingshiqi=window.setInterval("image()",1000);
}
//清除所有标签的颜色(把所有的li标签的背景颜色变成白色)
function ys(){
for(var j=1;j<=8;j++){
var obj1=document.getElementById("li"+j);//li1=>obj1保存的就是id为li1的标签那个
obj1.style.background="white";//li2=>obj1保存的就是id为li2的标签对象
}
}
  </script>
 </head>
 <body>
 <div>
<img src="image1.jpg" height="400" width="600" 
  id="d1" οnmοuseοver="stopimage()" οnmοuseοut="starimage()">
  <ul>
<li id="li1"οnmοuseοver="tingTu(1,this)" οnmοuseοut="dongTu()">1</li>
<li id="li2"οnmοuseοver="tingTu(2,this)" οnmοuseοut="dongTu()">2</li>
<li id="li3"οnmοuseοver="tingTu(3,this)" οnmοuseοut="dongTu()">3</li>
<li id="li4"οnmοuseοver="tingTu(4,this)" οnmοuseοut="dongTu()">4</li>
<li id="li5"οnmοuseοver="tingTu(5,this)" οnmοuseοut="dongTu()">5</li>
<li id="li6"οnmοuseοver="tingTu(6,this)" οnmοuseοut="dongTu()">6</li>
<li id="li7"οnmοuseοver="tingTu(7,this)" οnmοuseοut="dongTu()">7</li>
<li id="li8"οnmοuseοver="tingTu(8,this)" οnmοuseοut="dongTu()">8</li>
  </ul>
  </div>
 </body>
</html>

我不抽烟zzm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——切换图片轮播

Document div{border:1px solid red;width:700px;}div ul{float:right;}ul li{list-style:none;border:1px solid red;width:20px;height:20px;margin-top:2px;margin-right:35px;t
复制链接

扫一扫