2

スライドショーに使用している以下のコードがあります。このコードを最適化したいので、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');      
});
4

2 に答える 2

1

jsBin デモ

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>

基本的な 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();
});
于 2012-09-24T22:08:38.910 に答える
0

最適化および美化:

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')
    })
于 2012-09-24T20:58:35.997 に答える