jQuery基本滑塊到縮略圖圖片庫

Question

我想實現一個jQuery插件www.basic-slider.com到圖片庫。該插件目前所做的工作是在HTML中的< li>標籤內的圖像之間創建一個過渡，並在底部生成與每個圖像的順序相對應的數值的框。

我希望生成的框顯示每個圖像的縮略圖而不是數字值。我已經嘗試調整jQuery代碼沒有任何運氣，因此我在這裏尋求幫助。

這是它看起來像此刻和我想要實現： IMAGE

DEMO HERE

PLUGIN CONTROLS

jQuery(document).ready(function($) { 
     $('#banner-fade').bjqs({ 
     animtype: 'fade', 
     height: 360, 
     width:480, 
     animspeed: 40, 
     animduraion: 40, 
     showcontrols:true, 
     centercontrols:true, 
     nexttext:'>', 
     prevtext:'<', 
     showmarker:true, 
     centermarkers:true, 
     keyboardnav:false, 
     hoverpause:true, 
     automatic: false, 
     responsive: true, 
     randomstart: false, 
     });   
}); 

HTML

<div id="banner-fade"> 
<ul class="bjqs"> 
    <li><img src="1.jpg"/></li> 
    <li><img src="2.jpg"/</li> 
    <li><img src="3.jpg"/></li> 
    <li><img src="4.jpg"/></li> 
</ul> 
</div> 

CSS

#banner-fade { 
margin:0; 
width:480px; 
height:540px; 
float:left; 
margin:0; 
} 
ul.bjqs-controls.v-centered li a { 
display:block; 
padding:10px; 
color:#fff; 
text-decoration: none; 
} 
ul.bjqs-controls.v-centered li a:hover { 
background:#3c3c3c; 
color:#fff; 
} 
ol.bjqs-markers li a { 
width:120px; 
height:90px; 
font-size:80px; 
background-size:120px 90px; 
color:#000; 
margin:0; 
text-align:center; 
text-decoration: none; 
} 
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover { 
background: #fad703; 
} 
p.bjqs-caption { 
background: rgba(255, 255, 255, 0.5); 
} 
ul.bjqs { 
position:relative; 
list-style:none; 
padding:0; 
margin:0; 
overflow:hidden; 
display:none; 
} 
li.bjqs-slide { 
position:absolute; 
display:none; 
} 
ul.bjqs-controls { 
list-style:none; 
margin:0; 
padding:0; 
z-index:9999; 
} 
ul.bjqs-controls.v-centered li a { 
position:absolute; 
} 
ul.bjqs-controls.v-centered li.bjqs-next a { 
right:0; 
} 
ul.bjqs-controls.v-centered li.bjqs-prev a { 
left:0; 
} 
ol.bjqs-markers { 
list-style: none; 
padding: 0; 
margin:0; 
width:100%; 
} 
ol.bjqs-markers.h-centered { 
text-align: left; 
font-size:0; 
} 
ol.bjqs-markers li { 
display:inline; 
} 
ol.bjqs-markers li a { 
display:inline-block; 
} 

jQuery的

(function (e) { 
"use strict"; 
e.fn.bjqs = function (t) { 
    var n = { 
     width: 700, 
     height: 300, 
     animtype: "fade", 
     animduration: 450, 
     animspeed: 4e3, 
     automatic: !0, 
     showcontrols: !0, 
     centercontrols: !0, 
     nexttext: ">", 
     prevtext: "<", 
     showmarkers: !0, 
     centermarkers: !0, 
     keyboardnav: !0, 
     hoverpause: !0, 
     usecaptions: !0, 
     randomstart: !1, 
     responsive: !1 
    }, r = e.extend({}, n, t), 
     i = this, 
     s = i.find("ul.bjqs"), 
     o = s.children("li"), 
     u = null, 
     a = null, 
     f = null, 
     l = null, 
     c = null, 
     h = null, 
     p = null, 
     d = null, 
     v = { 
      slidecount: o.length, 
      animating: !1, 
      paused: !1, 
      currentslide: 1, 
      nextslide: 0, 
      currentindex: 0, 
      nextindex: 0, 
      interval: null 
     }, m = { 
      width: null, 
      height: null, 
      ratio: null 
     }, g = { 
      fwd: "forward", 
      prev: "previous" 
     }, y = function() { 
      o.addClass("bjqs-slide"); 
      r.responsive ? b() : E(); 
      if (v.slidecount > 1) { 
       r.randomstart && L(); 
       r.showcontrols && x(); 
       r.showmarkers && T(); 
       r.keyboardnav && N(); 
       r.hoverpause && r.automatic && C(); 
       r.animtype === "slide" && S() 
      } 
      r.usecaptions && k(); 
      if (r.animtype === "slide" && !r.randomstart) { 
       v.currentindex = 1; 
       v.currentslide = 2 
      } 
      s.show(); 
      o.eq(v.currentindex).show(); 
      r.automatic && (v.interval = setInterval(function() { 
       O(g.fwd, !1) 
      }, r.animspeed)) 
     }, b = function() { 
      m.width = i.outerWidth(); 
      m.ratio = m.width/r.width, m.height = r.height * m.ratio; 
      if (r.animtype === "fade") { 
       o.css({ 
        height: r.height, 
        width: "100%" 
       }); 
       o.children("img").css({ 
        height: r.height, 
        width: "100%" 
       }); 
       s.css({ 
        height: r.height, 
        width: "100%" 
       }); 
       i.css({ 
        height: r.height, 
        "max-width": r.width, 
        position: "relative" 
       }); 
       if (m.width < r.width) { 
        o.css({ 
         height: m.height 
        }); 
        o.children("img").css({ 
         height: m.height 
        }); 
        s.css({ 
         height: m.height 
        }); 
        i.css({ 
         height: m.height 
        }) 
       } 
       e(window).resize(function() { 
        m.width = i.outerWidth(); 
        m.ratio = m.width/r.width, m.height = r.height * m.ratio; 
        o.css({ 
         height: m.height 
        }); 
        o.children("img").css({ 
         height: m.height 
        }); 
        s.css({ 
         height: m.height 
        }); 
        i.css({ 
         height: m.height 
        }) 
       }) 
      } 
      if (r.animtype === "slide") { 
       o.css({ 
        height: r.height, 
        width: r.width 
       }); 
       o.children("img").css({ 
        height: r.height, 
        width: r.width 
       }); 
       s.css({ 
        height: r.height, 
        width: r.width * r.slidecount 
       }); 
       i.css({ 
        height: r.height, 
        "max-width": r.width, 
        position: "relative" 
       }); 
       if (m.width < r.width) { 
        o.css({ 
         height: m.height 
        }); 
        o.children("img").css({ 
         height: m.height 
        }); 
        s.css({ 
         height: m.height 
        }); 
        i.css({ 
         height: m.height 
        }) 
       } 
       e(window).resize(function() { 
        m.width = i.outerWidth(), m.ratio = m.width/r.width, m.height = r.height * m.ratio; 
        o.css({ 
         height: m.height, 
         width: m.width 
        }); 
        o.children("img").css({ 
         height: m.height, 
         width: m.width 
        }); 
        s.css({ 
         height: m.height, 
         width: m.width * r.slidecount 
        }); 
        i.css({ 
         height: m.height 
        }); 
        h.css({ 
         height: m.height, 
         width: m.width 
        }); 
        w(function() { 
         O(!1, v.currentslide) 
        }, 200, "some unique string") 
       }) 
      } 
     }, w = function() { 
      var e = {}; 
      return function (t, n, r) { 
       r || (r = "Don't call this twice without a uniqueId"); 
       e[r] && clearTimeout(e[r]); 
       e[r] = setTimeout(t, n) 
      } 
     }(), 
     E = function() { 
      o.css({ 
       height: r.height, 
       width: r.width 
      }); 
      s.css({ 
       height: r.height, 
       width: r.width 
      }); 
      i.css({ 
       height: r.height, 
       width: r.width, 
       position: "relative" 
      }) 
     }, S = function() { 
      p = o.eq(0).clone(); 
      d = o.eq(v.slidecount - 1).clone(); 
      p.attr({ 
       "data-clone": "last", 
       "data-slide": 0 
      }).appendTo(s).show(); 
      d.attr({ 
       "data-clone": "first", 
       "data-slide": 0 
      }).prependTo(s).show(); 
      o = s.children("li"); 
      v.slidecount = o.length; 
      h = e('<div class="bjqs-wrapper"></div>'); 
      if (r.responsive && m.width < r.width) { 
       h.css({ 
        width: m.width, 
        height: m.height, 
        overflow: "hidden", 
        position: "relative" 
       }); 
       s.css({ 
        width: m.width * (v.slidecount + 2), 
        left: -m.width * v.currentslide 
       }) 
      } else { 
       h.css({ 
        width: r.width, 
        height: r.height, 
        overflow: "hidden", 
        position: "relative" 
       }); 
       s.css({ 
        width: r.width * (v.slidecount + 2), 
        left: -r.width * v.currentslide 
       }) 
      } 
      o.css({ 
       "float": "left", 
       position: "relative", 
       display: "list-item" 
      }); 
      h.prependTo(i); 
      s.appendTo(h) 
     }, x = function() { 
      u = e('<ul class="bjqs-controls"></ul>'); 
      a = e('<li class="bjqs-next"><a href="#" data-direction="' + g.fwd + '">' + r.nexttext + "</a></li>"); 
      f = e('<li class="bjqs-prev"><a href="#" data-direction="' + g.prev + '">' + r.prevtext + "</a></li>"); 
      u.on("click", "a", function (t) { 
       t.preventDefault(); 
       var n = e(this).attr("data-direction"); 
       if (!v.animating) { 
        n === g.fwd && O(g.fwd, !1); 
        n === g.prev && O(g.prev, !1) 
       } 
      }); 
      f.appendTo(u); 
      a.appendTo(u); 
      u.appendTo(i); 
      if (r.centercontrols) { 
       u.addClass("v-centered"); 
       var t = (i.height() - a.children("a").outerHeight())/2, 
        n = t/r.height * 100, 
        s = n + "%"; 
       a.find("a").css("top", s); 
       f.find("a").css("top", s) 
      } 
     }, T = function() { 
      l = e('<ol class="bjqs-markers"></ol>'); 
      e.each(o, function (t, n) { 
       var i = t + 1, 
        s = t + 1; 
       r.animtype === "slide" && (s = t + 2); 
       var o = e('<li><a href="#">' + i + "</a></li>"); 
       i === v.currentslide && o.addClass("active-marker"); 
       o.on("click", "a", function (e) { 
        e.preventDefault(); 
        !v.animating && v.currentslide !== s && O(!1, s) 
       }); 
       o.appendTo(l) 
      }); 
      l.appendTo(i); 
      c = l.find("li"); 
      if (r.centermarkers) { 
       l.addClass("h-centered"); 
       var t = (r.width - l.width())/2; 
       l.css("left", t) 
      } 
     }, N = function() { 
      e(document).keyup(function (e) { 
       if (!v.paused) { 
        clearInterval(v.interval); 
        v.paused = !0 
       } 
       if (!v.animating) if (e.keyCode === 39) { 
        e.preventDefault(); 
        O(g.fwd, !1) 
       } else if (e.keyCode === 37) { 
        e.preventDefault(); 
        O(g.prev, !1) 
       } 
       if (v.paused && r.automatic) { 
        v.interval = setInterval(function() { 
         O(g.fwd) 
        }, r.animspeed); 
        v.paused = !1 
       } 
      }) 
     }, C = function() { 
      i.hover(function() { 
       if (!v.paused) { 
        clearInterval(v.interval); 
        v.paused = !0 
       } 
      }, function() { 
       if (v.paused) { 
        v.interval = setInterval(function() { 
         O(g.fwd, !1) 
        }, r.animspeed); 
        v.paused = !1 
       } 
      }) 
     }, k = function() { 
      e.each(o, function (t, n) { 
       var r = e(n).children("img:first-child").attr("title"); 
       r || (r = e(n).children("a").find("img:first-child").attr("title")); 
       if (r) { 
        r = e('<p class="bjqs-caption">' + r + "</p>"); 
        r.appendTo(e(n)) 
       } 
      }) 
     }, L = function() { 
      var e = Math.floor(Math.random() * v.slidecount) + 1; 
      v.currentslide = e; 
      v.currentindex = e - 1 
     }, A = function (e) { 
      if (e === g.fwd) if (o.eq(v.currentindex).next().length) { 
       v.nextindex = v.currentindex + 1; 
       v.nextslide = v.currentslide + 1 
      } else { 
       v.nextindex = 0; 
       v.nextslide = 1 
      } else if (o.eq(v.currentindex).prev().length) { 
       v.nextindex = v.currentindex - 1; 
       v.nextslide = v.currentslide - 1 
      } else { 
       v.nextindex = v.slidecount - 1; 
       v.nextslide = v.slidecount 
      } 
     }, O = function (e, t) { 
      if (!v.animating) { 
       v.animating = !0; 
       if (t) { 
        v.nextslide = t; 
        v.nextindex = t - 1 
       } else A(e); 
       if (r.animtype === "fade") { 
        if (r.showmarkers) { 
         c.removeClass("active-marker"); 
         c.eq(v.nextindex).addClass("active-marker") 
        } 
        o.eq(v.currentindex).fadeOut(r.animduration); 
        o.eq(v.nextindex).fadeIn(r.animduration, function() { 
         v.animating = !1; 
         v.currentslide = v.nextslide; 
         v.currentindex = v.nextindex 
        }) 
       } 
       if (r.animtype === "slide") { 
        if (r.showmarkers) { 
         var n = v.nextindex - 1; 
         n === v.slidecount - 2 ? n = 0 : n === -1 && (n = v.slidecount - 3); 
         c.removeClass("active-marker"); 
         c.eq(n).addClass("active-marker") 
        } 
        r.responsive && m.width < r.width ? v.slidewidth = m.width : v.slidewidth = r.width; 
        s.animate({ 
         left: -v.nextindex * v.slidewidth 
        }, r.animduration, function() { 
         v.currentslide = v.nextslide; 
         v.currentindex = v.nextindex; 
         if (o.eq(v.currentindex).attr("data-clone") === "last") { 
          s.css({ 
           left: -v.slidewidth 
          }); 
          v.currentslide = 2; 
          v.currentindex = 1 
         } else if (o.eq(v.currentindex).attr("data-clone") === "first") { 
          s.css({ 
           left: -v.slidewidth * (v.slidecount - 2) 
          }); 
          v.currentslide = v.slidecount - 1; 
          v.currentindex = v.slidecount - 2 
         } 
         v.animating = !1 
        }) 
       } 
      } 
     }; 
    y() 
} 
})(jQuery); 

Answer 1

演示：http://jsfiddle.net/XX744/

HTML

<div class="slideshow"> 
    <ul class='big'> 
     <li> 
      <img src="http://imageshack.us/a/img845/6999/ut3b.jpg" /> 
     </li> 
     <li> 
      <img src="http://imageshack.us/a/img850/1646/pu9p.jpg" /> 
     </li> 
     <li> 
      <img src="http://imageshack.us/a/img22/4640/6a5q.jpg" /> 
     </li> 
     <li> 
      <img src="http://imageshack.us/a/img513/4973/h6g3.jpg" /> 
     </li> 
    </ul> 
    <ul class='controls'> 
     <li class='prev'>&lt;</li> 
     <li class='next'>&gt;</li> 
    </ul> 
    <ul class='thumb'> 
     <li> 
      <img src="http://imageshack.us/a/img845/6999/ut3b.jpg" /> 
     </li> 
     <li> 
      <img src="http://imageshack.us/a/img850/1646/pu9p.jpg" /> 
     </li> 
     <li> 
      <img src="http://imageshack.us/a/img22/4640/6a5q.jpg" /> 
     </li> 
     <li> 
      <img src="http://imageshack.us/a/img513/4973/h6g3.jpg" /> 
     </li> 
    </ul> 
</div> 

CSS

.slideshow .big, .slideshow .controls, .slideshow .thumb { 
    list-style-type : none; 
    position : relative; 
    margin : 0; 
    padding : 0; 
    width : 480px; 
} 
.slideshow .big li { 
    position : absolute; 
    top : 0; 
    left : 0; 
    display : none; 
} 
.slideshow .big li:first-child { 
    display : block; 
} 
.slideshow .big img, .slideshow .big { 
    width : 480px; 
    height : 360px; 
} 
.slideshow .controls { 
    position : absolute; 
    top : 160px; 
} 
.slideshow .controls li { 
    width : 40px; 
    height : 40px; 
    background-color : #666; 
    opacity : .2; 
    color : #ccc; 
    float : left; 
    font-size : 24px; 
    text-align : center; 
    line-height : 40px; 
    cursor : pointer; 
} 
.slideshow .controls li:hover { 
    opacity : 1; 
} 
.slideshow .controls .next { 
    float : right; 
} 
.slideshow .thumb img { 
    width : 120px; 
} 
.slideshow .thumb li { 
    float : left; 
    cursor : pointer; 
} 
.slideshow .thumb li:hover { 
    opacity : .8; 
} 

的JavaScript

//When we click on thumb img 
$('.thumb li', '.slideshow').click(function() { 

    var 
     //SlideShow 
     sshow = $(this).closest('.slideshow'), 
     //Big 
     big = sshow.find('.big'), 
     //thumb 
     thumb = sshow.find('.thumb'), 
     //Get index 
     indx = thumb.find('li').index(this), 
     //Current index 
     currentIndx = big.find('li').index(big.find('li:visible')); 

    //If currentIndx is same as clicked indx don't do anything 
    if(currentIndx == indx) { 
     return; 
    } 

    big 
     //Fadeout current image 
     .find('li:visible').fadeOut().end() 
     //Fadein new image 
     .find('li:eq(' + indx + ')').fadeIn(); 
}); 

//When we click on any li inside controls section 
$('.controls li').click(function() { 
    var 
     //Slideshow 
     sshow = $(this).closest('.slideshow'), 
     //Increment 
     incr = $(this).hasClass('prev') ? -1 : 1, 
     //Current Index 
     currentIndx = sshow.find('.big li').index(sshow.find('.big li:visible')), 
     //Final Index 
     finalIndx = currentIndx + incr; 

    //Check ranges 
    finalIndx = (finalIndx >= 4) ? 0 : ((finalIndx < 0) ? 3 : finalIndx); 

    //Now trigger click event on respective image in nav 
    sshow.find('.thumb li:eq(' + finalIndx + ')').trigger('click'); 
}); 

我嘗試添加註釋來解釋我的JS代碼。

我想，我們可以在不使用任何插件的情況下實現相同的功能。

這只是一個嘗試。請看看這是否符合您的需求。