图片动态切换

最新推荐文章于 2020-08-31 17:27:39 发布

zhanghuimin_123

最新推荐文章于 2020-08-31 17:27:39 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/zhanghuimin_123/article/details/8629216

版权

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin:0;border:0}
#div1{width:300px;height:300px;background:#FF00FF;margin:auto}
#div2{height:250px;background:#9900FF}
#div2 img{width:290px;height:240px;float:right;margin-right:5px;margin-top:5px;}
#div3{width:240px;background:#33FFFF;margin:auto}
#div3 li{list-style:none;float:left;width:25px;height:30px;text-align:center;line-height:30px;margin-right:5px;border:1px solid orange}
#div3 ul{width:250;margin:atuo;margin-top:5px;}

</style>
<script>
  //先定义一个计数器，统计图片
  var count = 1;
  //周期函数的返回值
  var interval = '';
  function changePic(){
   var myimg = document.getElementById("show");
   if(count == 7){
    count = 0;
   }
   var k = ++count;
   myimg.src = k+".jpg";
   //图片修改后，序号背景色也要发生变化
   //先将所有的序号颜色恢复
   for(var i=1;i<=7;i++){
    document.getElementById("num"+i).style.backgroundColor = '';
   }
   //将当前序号设置背景色
   document.getElementById("num"+k).style.backgroundColor = "yellow";
  }

//间歇性函数实现图片周期变换
function start_chan(){

   interval = setInterval("changePic()",1000);
  }
  //停止周期函数
  function stop_chan(){
   clearInterval(interval);
  }
  function choosePic(n){
   stop_chan();
   document.getElementById("show").src = n+".jpg";
   for(var i=1;i<=7;i++){
    document.getElementById("num"+i).style.backgroundColor = '';
   }
   document.getElementById("num"+n).style.backgroundColor = "yellow";
   count = n;
  }
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<img src="1.jpg" id="show" οnmοuseοver="stop_chan()" οnmοuseοut="start_chan()" />
</div>
<div id="div3">
<ul>
  <li id="num1" οnmοuseοver="choosePic(1)" οnmοuseοut="start_chan()">1</li>
  <li id="num2" οnmοuseοver="choosePic(2)" οnmοuseοut="start_chan()">2</li>
  <li id="num3" οnmοuseοver="choosePic(3)" οnmοuseοut="start_chan()">3</li>
  <li id="num4" οnmοuseοver="choosePic(4)" οnmοuseοut="start_chan()">4</li>
  <li id="num5" οnmοuseοver="choosePic(5)" οnmοuseοut="start_chan()">5</li>
  <li id="num6" οnmοuseοver="choosePic(6)" οnmοuseοut="start_chan()">6</li>
  <li id="num7" οnmοuseοver="choosePic(7)" οnmοuseοut="start_chan()">7</li>
  </ul>

</div>
</div>
</body>

</html>

zhanghuimin_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片动态切换

*{padding:0;margin:0;border:0}#div1{width:300px;height:300px;background:#FF00FF;margin:auto}#div2{height:250px;background:#9900FF}#div2 img{width:290px;height:240px;float:right;margin-right:5px;
复制链接

扫一扫