0
我有一個頁面，將顯示我們的專業知識，在幾個主題。 每個主題都包含一個標題，圖像和一個簡短列表。 在頁面內部，用戶可以看到主題縮略圖&所有主題的標題， 他們還將看到1個突出顯示的主題（標題，完整圖像和列表）。突出顯示的主題經過迭代，用戶可以瀏覽主題標題以更改突出顯示的主題。 每個主題的html在rails中使用partial生成，因此每個主題都作爲單獨的文件進行管理。css和html列表或div的位置有或沒有縮略圖
我有一個工作解決方案，但有一些問題，我想要一些方向。 fiddle here
謝謝你的時間！
- CSS & HTML問題...我的6個主題應該是像現在一樣列表還是6個div？我的右列和左列的迴應不一樣：更改頂級div寬度（.showScene介於680到1000px之間），您將看到右列文本居中，而不是保持正確的圖像。 CSS應該怎麼看？
我對列表的一般策略是使用：n-child部分在這種情況下使用左右浮動來創建和控制列。 - 我的'縮略圖'是使用css重新調整大小的大圖，是好還是我真的需要創建縮略圖大小的圖像？每個大圖像出現在頁面上，爲什麼加載更多縮略圖？如果我確實使用了縮略圖，那麼我將不得不將它添加到我的主題中以獲得大圖像？
- 我使用jQuery .clone（）將內容複製到我突出顯示的窗格中，這是最佳方式嗎？我討厭重複，但沒有克隆的標題和縮略圖 「移出」
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');
});
}
這是我的觀點！ – twinturbotom