多个图片可以左右轮转，


一个页面上有多个图片的左右轮转咋弄啊

解决方案 »

  1.   

    http://www.popub.net/script/MSClass.html
      

  2.   

    轮显，只不过是将多个图片放到一个div中轮显这个div
      

  3.   

    简单实现，楼主根据实际情况改吧<style type="text/css">.mainDiv {
    width:100px;
    height:100px;
    position:relative;
    overflow:hidden;
    }ul{
    list-style-type: none;
    position:absolute;
    top:10px;
    z-index:2;
    width:500px;
    margin:0px;
    padding:0;
    } 
    li{
    height:100px;
    width:100px;
    background:red;
    float:left;
    }
    </style>
    <body>
    <button id="prev">prev</button><button id="next">next</button><div id="mainDiv" class="mainDiv">
    <ul id="ulId">
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li>444</li>
       <li>555</li>
    </ul>
    </div></body>
    $(function(){
    var el = $("#ulId"),
    elLeft = el.offset().left,
    divLeft = $("#mainDiv").offset().left,
    liWidth = $("#ulId li:first-child").width();
    $("#prev").click(function(){
    var _left = el.offset().left + liWidth - divLeft;
    if (_left <= 0){
    el.animate({left: _left}, "slow");
    } else {
    alert("is top");
    }
    })
    $("#next").click(function(){
    var _left = el.offset().left - liWidth - divLeft;
    if (_left >= -400){
    el.animate({left: _left}, "slow");
    } else {
    alert("is last");
    }
    })
    })