谁能帮我写一个photoslider的代码，非常感谢！

麻烦哪位大神帮我写一个photo slider的代码，方便的话，加我QQ，截图你看

解决方案 »

  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" />
    <title>Untitled Document</title>
    <style type="text/css">
    body { margin:0; padding:0; }
    ul { margin:0 auto; padding:0; width:500px; position:relative; }
    ul { list-style:none; }
    ul li { float:left; }
    #left { width:10px; height:10px; background:#f00; position:absolute; left:-10px; top:13px; }
    #right { width:10px; height:10px; background:#f00; position:absolute; right:-10px; top:13px; }
    </style>
    </head><body>
    <ul id="ulId">
    <li><a href="#"><img src="1.jpg" width="100" /></a></li>
        <li><a href="#"><img src="2.gif" width="100" /></a></li>
        <li><a href="#"><img src="3.gif" width="100" /></a></li>
        <li><a href="#"><img src="4.gif" width="100" /></a></li>
        <li><a href="#"><img src="5.jpg" width="100" /></a></li>
        <div id="left"></div>
        <div id="right"></div>
    </ul>
    <script type="text/javascript">
    /*var arr = ["1.jpg", "2.gif", "3.gif", "4.gif", "5.jpg"];
    function animate() {
    //arr.push(arr.shift());
    arr.unshift(arr.pop());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    }
    setInterval("animate()", 1000);*/
    var arr = ["1.jpg", "2.gif", "3.gif", "4.gif", "5.jpg"];
    var flag = true;
    var timerLeft = null;
    var timerRight = null;
    function animate() {
    if(flag) {
    arr.push(arr.shift());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    } else {
    arr.unshift(arr.pop());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    }

    }
    var scrolls = {
    scrollLeft: function() {
    clearInterval(timerLeft);
    clearInterval(timerRight);
    timerLeft = setInterval("animate()", 1000);
    },

    scrollRight: function() {
    flag = false;
    clearInterval(timerLeft);
    clearInterval(timerRight);
    timerRight = setInterval("animate()", 1000);
    }
    };
    document.getElementById("left").onclick = function(e) {
    e = e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    } else {
    e.returnValue = false;
    }
    clearInterval(timerLeft);
    clearInterval(timerRight);
    scrolls.scrollLeft();
    }
    document.getElementById("right").onclick = function(e) {
    e = e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    } else {
    e.returnValue = false;
    }
    clearInterval(timerLeft);
    clearInterval(timerRight);
    scrolls.scrollRight();
    }
    //scrolls.scrollLeft();
    </script>
    </body>
    </html>
    仅做参考
      

  2.   


    <!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>
    <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * { margin:0; padding:0;}
    body { font-size:12px;}
    </style>
    <link rel="stylesheet" href="css/scrollable.css" type="text/css"/>
     <!--   引入jQuery -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(function(){
          var $content = $(".scrollable_demo");
      var i = 5;  //已知显示的<a>元素的个数
      var m = 5;  //用于计算的变量
      var count = $content.find("a").length;//总共的<a>元素的个数
      $(".next").click(function(){
    if( !$content.is(":animated")){  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
    if(m<count){  //判断 i 是否小于总的个数
    m++;
    $content.animate({left: "-=96px"}, 600);
    }
    }
      });
      $(".prev").click(function(){
    if( !$content.is(":animated")){
    if(m>i){ //判断 i 是否小于总的个数
    m--;
    $content.animate({left: "+=96px"}, 600);
    }
    }
      });
      })
    </script>
    </head>
    <body>
    <div style="margin:0 auto;width:500px;">    <!-- 例子 -->
        <div id="scrollable">
            <a class="prev" href="#"></a>
            <!--  外部div使用相对定位，里面的div使用绝对定位 -->
            <div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
                <div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                    <a>4</a>
                    <a>5</a>
                    <a>6</a>
                    <a>7</a>
                    <a>8</a>
                    <a>9</a>
                    <a>10</a>
                    <a>11</a>
                    <a>12</a>
                    <a>13</a>
                    <a>14</a>
                    <a>15</a>
                </div>
                <br clear="all"/>            
            </div>
            <!-- "prev page" link -->
            <a  class="next" href="#"></a>
    </div></div>
    </body>
    </html>就是这个东西吧