jquery和carousel.min.js实现缩略图轮播

喜欢ヅ旅行 2021-06-26 16:06 754阅读 1赞 
  1. @{
  2.     Layout = null;
  3. }
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9.     <title>jQuery带缩略图轮播效果</title>
  10.     <link href="~/css/style.css" rel="stylesheet" />
  11. </head>
  12. <body style="">
  13.     <div class="banner">
  14.         <div class="large_box">
  15.             <ul>
  16.                 <li style="display: none;">
  17.                     <img src="~/images/img1.jpg" width="530" height="350">
  19.                 </li>
  20.                 <li style="display: list-item;">
  21.                     <img src="~/images/img2.jpg" width="530" height="350">
  22.                 </li>
  23.                 <li style="display: none;">
  24.                     <img src="~/images/img3.jpg" width="530" height="350">
  25.                 </li>
  26.                 <li style="display: none;">
  27.                     <img src="~/images/img4.jpg" width="530" height="350">
  28.                 </li>
  29.                 <li style="display: none;">
  30.                     <img src="~/images/img5.jpg" width="530" height="350">
  31.                 </li>
  32.                 <li style="display: none;">
  33.                     <img src="~/images/img6.jpg" width="530" height="350">
  34.                 </li>
  35.             </ul>
  36.         </div>
  37.         <div class="small_box">
  38.             <span class="btn left_btn"></span>
  39.             <div class="small_list">
  40.                 <ul style="width: 720px; margin-left: -120px;">
  41.                     <li class="">
  42.                         <img src="~/images/thum1.jpg" width="110" height="73">
  43.                         <div class="bun_bg"></div>
  44.                     </li>
  45.                     <li class="on">
  46.                         <img src="~/images/thum2.jpg" width="110" height="73">
  47.                         <div class="bun_bg"></div>
  48.                     </li>
  49.                     <li class="">
  50.                         <img src="~/images/thum3.jpg" width="110" height="73">
  51.                         <div class="bun_bg"></div>
  52.                     </li>
  53.                     <li class="">
  54.                         <img src="~/images/thum4.jpg" width="110" height="73">
  55.                         <div class="bun_bg"></div>
  56.                     </li>
  57.                     <li class="">
  58.                         <img src="~/images/thum5.jpg" width="110" height="73">
  59.                         <div class="bun_bg"></div>
  60.                     </li>
  61.                     <li class="">
  62.                         <img src="~/images/thum6.jpg" width="110" height="73">
  63.                         <div class="bun_bg"></div>
  64.                     </li>
  65.                 </ul>
  66.             </div>
  67.             <span class="btn right_btn"></span>
  68.         </div>
  69.     </div>
  70.     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  71.     <script src="~/Scripts/carousel.min.js"></script>
  72.     <script type="text/javascript"> $(function () { /* 商品轮播图（带缩略图的轮播效果） */ $(".banner").thumbnailImg({ large_elem: ".large_box", small_elem: ".small_list", left_btn: ".left_btn", right_btn: ".right_btn" }); }); </script>
  73. </body>
  74. </html>
  1. (function($){ 
  2.     //默认参数
  3.     var defaluts = { 
  4.         large_elem: "large_elem",     //大图
  5.         small_elem: "small_elem",    //小图
  6.         left_btn: "left_btn",        //左按钮
  7.         right_btn: "right_btn" ,    //右按钮
  8.         state: "on",                 // 类
  9.         speed: "normal",             //速度
  10.         vis: 4                        //项数
  11.     };
  12.     $.fn.extend({ 
  13.         /* 带缩略图的轮播效果 */
  14.         "thumbnailImg": function (options) { 
  15.             var opts = $.extend({ }, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  16.             //遍历匹配元素的集合
  17.             return this.each(function () { 
  18.                 var $this = $(this);
  19.                 var t = 0;
  20.                 /* 初始化 */
  21.                 $(opts.large_elem).find("ul li").eq(0).show();
  22.                 $(opts.small_elem).find("ul li").eq(0).addClass(opts.state);
  23.                 var l = $(opts.small_elem).find("ul li").length;
  24.                 var l_mean;
  25.                 if(l < opts.vis){ 
  26.                     l_mean = 0;
  27.                 }else{ 
  28.                     l_mean = ((parseInt(l / opts.vis) - 1) * opts.vis) + (l % opts.vis);
  29.                 }
  30.                 var w = $(opts.small_elem).find("ul li").outerWidth(true);  //缩略图项的宽度（包含内边距）
  31.                 $(opts.small_elem).find("ul").css("width",l * w + "px");    //初始化缩略图总宽度
  32.                 /* 缩略图点击 */
  33.                 $(opts.small_elem).find("ul li").click(function(){ 
  34.                     $(this).addClass(opts.state).siblings().removeClass(opts.state);
  35.                     t = $(this).index();
  36.                     Img($(this).index());
  37.                 });
  38.                 /* 左按钮 */
  39.                 $(opts.left_btn).click(function(){ 
  40.                     var i;
  41.                     $(opts.small_elem).find("ul li").each(function(index){ 
  42.                         if($(this).hasClass(opts.state)){ 
  43.                             i = index;
  44.                         }
  45.                     });
  46.                     i--;
  47.                     if(i < 0){ 
  48.                         i = l - 1;
  49.                     }
  50.                     t = i;
  51.                     Img(i)
  52.                 });
  53.                 /* 右按钮 */
  54.                 $(opts.right_btn).click(function(){ 
  55.                     var i;
  56.                     $(opts.small_elem).find("ul li").each(function(index){ 
  57.                         if($(this).hasClass(opts.state)){ 
  58.                             i = index;
  59.                         }
  60.                     });
  61.                     i++;
  62.                     if(i > l-1){ 
  63.                         i = 0;
  64.                     }
  65.                     t = i;
  66.                     Img(i);
  67.                 });
  68.                 /* 图片 */
  69.                 function Img(i){ 
  70.                     $(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();
  71.                     $(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);
  72.                     var ml = i * w;
  73.                     if(ml <= l_mean * w){ 
  74.                         $(opts.small_elem).find("ul").stop().animate({ 
  75.                             marginLeft: -ml + "px"
  76.                         },opts.speed)
  77.                     }else{ 
  78.                         $(opts.small_elem).find("ul").stop().animate({ 
  79.                             marginLeft: -(l_mean * w) + "px"
  80.                         },opts.speed)
  81.                     }
  82.                 }
  83.                 var timing = setInterval(function(){ 
  84.                     t++;
  85.                     if(t > l-1){ 
  86.                         t = 0;
  87.                     }
  88.                     Img(t)
  89.                 },3000);
  90.                 $this.hover(function(){ 
  91.                     clearInterval(timing);
  92.                 },function(){ 
  93.                     timing = setInterval(function(){ 
  94.                         t++;
  95.                         if(t > l-1){ 
  96.                             t = 0;
  97.                         }
  98.                         Img(t)
  99.                     },3000);
  100.                 });
  101.             });
  102.         }
  103.     });
  104. })(jQuery);

style.css

  1. body, div, ul, li { 
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. ul { 
  7.     list-style: none;
  8. }
  10. img { 
  11.     border: 0;
  12. }
  14. .banner { 
  15.     margin: 200px auto 0;
  16.     width: 530px;
  17.     overflow: hidden;
  18. }
  20. .large_box { 
  21.     margin-bottom: 10px;
  22.     width: 530px;
  23.     height: 350px;
  24.     overflow: hidden;
  25. }
  27.     .large_box img { 
  28.         display: block;
  29.     }
  31. .small_box { 
  32.     width: 530px;
  33.     height: 73px;
  34.     overflow: hidden;
  35. }
  37. .small_list { 
  38.     position: relative;
  39.     float: left;
  40.     width: 480px;
  41.     height: 73px;
  42.     overflow: hidden;
  43. }
  45.     .small_list ul { 
  46.         height: 73px;
  47.         overflow: hidden;
  48.     }
  50.         .small_list ul li { 
  51.             position: relative;
  52.             float: left;
  53.             margin-right: 10px;
  54.             width: 110px;
  55.         }
  57.             .small_list ul li img { 
  58.                 display: block;
  59.             }
  61.             .small_list ul li .bun_bg { 
  62.                 display: none;
  63.                 position: absolute;
  64.                 top: 0;
  65.                 left: 0;
  66.                 width: 110px;
  67.                 height: 73px;
  68.                 background: #000;
  69.                 filter: alpha(opacity=60);
  70.                 -moz-opacity: .6;
  71.                 -khtml-opacity: .6;
  72.                 opacity: .6;
  73.             }
  75.             .small_list ul li.on .bun_bg { 
  76.                 display: block;
  77.             }
  79. .btn { 
  80.     display: block;
  81.     width: 20px;
  82.     height: 73px;
  83.     background-color: #777;
  84.     background-repeat: no-repeat;
  85.     background-position: center center;
  86.     cursor: pointer;
  87. }
  89.     .btn:hover { 
  90.         background-color: #e7000e;
  91.     }
  93. .left_btn { 
  94.     float: left;
  95.     margin-right: 10px;
  96.     background-image: url(../images/left_btn.png);
  97. }
  99. .right_btn { 
  100.     float: right;
  101.     background-image: url(../images/right_btn.png);
  102. }

如图：

在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，754人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery实现轮播图

    我之前用css3实现轮播图过，不过那是一个简单的轮播图，只能来回切换图片。因为那时候我还没有学过javascript，没学过javascript的同学也可以去我主页看看。当然，

    梦里梦外;梦里梦外;/ 0 赞/ 359 阅读

    相关 jQuery 实现图片轮播

         自从学习jQuery之后，简直怀疑人生了。      因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞

    忘是亡心i忘是亡心i/ 0 赞/ 439 阅读

    相关 带缩略图的淘宝风轮播图

    由于项目需要一个类似与淘宝那种的多级联动轮播图。![Center][] 在网上也找到很多类似但都不是设计师所需要的，只能中间写一个。 因为是多级联动，逻辑这一块带

    Bertha 。Bertha 。/ 0 赞/ 209 阅读