如何使拾選擇我需要有人建議我一個購物網站

Question

的每個產品圖像幻燈片我怎樣才能使圖像幻燈片，在那裏你可以挑選&選擇一個特定產品的圖像。類似flipkart側，如下所示：

http://www.flipkart.com/united-colors-benetton-men-s-checkered-casual-shirt/p/itmdzbs2jwtc3ez8?pid=SHTDZBRTBWYZEAJF&ref=8b1e929b-3454-466b-be71-49ab1fc8654c

如可以看到，下面的產品形象，還有顯示，你可以選擇查看一個幾張圖片。

我見過很多幻燈片的例子，但沒有與此類似。如何獲得這個開始？

Answer 1

我認爲這將有助於你...

<div id="bigpic" class="b"> 
      <img src="http://www.web-design-talk.co.uk/examples/5/images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" /> 

      <p id="desc">iPod Shuffle 16GB Zoom View</p> 

     </div> 

     <div id="thumbs"> 
      <ul> 
       <li><a href="http://www.web-design-talk.co.uk/examples/5/images/big/iphone-1-big.jpg" rel="http://www.web-design-talk.co.uk/examples/5/images/small/iphone-1-small.jpg"> 
         <img src="http://www.web-design-talk.co.uk/examples/5/images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" /> 
        </a> 
       </li> 

       <li> 
        <a href="http://www.web-design-talk.co.uk/examples/5/images/big/iphone-2-big.jpg" rel="http://www.web-design-talk.co.uk/examples/5/images/small/iphone-2-small.jpg"> 
         <img src="http://www.web-design-talk.co.uk/examples/5/images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" /> 
        </a> 
       </li 
       > 
       <li> 
        <a href="http://www.web-design-talk.co.uk/examples/5/images/big/iphone-3-big.jpg" rel="http://www.web-design-talk.co.uk/examples/5/images/small/iphone-3-small.jpg"> 
         <img src="http://www.web-design-talk.co.uk/examples/5/images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" /> 
        </a> 
       </li> 
      </ul> 

     </div> 
    <script> 
    $(document).ready(function(){ 
$('#thumbs ul li a').hover(
    function() { 
     var currentBigImage = $('#bigpic img').attr('src'); 
     var newBigImage = $(this).attr('href'); 
     var currentThumbSrc = $(this).attr('rel'); 
     switchImage(newBigImage, currentBigImage, currentThumbSrc); 
    }, 
    function() {} 
); 



function switchImage(imageHref, currentBigImage, currentThumbSrc) { 

    var theBigImage = $('#bigpic img'); 

    if (imageHref != currentBigImage) { 

     theBigImage.fadeOut(250, function(){ 
      theBigImage.attr('src', imageHref).fadeIn(250); 

      var newImageDesc = $("#thumbs ul li a  img[src='"+currentThumbSrc+"']").attr('alt'); 
      $('p#desc').empty().html(newImageDesc); 
     }); 

    } 

} 

    }); 
    </script> 

的jsfiddle鏈接 http://jsfiddle.net/chinmayahd/JvkGb/

使用創建

這一個： http://www.web-design-talk.co.uk/examples/5/

如果你想添加任何jQuery的圖像幻燈片插件 點擊這裏 http://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/