javascript图片轮播代码的一点解析

最新推荐文章于 2024-06-16 11:17:26 发布

0XIX0

最新推荐文章于 2024-06-16 11:17:26 发布

阅读量3.3k

点赞数

分类专栏：网站文章标签： javascript

本文链接：https://blog.csdn.net/ddzr972435946/article/details/79263884

版权

网站专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天使用了这个网页的代码。把这些代码直接贴在一个空记事本里是可以的，但在转移到自己的网页中出了点问题，用一下午的时间解决，积累了些经验。原网页代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>JS幻灯代码</title> 
 <script type="text/javascript"> 
  window.onload = function () { 
   flag = 0; 
   obj1 = document.getElementById("slider"); 
   obj2 = document.getElementsByTagName("li"); 
   obj2[0].style.backgroundColor = "#666666";
   //默认被选中颜色 
   time = setInterval("turn();", 5000); 
   obj1.onmouseover = function () { 
    clearInterval(time); 
   } 
   obj1.onmouseout = function () { 
    time = setInterval("turn();", 6000); 
   } 
  
   for (var num = 0; num < obj2.length; num++) { 
    obj2[num].onmouseover = function () { 
     turn(this.innerHTML); 
     clearInterval(time); 
    } 
    obj2[num].onmouseout = function () { 
     time = setInterval("turn();", 6000); 
    } 
   } 
   //延迟加载图片，演示的时候，使用本地图片
   //上线后请改为二级域名提供的图片地址 
   document.getElementById("second").src = "images/2.png";
   //使用图片宽660，高550 
   document.getElementById("third").src = "images/3.png"; 
   document.getElementById("four").src = "images/4.png"; 
  } 
  function turn(value) { 
   if (value != null) { 
    flag = value - 2; 
   } 
   if (flag < obj2.length - 1) 
    flag++; 
   else
    flag = 0; 
   obj1.style.top = flag * (-550) + "px"; 
   for (var j = 0; j < obj2.length; j++) { 
    obj2[j].style.backgroundColor = "#ffffff"; 
   } 
   obj2[flag].style.backgroundColor = "#666666"; 
  } 
 </script> 
 <style type="text/css">
  #wrap 
  { 
   height: 550px; 
   width: 660px; 
   overflow: hidden; 
   position: relative; 
   overflow: hidden; 
  }
  #wrap ul 
  { 
   list-style: none; 
   position: absolute; 
   top: 500px; 
   left: 450px; 
  }
  #wrap li 
  { 
   margin-left:2px; 
   opacity: .3; 
   filter: alpha(opacity=30); 
   text-align: center; 
   line-height: 30px; 
   font-size: 20px; 
   height: 30px; 
   width: 30px; 
   background-color: #fff; 
   float: left; 
   border-radius:3px; 
   cursor:pointer; 
  }
  #slider 
  { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
  }
  #slider img 
  { 
   float: left; 
   border: none; 
  } 
 </style> 
</head> 
<body> 
 <div id="wrap"> 
  <div id="slider"> 
   <a target="_blank" href="#"><img src="images/1.png" /></a> 
   <a target="_blank" href="#"><img id="second" /></a> 
   <a target="_blank" href="#"><img id="third" /></a> 
   <a target="_blank" href="#"><img id="four" /></a> 
  </div> 
  <ul> 
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
  </ul> 
 </div> 
</body> 
</html>

是一个轮播图片的js代码。我在应用到自己的网页时，把obj2.length换成了var Ilength=4;结果turn()函数执行不正常。后来发现，Ilength在turn()中没有定义。需要改为Ilength=4;这样Ilength就是全局变量。代码中的flag也是全局变量。

另一个需要注意的是23行turn(this.innerHTML); 不能改为turn(num);因为turn()在执行时，num已经是4了，onmouseover的时候只是注册，并没有执行。

在解决问题的时候，我都是在怀疑有问题的代码前后加上alert()，这也算是调试了吧。分享给大家。

flag与value比较大小的问题，我最开始怀疑会有问题，后来发现javascript作为动态语言还是很智能的，可以放心使用。

0XIX0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript图片轮播代码的一点解析

今天使用了这个网页的代码。把这些代码直接贴在一个空记事本里是可以的，但在转移到自己的网页中出了点问题，用一下午的时间解决，积累了些经验。原网页代码如下： JS幻灯代码 window.onload = function () { flag = 0; obj1 = document.getElementById("slider"); obj2 =
复制链接

扫一扫

专栏目录