如何運行一個頁面

我想要運行同一頁上的兩個幻燈片上添加兩個「圖像幻燈片」，如何運行一個頁面

這裏是類似的東西搗鼓什麼，我已經創建了： http://jsfiddle.net/55KBN/

我能夠運行第一張幻燈片，但第二張不能運行，當我點擊第二張幻燈片控件時，它會使第一張幻燈片正常工作。

問題背後的原因是，我使用兩個幻燈片放映相同的結構和類名，我已經給了不同的ID以兩個幻燈片，的最高父DIV但問題是我硝基甲苯知道如何獲取點擊用戶信息，用戶點擊了哪個幻燈片？並相應地如何更新幻燈片以適用於特定的DIV。

這裏是我的代碼： HTML

<div id="compareImageBox"> 
@* PRE LABEL AREA *@ 
<div id="preLabel" class="marginRight"> 
    <h1>Pre Label</h1> 
    <span class="control prev">Prev</span> || 
    <span class="control next">Next</span> 
    <ul class="previewImages"> 
     <li> 
      <img src="~/Content/images/scanned-full/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/01.jpg" /></li> 
    </ul> 
    <ul class="thumbsImages"> 
     <li> 
      <img src="~/Content/images/scanned-tmb/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/01.jpg" /></li> 
    </ul> 
</div> 

@* POST LABEL AREA *@ 
<div id="postLabel"> 
    <h1>Post Label</h1> 
    <span class="control prev">Prev</span> || 
    <span class="control next">Next</span> 
    <ul class="previewImages"> 
     <li> 
      <img src="~/Content/images/scanned-full/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-full/01.jpg" /></li> 
    </ul> 
    <ul class="thumbsImages"> 
     <li> 
      <img src="~/Content/images/scanned-tmb/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/01.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/02.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/03.jpg" /></li> 
     <li> 
      <img src="~/Content/images/scanned-tmb/01.jpg" /></li> 
    </ul> 
</div>

CSS

<style> 
    #compareImageBox { 
     padding: 15px; 
     height: 95.99%; 
    } 

     #compareImageBox ul, 
     #compareImageBox li { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
      list-style: none; 
     } 

    #preLabel, 
    #postLabel { 
     display: inline-block; 
     width: 48.6%; 
     height: 100%; 
     min-height: 400px; 
     border: 1px solid #2f3843; 
     border-bottom: none; 
     border-radius: 15px; 
     vertical-align: top; 
     /*BORDER SHADOW*/ 
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63); 
     -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63); 
     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63); 
    } 

     #preLabel > *, 
     #postLabel > * { 
      width: 99.5%; 
      overflow: hidden; 
     } 

     #compareImageBox .control, 
     #preLabel h1, 
     #postLabel h1 { 
      color: #e2e5ea; 
      text-align: center; 
      margin: 10px 0; 
     } 

    #compareImageBox ul.previewImages { 
     height: 86.5%; 
     text-align: center; 
     position: relative; 
     top: 0px; 
     left: 0px; 
    } 

     #compareImageBox ul.previewImages li { 
      position: absolute; 
      margin-left: auto; 
      margin-right: auto; 
      left: 0; 
      right: 0; 
     } 

      #compareImageBox ul.previewImages li img { 
       margin-top: 20px; 
       max-width: 530px; 
       max-height: 550px; 
      } 

    #compareImageBox ul.thumbsImages { 
     height: 60px; 
     width: 47.5%; 
     border-radius: 0 0 10px 10px; 
     box-sizing: border-box; 
     /*BG GRADIENT*/ 
     background: #475360; 
     background: -moz-linear-gradient(top, #475360 0%, #242f3a 100%); 
     background: -webkit-gradient(left top, left bottom, color-stop(0%, #475360), color-stop(100%, #242f3a)); 
     background: -webkit-linear-gradient(top, #475360 0%, #242f3a 100%); 
     background: -o-linear-gradient(top, #475360 0%, #242f3a 100%); 
     background: -ms-linear-gradient(top, #475360 0%, #242f3a 100%); 
     background: linear-gradient(to bottom, #475360 0%, #242f3a 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#475360', endColorstr='#242f3a', GradientType=0); 
     font-size: 0; 
     position: absolute; 
     bottom: 15px; 
     border-top: 1px solid #1d252e; 
     overflow: hidden; 
    } 

     #compareImageBox ul.thumbsImages li { 
      display: inline-block; 
      border-left: 1px solid #505963; 
      border-right: 1px solid #242f3a; 
      height: 60px; 
      padding-top: 15px; 
      width: 14.28%; 
      text-align: center; 
     } 

      #compareImageBox ul.thumbsImages li:last-of-type { 
       border-right: none; 
      } 

      #compareImageBox ul.thumbsImages li:first-of-type { 
       border-radius: 0 0 0 10px; 
      } 

      #compareImageBox ul.thumbsImages li:last-of-type { 
       border-radius: 0 0 10px 0; 
      } 

      #compareImageBox ul.thumbsImages li:hover, 
      #compareImageBox ul.thumbsImages li.selected { 
       background: url(../../Content/images/icons/selectedBg.png) top left no-repeat; 
       -webkit-box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44); 
       -moz-box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44); 
       box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44); 
      } 

      #compareImageBox ul.thumbsImages li.selected { 
       border-left: 1px solid #242f3a; 
      } 

      #compareImageBox ul.thumbsImages li img { 
       width: 35px; 
       height: 35px; 
      } 

      #compareImageBox ul.thumbsImages li a.prev, 
      #compareImageBox ul.thumbsImages li a.next { 
       font-size: 16px; 
       font-weight: bold; 
       font-family: arial; 
       background: #475360; 
       background: -moz-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%); 
       background: -webkit-gradient(left top, left bottom, color-stop(0%, #475360), color-stop(28%, #242f3a), color-stop(62%, #242f3a), color-stop(100%, #475360)); 
       background: -webkit-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%); 
       background: -o-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%); 
       background: -ms-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%); 
       background: linear-gradient(to bottom, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%); 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#475360', endColorstr='#475360', GradientType=0); 
       width: 20px; 
       padding: 0; 
       line-height: 60px; 
      } 
</style>

<script> 
var thumbs = $('ul.thumbsImages li'); 
var images = $('ul.previewImages li'); 
var lastElem = thumbs.length - 1; 
var target; 

thumbs.first().addClass('selected'); 
images.hide().first().show(); 

function sliderResponse(target) { 
    images.fadeOut(300).eq(target).fadeIn(300); 
    thumbs.removeClass('selected').eq(target).addClass('selected'); 
} 

thumbs.click(function() { 
    if (!$(this).hasClass('selected')) { 
     target = $(this).index(); 
     sliderResponse(target); 
     resetTiming(); 
    } 
}); 
$('.next').click(function() { 
    target = $('ul.thumbsImages li.selected').index(); 
    target === lastElem ? target = 0 : target = target + 1; 
    sliderResponse(target); 
    resetTiming(); 
}); 
$('.prev').click(function() { 
    target = $('ul.thumbsImages li.selected').index(); 
    lastElem = thumbs.length - 1; 
    target === 0 ? target = lastElem : target = target - 1; 
    sliderResponse(target); 
    resetTiming(); 
}); 

function sliderTiming() { 
    target = $('ul.thumbsImages li.selected').index(); 
    target === lastElem ? target = 0 : target = target + 1; 
} 
var timingRun = setInterval(function() { 
    sliderTiming(); 
}, 5000); 

function resetTiming() { 
    clearInterval(timingRun); 
    timingRun = setInterval(function() { 
     sliderTiming(); 
    }, 5000); 
}

讓我知道你是否需要任何其他信息。

請建議。

來源

2014-04-11 UID

嘗試在JavaScript中添加新變量並在html中更改其他滑塊上的這些類。示例

var thumbs = $('ul.thumbsImages2 li'); 
var images = $('ul.previewImages2 li');

另外不要忘記添加到CSS這些新類。示例

#compareImageBox ul.previewImages li img, 
    #compareImageBox ul.previewImages2 li img { 
     margin-top: 20px; 
     max-width: 530px; 
     max-height: 550px; 
    }

來源

2014-04-11 20:18:59

如何運行一個頁面

回答

相關問題