javascript实现的焦点图轮播效果详解

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现并不完善的焦点图轮播效果。

但是也实现了基本的功能,就当是我们对于一些知识的学习,总之一个完善的功能都是由零碎的小功能实现的。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
ul, li{
  list-style:none;
}
.mid{
  margin:0 auto;
}
.area{
  width:240px;
  height:270px;
  overflow:hidden;
  background:#999;
  margin-top:150px;
  position:relative;
}
#pic_list{
  position:relative;
}
#pic_list li{
  position:absolute;
  visibility:hidden;
}
#pic_list li.show{
  visibility:visible;
}
#pic_list li img{
  vertical-align:middle;
}
.button{
  width:240px;
  height:20px;
  line-height:20px;
  background:#ccc;
  position:absolute;
  bottom:0px;
}
#button{
  float:right;
}
#button li{
  float:left;
  width:20px;
  height:20px;
  text-align:center;
  margin:0 3px;
  font-family:"Arial";
  font-size:12px;
  color:#fff;
  background:#000;
}
#button li.current{
  background:#f00;
  cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
  <div id="imgbox">
    <ul id="pic_list">
      <li class="show" id="one"><img src="img/1.jpg" width="240" alt="one" /></li>
      <li id="two"><img src="img/2.jpg" width="240" alt="two" /></li>
      <li id="three"><img src="img/3.jpg" width="240" alt="three" /></li>
      <li id="four"><img src="img/4.jpg" width="240" alt="four"  /></li>
      <li id="five"><img src="img/5.jpg" width="240" alt="five" /></li>
    </ul>
  </div>
  <div class="button">
  <ul id="button">
    <li class="current" id="but_one">1</li>
    <li id="but_two">2</li>
    <li id="but_three">3</li>
    <li id="but_four">4</li>
    <li id="but_five">5</li>
  </ul>
</div>
</div>
<script type="text/javascript">
(function(){
  var imgbox = document.getElementById("imgbox");
  var pic_list = document.getElementById("pic_list");
  var pics = pic_list.getElementsByTagName("li");
  var button = document.getElementById("button").getElementsByTagName("li");
  var p;
  function autoplay(start){
    for(index=start;index<button.length;index++){
      (function(){
        var p=index;
        button[index].onmouseover=function change(){
          for(j=0;j<this.parentNode.childNodes.length;j++){
            this.parentNode.childNodes[j].className="";
          }
          this.className="current";
          for(m=0;m<pics.length;m++){
            pics[m].className="";
            if(m==p){
              pics[m].className="show";
            }
          }
        }
      })();
    }
  }
  autoplay(0);
})();
</script>
</body>
</html>

上面的代码实现了简单的轮播效果,但是不能够自己进行轮播,只能鼠标悬浮才能够实现切换。

好在我们就当做对知识的学习,对于实际应用的话此代码还需要完善,下面介绍一下它的实现过程。

一.代码注释:

(1).(function(){})(),一个匿名自执行函数。

(2).var imgbox = document.getElementById("imgbox"),获取id属性值为imgbox的元素对象。

(3).var pic_list = document.getElementById("pic_list"),获取id属性值为pic_list的元素对象。

(4).var pics = pic_list.getElementsByTagName("li"),获取pic_list下的li元素集合,也就是放置图片的地方。

(5).var button = document.getElementById("button").getElementsByTagName("li"),获取底部数字按钮集合。

(6).var p,声明一个变量用来存储当前数字按钮的索引。

(7).function autoplay(start){},此函数实现了各种轮播准备工作,比如事件处理函数的绑定,参数规定从哪个图开始轮播。

(8).for(index=start;index<button.length;index++){},遍历每一个数字按钮元素。

(9).(function(){})(),一个匿名自执行函数,使用这个方式实现了闭包效果,p存储的就是当前元素额索引。

(10).var p=index,把当前元素索引赋值给变量p。

(11).button[index].onmouseover=function change(){},为按钮注册onmouseover事件处理函数。

(12).for(j=0;j<this.parentNode.childNodes.length;j++){

  this.parentNode.childNodes[j].className="";

},遍历按钮元素,然后将按钮元素的class属性值清空。

(13).this.className="current",设置当前按钮的class属性值为current。

(14).for(m=0;m<pics.length;m++){

  pics[m].className="";

  if(m==p){

    pics[m].className="show";

  }

},遍历每一个存放图片的li元素,然后清空元素的class属性值。

然后设置对应的索引的图片li元素class属性值为show,这样图片就可以显示。

二.相关阅读:

(1).getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。

(2).onmouseover事件可以参阅javascript mouseover事件一章节。

(3).parentNode可以参阅parentNode一章节。

(4).className可以参阅js className一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容