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/