Question

我在下面的代码中使用以下代码进行幻灯片演示。我想优化这段代码，并希望与SO联系以尝试获得一些帮助。我知道我使用的这些选择器正在工作，但如果有更有效的方式来编写我的画廊，我很好奇。我经常写这些相同的情况，并想知道其他人是否觉得我做得对。

我只是在寻找有关格式化和优化我的JS性能以及DRY代码方法的总体建议。看到其他人如何编写类似的代码有助于我磨练自己的技能。

标记

  <a id="next">next</a><a id="prev">prev</a>
    <ul id="thumbnails">
      <li><a href="/path/to/src"><img src="50x50.jpg"></a></li>
      <li><a href="/path/to/src"><img src="50x50.jpg"></a></li>
      <li><a href="/path/to/src"><img src="50x50.jpg"></a></li>
    </ul>
   <img id="main-image" src="path/to/src">

JS

$("#thumbnails a").click(function(e){      
  e.preventDefault();

  var $this = $(this),
      thesrc  = $this.attr('href'),
      desc = $this.attr('alt');    

  $this.addClass('current');
  $this.parent().siblings().children('a').removeClass('current');

  $("#main-image").fadeOut(400, function(){
    $('<img/>').attr('src', thesrc).load(function(){
      $("#main-image").attr('src', this.src).fadeIn(400);
      $("#caption").text(desc);
    });
  });                            
});

$("#next").click(function(e){
   e.preventDefault();     
   $('.current').parent().next().children('a').trigger('click');
});                                                                          

$("#prev").click(function(e){
  e.preventDefault();       
  $('.current').parent().prev().children('a').trigger('click');      
});

Answer 1

jsBin demo

HTML：

  <p>
     <a id="prev">prev</a>
     <a id="next">next</a>    
  </p>

   <div id="thumbnails">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
   </div>

  <div id="main-img-container">
       <div id="main-img"></div>
  </div>

BASIC CSS：

#thumbnails img{
  height:30px;
}
div#main-img-container{
  height:200px;
  background: #eee url(loading_transparent.gif) no-repeat center center;  
}
div#main-img{
  width:100%;
  height:100%;
  background: transparent no-repeat center center;
  background-size:cover; 
}
#next, #prev{
  cursor:pointer;
  background:#eee;
  padding:4px 10px;
  -webkit-border-radius:5px;
          border-radius:5px;
}

jQuery的：

var $imgs = $('#thumbnails img');
var imgsN = $imgs.length;
var $main = $('#main-img');
var c = 0; // a 'current' counter

function loadImage(){
  c= c===-1? c=imgsN-1 : c%imgsN; 
  var getSrc = $imgs.eq(c).attr('src');  
  $main.stop().fadeTo(200, 0.7, function(){ // just to make loading a bit visible :)
     $('<img>').attr('src', getSrc).load(function(){
       $main.css({backgroundImage: 'url('+ this.src +')'}).fadeTo(300,1);        
     });
  });  
}
loadImage(); // first kick! :)

$imgs.click(function(){  
  c = $(this).index(); 
  loadImage();  
});

$('#prev, #next').click(function(){
  var myID = this.id=='next' ? c++ : c--;
  loadImage();
});

Answer 2

优化和美化：

e.preventDefault()
var $this = $(this),
    thesrc = $this.attr('href'),
    desc = $this.attr('alt')
    $this.addClass('current')
    $this.parent()
        .siblings()
        .children('a')
        .removeClass('current')
    $("#main-image").fadeOut(400, function () {
        $('<img/>').attr('src', thesrc)
            .load(function () {
            $("#main-image").attr('src', this.src)
                .fadeIn(400)
            $("#caption").text(desc)
        })
    })
    })
    $("#next").click(function (e) {
        e.preventDefault()
        $('.current').parent()
            .next()
            .children('a')
            .trigger('click')
    })
    $("#prev").click(function (e) {
        e.preventDefault()
        $('.current').parent()
            .prev()
            .children('a')
            .trigger('click')
    })

优化jQuery幻灯片

2 个答案:

jsBin demo