轻松实现javascript图片轮播特效

2019-11-20 10:48:41

字体：大中小

来源：转载

供稿：网友

本文实例介绍了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图片轮播特效的详细代码，希望对大家的学习有所帮助。

上一篇：Easyui form combobox省市区三级联动

下一篇：简单的JS时钟实例讲解