一款类似跑跑卡丁车官方网漂亮的banner焦点图效果

最新推荐文章于 2021-08-04 19:28:15 发布

kissty820

最新推荐文章于 2021-08-04 19:28:15 发布

阅读量1k

点赞数

分类专栏： jQuery css3 js经验库

jQuery 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

js经验库

1 篇文章 0 订阅

订阅专栏

该源码从跑跑卡丁车官方移植过来，采用jquery进行图片轮换动画，效果比较漂亮，大家可以据此来应用到实际网站项目当中去。演示效果图如下所示：

1.主界面html代码：

[html]view plaincopyprint? 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>banner焦点图效果</title>  
 <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css">  
 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>  
 <script type="text/javascript" src="js/package.js"></script>  
 <script type="text/javascript" src="js/indextest.js"></script>  
 </head>  
 <body>  
 <div class="mainSlider">  
   <ul class="spotlight">  
     <li style="display:list-item;"> <img src="images/karblt0214sy01.jpg" border="0" style="cursor:pointer;"></li>  
     <li style="display: none;"> <img src="images/karbln0214sy02.jpg" border="0" style="cursor:pointer;"></li>  
     <li style="display: none;"> <img src="images/karsay0214sy03.jpg" border="0" style="cursor:pointer;"></li>  
     <li style="display: none;"> <img src="images/karthr0207sy01.jpg" border="0" style="cursor:pointer;"></li>  
     <li style="display: none;"> <img src="images/karlzs0207sy02.jpg" border="0" style="cursor:pointer;"></li>  
     <li style="display:none;"> <img src="images/kartho0207sy03.jpg" border="0" style="cursor:pointer;"></li>  
     <li style="display: none;"> <img src="images/karlojsy08.jpg" border="0" style="cursor:pointer;"></li>  
   </ul>  
   <!--*******************************SY01-SY08右侧广告轮播*******************************-->  
   <ul class="spotlightBanner">  
     <li class="selected">  
       <dl>  
         <dt><img src="images/karblt0214dt01.jpg"></dt>  
         <dd>情人节情书半价</dd>  
         <dd>快和心爱的人表白</dd>  
       </dl>  
     </li>  
     <li class="">  
       <dl>  
         <dt><img src="images/karbln0214dt02.jpg"></dt>  
         <dd>暗+黑色爱情钥匙</dd>  
         <dd>粉红蛇HT表爱意</dd>  
       </dl>  
     </li>  
     <li class="">  
       <dl>  
         <dt><img src="images/karsay0214dt03.jpg"></dt>  
         <dd>皮蛋和黑妞</dd>  
         <dd>不可说的秘密2</dd>  
       </dl>  
     </li>  
     <li class="">  
       <dl>  
         <dt><img src="images/karthr0207dt01.jpg"></dt>  
         <dd>黄色幸运手套</dd>  
         <dd>三倍幸运买一赠一</dd>  
       </dl>  
     </li>  
     <li class="">  
       <dl>  
         <dt><img src="images/karlzs0207dt02.jpg"></dt>  
         <dd>新春活动不停歇</dd>  
         <dd>毒蛇徽章来相迎</dd>  
       </dl>  
     </li>  
     <li class="">  
       <dl>  
         <dt><img src="images/kartho0207dt03.jpg" /></dt>  
         <dd>超凡尊享礼包</dd>  
         <dd>无限制控的春天</dd>  
       </dl>  
     </li>  
     <li class="">  
       <dl>  
         <dt><img src="images/karlojdt08.jpg"></dt>  
         <dd>罗技购物送惊喜</dd>  
         <dd>跑跑好礼等你赢</dd>  
       </dl>  
     </li>  
   </ul>  
   <!--******右侧广告轮播*小按钮*******-->  
   <div class="scrollbar">  
     <div class="arrowButton"> <a href="" class="arrowUp"></a> <a href="" class="arrowDown"></a></div>  
   </div>  
 </div>  
 </body>  
 </html>  

2.主要js代码(indextest.js)：

[javascript]view plaincopyprint? 
   
 $(document).ready(function() {  
     //控制右方缩略图的鼠标hover移上后大图滚动展现效果  
     $(".spotlightBanner li").hover(function() {  
         var h = $(this).index();  
         a(h);  
         c()  
     },  
     function() {  
         d()  
     });  
     var f;  
     //控制右方-向上箭头的点击事件  
     $(".arrowUp").live("click",  
     function() {  
         f = true;  
         var h = $(".spotlightBanner li.selected").index();  
         c();  
         if (h == 0) {  
             a(e - 1)  
         } else {  
             a(h - 1)  
         }  
         $(this).die("mouseleave").live("mouseleave",  
         function() {  
             f = false;  
             $(this).die("mouseleave");  
             d()  
         });  
         return false  
     });  
     //控制右方-向下箭头的点击事件  
     $(".arrowDown").live("click",  
     function() {  
         var h = $(".spotlightBanner li.selected").index();  
         c();  
         if (h >= e - 1) {  
             a(0)  
         } else {  
             a(h + 1)  
         }  
         $(this).die("mouseleave").live("mouseleave",  
         function() {  
             $(this).die("mouseleave");  
             d()  
         });  
         return false  
     });  
     var g;  
     d();  
     var e = $(".spotlightBanner li").length;  
     var b = ($(".track").height() - $(".trackBar").height()) / (e - 1);  
     function d() {  
         var h = $(".spotlightBanner li.selected").index();  
         g = setInterval(function() {  
             h += 1;  
             if (h >= e) {  
                 h = 0  
             }  
             a(h)  
         },  
         3000)  
     }  
     function a(h) {  
         if (h % 4 == 0) {  
             $(".spotlightBanner").scrollTo("li:eq(" + h + ")", 200)  
         } else {  
             if (f && h % 4 == 3) {  
                 $(".spotlightBanner").scrollTo("li:eq(" + (h - 3) + ")", 200)  
             }  
         }  
         $(".spotlightBanner li").removeClass("selected").eq(h).addClass("selected");  
         $(".spotlight li").fadeOut().eq(h).fadeIn();  
         $(".trackBar").css("top", h * b)  
     }  
     function c() {  
         clearInterval(g);  
         g = null  
     }  

kissty820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一款类似跑跑卡丁车官方网漂亮的banner焦点图效果

该源码从跑跑卡丁车官方移植过来，采用jquery进行图片轮换动画，效果比较漂亮，大家可以据此来应用到实际网站项目当中去。演示效果图如下所示： 1.主界面html代码：[html] view plaincopyprint?> html xmlns="http://www.w3.org/1999/xhtml">
复制链接

扫一扫