Question

我想删除我写的那个使用类UiUx3DSSVFlow的脚本。
如果不对这个内部类进行硬编码，如何使用它们的父#thumbs？< / p>

我不应该再使用我脚本中的特定类了。将来，这些类可以更改为任何其他类名。我不需要使用内部类名

就能以另一种方式使用相同的功能

HTML：

<!--Thumbs Image-->

<div id="thumbs">
    <div class="UiUx3DSSVFlow">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>
    <div class="UiUx3DSSVFlow">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>        
    <div id="Video" class="UiUx3DSSVFlow">
        <div class="video_gallery">     
           <div>
                <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
           </div>
         </div>
    </div>       
    <div id="Video" class="UiUx3DSSVFlow">
        <div class="video_gallery">     
            <div>
                <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
            </div>
        </div>
    </div>    
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>

CSS：

#thumbs{
    border:1px solid red;
    width:100%;  
}   
#thumbs div{display:inline-block;   }    
#larger{
    border:1px solid black;
    width:100%;
}    
#larger div{display:inline-block;  }

jQuery的：

function thumbs(i,incr){
    var num_thumbs=2;
    if(i===null){
        i=$("#thumbs").prop('data-index'),
        i+=num_thumbs*incr;
    }
    i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
    $("#thumbs").prop('data-index',i);
    $('#thumbs .UiUx3DSSVFlow').hide();
    $('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}

$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
    var that=this;
    $('.t'+that[0]).click(function(){
        thumbs(null,that[1]);
    });

});
$('.tprev').click();

http://jsfiddle.net/T657N/33/

Answer 1

jsFiddle demo

在进入JS之前检查你的HTML，CSS知识！

您不能在一个文档中包含多个 ID ！
div元素（默认为块元素）不需要width:100%;
display: inline-block最适合<span>元素的xbrowser，对于其他浏览器，您需要使用某种类似的hax：

显示：内联块; *显示：内联; 变焦：1;

HTML：

<div id="thumbs">
    <div>
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>
    <div>     
        <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
        <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
    </div>
</div>

<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>

CSS：

#thumbs{border:1px solid red;}
#thumbs div{display:inline;}

jQuery的：

var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;

function display(){
    c= c===-1? tDivsN-1 : c%tDivsN;
    $tDiv.hide().eq(c).show();
}
display();

$('.tprev, .tnext').on('click',function(e){
    e.preventDefault();
    var myCLass= $(this).hasClass('tnext') ? c++ : c--;
    display();
});

Jquery-image-gallery：不使用任何内部类

1 个答案:

jsFiddle demo