信鸽网

轻松实现javascript图片轮播特效

  作者：bea

本文实例介绍了javascript图片轮播特效的详细代码以及实现思路，分享给大家供大家参考，具体内容如下 还是先来看一看效果图： 具体代码： 一、HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a></li>

本文实例介绍了javascript图片轮播特效的详细代码以及实现思路，分享给大家供大家参考，具体内容如下


还是先来看一看效果图：



具体代码：


一、HTML代码分析 




<body> 

  <div class="dota"> 

    <ul id="content"> 

      <li><a href="#"><img src="images/1.jpg"/></a></li> 

      <li><a href="#"><img src="images/2.jpg"/></a></li> 

      <li><a href="#"><img src="images/3.jpg"/></a></li> 

      <li><a href="#"><img src="images/4.jpg"/></a></li> 

      <li><a href="#"><img src="images/5.jpg"/></a></li> 

    </ul> 

    <ul id="indicator"> 

      <li class="current"><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li> 

      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 

      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 

      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 

      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 

    </ul> 

  </div> 

</body>


此效果的层次结构比较清楚：
1. class为data的div是最外层的容器，可以用来控制整个效果图显示的位置。


2. id为content的ul用来存放左侧滚动的图片。


3. id为indicator的ul用来显示右侧的指示栏。


二、CSS代码 




*{margin: 0; padding: 0;} 

 

    img{ 

      border:0; 

    } 

 

    .dota{ 

      width:570px; 

      height: 230px; 

      margin:100px auto; 

      position: relative; 

      overflow: hidden; 

    } 

 

    .dota #content{ 

      float: left; 

      list-style: none; 

      position: absolute; 

      width:380px; 

      height:230px; 

    } 

    .dota #content img{ 

      width:380px; 

      height:230px;  

    } 

    .dota #indicator{ 

      float: right; 

      list-style: none; 

      width:180px; 

      height:220px; 

      padding: 5px; 

      background-color: #100F13; 

    } 

    .dota #indicator li{ 

      width: 180px; 

      height: 44px; 

      background: url(images/anniu.png) 0 -44px; 

    } 

 

    .dota #indicator li.current{ 

      background-position: 0 0; 

    } 

 

    .dota #indicator li a{ 

      display: block; 

      width: 160px; 

      height: 34px; 

      padding: 5px 0 5px 25px; 

    } 

 

    .dota #indicator li a:link , .dota #indicator li a:visited{ 

      text-decoration: none; 

      color: #686477; 

      font: 12px/145% "宋体"; 

    }


这里，我对indicator中li的代码进行说明：
.dota #indicator li中的css代码就是设置右侧指示栏中的每一项，注意到，这里使用了background属性，也就是说li的背景是一张图片。准备好的图片如下：



这张准备好的图片大小为 180 * 88， 而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分；所以indicator中所有的背景图片显示的是下半部分比较暗的部分； 而.dota #indicator li.current 的position属性大小为 0 0，所以默认情况下indicator的第一个显示高亮，其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 "谁" 身上来切换选中状态。



三、JQuery代码 




<script type="text/javascript"> 

 

    $(function(){ 

 

      var nowImage = 0; 

 

      /* 为定时动画服务 */ 

      $(".dota #content li").first().clone().appendTo($(".dota #content")); 

 

      var timer = setInterval(autoAnimate, 1500); 

 

      $(".dota").mouseenter(function(){ 

        clearInterval(timer); 

      }).mouseleave(function(){ 

        timer = setInterval(autoAnimate, 1500); 

      });; 

 

      $(".dota #indicator li").mouseenter(function(){ 

        $(this).addClass("current").siblings().removeClass("current"); 

        nowImage = $(this).index(); 

        /*stop() 可以立刻清楚以前的动画，防止动画叠加*/ 

        $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 

      }); 

 

      function autoAnimate(){ 

        if(nowImage == 4){ 

          nowImage = 0; 

           

          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 

          $(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){ 

            $(".dota #content").css("top",0); 

          }); 

        } 

        else{ 

          nowImage++; 

          $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 

          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 

          } 

      } 

 

    }); 

 

  </script>


以上就是轻松实现javascript图片轮播特效的详细代码，希望对大家的学习有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: