javascript - 如何为购物网站的每种产品制作选择图像幻灯片

Question

我需要有人建议我如何制作图像幻灯片，您可以在其中挑选和选择特定产品的图像。类似于 Flipkart side ，如下所示：

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/