jquery - 带或不带缩略图的 css 和 html 列表或 div 位置

Question

我有一个页面将显示我们在几个主题上的专业知识。每个主题都包含标题、图像和简短列表。在页面内部，用户将看到所有主题的主题缩略图和标题，他们还将完整地看到 1 个突出显示的主题(标题、完整图像和列表)。突出显示的主题被迭代，用户可以在主题标题上移动以更改突出显示的主题。每个主题的 html 是在 Rails 中使用部分生成的，因此每个主题都作为单独的文件进行管理。

我有一个可行的解决方案，但它存在一些问题，我希望得到一些指导。 fiddle here

感谢抽空!

1. CSS 和 HTML 问题...我的 6 个主题应该像现在一样放在一个列表中还是作为 6 个 div？我的右栏和左栏的响应不一样:更改顶层 div 宽度(.showScene 在 680 到 1000 像素之间)，您会看到右栏文本居中，而不是与右图像对齐。 CSS 应该如何呈现？
   在这种情况下，我对列表的一般策略是使用 :nth-child sectors 来创建和控制带有左右浮动的列。
2. 我的“缩略图”是使用 css 调整大小的大图像，这样可以吗？还是我真的需要创建缩略图大小的图像？每个大图像都会出现在页面上，那么为什么要加载更多缩略图呢？如果我确实使用了缩略图，那么我必须将它与大图像一起添加到我的主题中吗？
3. 我使用 jQuery .clone() 将内容复制到我突出显示的 Pane 中，这是最好的方法吗？我讨厌复制但没有克隆标题和缩略图被“移出”

CSS:

.showScene{width: 1000px; border: 2px solid black; height: 400px; position: absolute;}
#exp {
    position: relative;
    min-width: 700px;
    height: 400px;
    margin: 0px auto;
}
#exp > h1{
    text-align: center;
    font-weight: bold;
    margin-top: 2px;

       color: #669900;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #669900;

}

#exp > ul {
    list-style-type: none;
    padding:0px;
    overflow: hidden;
    /*width: 700px;*/
    margin-top: -20px;

}
#exp > ul > li {
      float:left;
      width:30%;
      height: 120px;
      padding-top: 6px;
      padding-bottom: 6px;
      font-weight: bold;
      font-size: .8em;
}
#exp > ul > li img{
      width:30%;
      vertical-align: middle;
}
#exp > ul > li:nth-child(odd){
    margin-left: 3%;
}
#exp > ul > li:nth-child(odd) img{
    padding-right:10px;
}
#exp > ul > li:nth-child(even){
    float: right;
    margin-right: 10%;
}
#exp > ul > li:nth-child(even) h1{
    text-align: right;
}
#exp > ul > li:nth-child(even) img{
    position: relative;
    left: 95%;
}
.expSelected h1{
    color: #669900;
}
#expPane .expSelected  h1 {
    color: black;
}
.expList ul li {
    display:none;
}
.expList h1{
    font-size: 1.25em;
    display: inline;
    line-height: 80px;
}
.expList img {
    float: left;
    vertical-align: top;
}
#expPane{
    position: absolute;
    top: 10%;
    left:30%;
    right: 30%;
    height: 250px;
}
#expPane img{
    height: 100px;
}
#expPane .expList{
    width: 272px;
    margin: auto;
}
#expPane .expList ul li{
    display: list-item;
}
#expPane h1 {
    display: block;
    text-align: center;
}
#expPane img {
    float:none;
    text-align: center;
    width: 100%;
    height: 225px;
}
#expPane ul {
    margin-left: 20px;
}

html:

<div class='sliderContent'>
    <ul>
        <li><div class='showScene'>
                <div id='exp'>
                    <h1>Our Expertise</h1>
                        <ul>
                            <li><div class='expList topic1'>
                                    <h1>Topic1 Header</h1>
                                    <img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
                                    <ul>
                                        <li>key1</li>
                                        <li>key2</li>
                                        <li>key3</li>
                                    </ul>
                                </div>
                            </li>
                            <li><div class='expList topic2'>
                                    <h1>Topic2 Header</h1>
                                    <img src='http://2.bp.blogspot.com/-y_A2TCaEnZU/TxzbuvYiNhI/AAAAAAAAAZ4/fuMGkV3FEak/s1600/Cool.jpg'>
                                    <ul>
                                        <li>key1</li>
                                        <li>key2</li>
                                        <li>key3</li>
                                    </ul>
                                </div>
                            </li>
                            <li><div class='expList topic3'>
                                    <h1>Topic3 Header</h1>
                                    <img src='http://www.remodelpros.com/spaw/uploads/images/mr-roof-smiling.png'>
                                    <ul>
                                        <li>key1</li>
                                        <li>key2</li>
                                        <li>key3</li>
                                    </ul>
                                </div>
                            </li>            

                            <li><div class='expList topic4'>
                                    <h1>Topic4 Header</h1>
                                    <img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
                                    <ul>
                                        <li>key1</li>
                                        <li>key2</li>
                                        <li>key3</li>
                                    </ul>
                                </div>
                            </li>
                            <li><div class='expList topic5'>
                                    <h1>Topic5 Header</h1>
                                    <img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
                                    <ul>
                                        <li>key1</li>
                                        <li>key2</li>
                                        <li>key3</li>
                                    </ul>
                                </div>
                            </li>             
                            <li><div class='expList topic6'>
                                    <h1>Topic6 Header</h1>
                                    <img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
                                    <ul>
                                        <li>key1</li>
                                        <li>key2</li>
                                        <li>key3</li>
                                    </ul>
                                </div>
                            </li>   

                        </ul>
                                            <div id='expPane'></div>
                </div>


            </div>
        </li>
    </ul>
</div>

JS:

var actual = 1;

$(document).ready(function() {

    /* get all 'src' */
    links = $('#exp > ul > li > div');

    /* set first image */
    imgFirst(links);

    /* iterate images */
    startExp();
    /* hover images */
    imgHov();


});
/* set first image */
function imgFirst(links) {
    $('#expPane').html($(links[0]).clone());
};
//set interval
function startExp(){
    i = 0;
    startExpVar = setInterval(function() {
        imgIterate(links);
    }, 3000);
}
//stop interval
function stopExp(){
    clearInterval(startExpVar);
}
/* iterate images */
function imgIterate(links) {
    $('#expPane').fadeOut('slow', function(){
        ++i;
        if (i >= links.length){i = 0}
        $('#expPane').html($(links[i]).clone()).fadeIn('slow');
    });
};

/* hover images */
function imgHov() {
    links.hover(function() {
        var activeOne = $(this);
        activeOne.addClass('expSelected');
        stopExp();
        $('#expPane').fadeOut('fast', function(){
            $('#expPane').html(activeOne.clone()).fadeIn('fast');
        });
    }, function() {
        imgIterate(links);
        startExp();
        $(this).removeClass('expSelected');

    });
}

Answer 1

1. 我认为您当前的设置似乎工作正常，非常容易确定列表的一部分和不列表的一部分(只在 UL 中查找比查找包含在 wrapperX 或给定类中的 div 更容易) .
2. 您不必创建缩略图，但我认为这通常是个好主意。有时，通过 CSS 执行此操作可能会出现一些失真或颗粒感。
3. 克隆似乎合法