Javascript 如何制作pick&；为购物网站的每个产品选择图像幻灯片

我需要有人建议我如何制作一张图片幻灯片，在这里你可以挑选一个特定产品的图片。与flipkart侧类似，如下所示：

如图所示，在产品图片下方，您可以选择查看的图片很少

---

我看过很多幻灯片示例，但与此不相似。如何开始呢

我想这会帮助你

  <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>

iPod Shuffle 16GB缩放视图









$（文档）.ready（函数（）{
$（'ul li a'）。悬停(
函数（）{
var currentBigImage=$（'#bigpic img'）.attr（'src'）；
var newBigImage=$（this.attr（'href'）；
var currentThumbSrc=$（this.attr（'rel'）；
switchImage（newBigImage、currentBigImage、currentThumbSrc）；
},
函数（）{}
);
函数switchImage（imageHref、currentBigImage、currentThumbSrc）{
var theBigImage=$（“#bigpic img”）；
如果（imageHref！=currentBigImage）{
theBigImage.fadeOut（250，function（）{
bigimage.attr（'src'，imageHref）.fadeIn（250）；
var newImageDesc=$（“#thumbs ul li a img[src='”+currentThumbSrc+“]”）attr（'alt'）；
$（'p#desc'）.empty（）.html（newImageDesc）；
});
}
}
});

JSFIDLE链路

使用此选项创建：

如果您想添加任何jquery图像幻灯片插件 检查这里