2010-07-23 86 views
2

我正在嘗試創建一個帶有圖像的小幻燈片。我想能夠水平滾動查看所有圖像。使這些箭頭滾動? jquery&html

我:

<div class="gallery"> 
    <div class="back" style="opacity: 0.6;"></div> 
    <div class="thumbs">  
     <ul class="ad-thumb-list"> 
      <li> 
       <img id="thumb01" src="../jpeg/thumbnails/01.jpg" title="page 1"/> 
      </li> 
      (I have many <li>'s listed) 
     </ul>  
    </div> 
    <div class="forward" style="opacity: 0.6;"></div> 
</div> 

我的CSS風格化的整個事情,和我有顯示:隱藏在大拇指股利。我只需要箭頭來運行,但我不知道使用什麼類型的代碼。任何幫助將是偉大的!

+0

是否有您的包裹中的UL一個div理由嗎?你不能只是刪除包裝div,並給ul'thumbs'類? – Eric 2010-07-23 14:03:14

+0

他們都有不同的造型。我把拇指放在那裏作爲一個容器。我把顯示器:隱藏;到拇指div,所以它裏面的任何東西(ul)會被切斷,如果它大於拇指div。 – Annie 2010-07-23 14:17:10

回答

0
$('.gallery').each(function() { 
    var $images = $('.thumbs li', this); 
    var $forward = $('.forward', this); 
    var $back = $('.back', this); 

    var numImages = $images.length; 

    var index = 0; 

    function update() 
    { 
     index = (index + numImages)%numImages; 
     $images.hide().eq(index).show() 
    } 

    $back.click(function() { 
     index--; 
     update(); 
    }); 

    $next.click(function() { 
     index++; 
     update(); 
    }); 

    update(); 
}); 
+0

你要刪除'display:hidden',你放在'.thumbs' div上兼容性原因。無論如何,jQuery隱藏了其他人。 – Eric 2010-07-23 14:04:22

+0

似乎不適合我 – Annie 2010-07-23 17:17:40

1
<style type="text/css"> 
    .ad-thumb-list 
    { 
     width:650px; 
     } 
    .ad-thumb-list li 
    { 
     display:block; 
     float:left; 
     width:100px; 
     height:100px; 
     margin-right:20px; 
     border:solid 1px #ccc; 
     } 
    .thumbs 
    { 
     overflow:hidden; 
     height:120px; 
     width:280px; 
     }    
</style> 

和JS:

<script type="text/javascript"> 
    $(function() { 

     $('.forward').click(function() { 
      $('.thumbs').animate({ scrollLeft: '+=' + $('.ad-thumb-list li').width() }); 
     }); 
     $('.back').click(function() { 
      $('.thumbs').animate({ scrollLeft: '-=' + $('.ad-thumb-list li').width() }); 
     }); 
    }); 
</script> 

和HTML

<div class="gallery"> 
    <div class="back" style="opacity: 0.6;">Back</div> 
     <div class="thumbs">  
     <ul class="ad-thumb-list"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul>  
     </div> 
    <div class="forward" style="opacity: 0.6;">Forward</div> 
</div> 
+0

這似乎是工作,但我不能讓它做任何事情。 – Annie 2010-07-23 16:34:03

+0

http://jsfiddle.net/3ysgy/ 似乎沒有工作,但謝謝! – Annie 2010-07-23 16:36:33