请教，这种横向切换展示图片的制作思路

.product-details .show-left .middle-part {
left: 700px;
}
.product-details .banner .middle-part {
left: 155px;
width: 145px;
}
看这几个值的变化

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <title>Slide Sample</title>
    <style type="text/css">
    body {
    background-color: #6efd9d;
    }/* container-struts
    **************************/
    .container {
    margin: 0 auto;
    width: 1000px;
    height: 460px;
    overflow: hidden;
    }
    .container .pool {
    height: 460px;
    width: 8000px;
    }
    .container .pool .scope {
    float: left;
    width: 145px;
    overflow: hidden;
    margin-left: 10px;
    cursor: pointer;
    }
    .container .pool .scope img {
    margin-left: -150px;
    }
    </style>
    </head><body>
    <div class="container">
    <div class="pool">
            <div class="scope" style="margin-left:0;width:690px">
                <img src="http://hiphotos.baidu.com/pay-operone/wh%3D690%2C460/sign=3c98994dfc1986184112e78273dd0247/d0c8a786c9177f3ee88ae02174cf3bc79f3d565b.jpg" style="margin-left:0" />
            </div>
            <div class="scope">
                <img src="http://hiphotos.baidu.com/pay-operone/wh%3D690%2C460/sign=18b4bcd6d5c8a786be7f42085e39e509/cb8065380cd79123aa768858a9345982b2b78003.jpg" />
            </div>
            <div class="scope">
                <img src="http://hiphotos.baidu.com/pay-operone/wh%3D690%2C460/sign=356312db9b3df8dca6688797f4215ebf/b3b7d0a20cf431ad8e435f154f36acaf2edd980c.jpg" />
            </div>
        </div>
    <div>
    <script type="text/javascript">
    $(".container .pool .scope").each(function() {
    $(this).mouseenter(function(evt) {
    var that = this;
    $(".container .pool .scope").each(function() {
    if (that == this) {
    $(this).stop(true, false).animate({width: "690px"}, "slow");
    $(this).find("img").stop(true, false).animate({marginLeft: "0"}, "slow");
    } else {
    $(this).stop(true, false).animate({width: "145px"}, "slow");
    $(this).find("img").stop(true, false).animate({marginLeft: "-150px"}, "slow");
    }
    });
    });
    });
    </script>
    </body>
    </html>
      

  2.   

    不知道使用for循环是否能够实现？
      

  3.   

    jQuery中的each方法就是for循环，一般实现动画都都是使用animate方法。