怎么用javascript写图片横排滚动 我只要写10

我要放在<div style="width:300px; height:100px;"></div>这个里面 里面最多显示三张 我百度了很多都不管用

解决方案 »

  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=gb2312" />
    <title>Jquery 图片切换展示效果 - - yj511</title>
    <style type="text/css">
    .container, .container * { margin:0; padding:0; }
    .container { width:408px; height:168px; overflow:hidden; position:relative; }
    .slider { position:absolute; }
    .slider li { list-style:none; display:inline; }
    .slider img { width:408px; height:168px; display:block; }
    .slider2 { width:2000px; }
    .slider2 li { float:left; }
    .num { position:absolute; right:5px; bottom:5px; }
    .num li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff; }
    .num li.on { color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; }
    </style>
    </head>
    <body>
    <script src="Jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript" >
    //Demo1:
    $(function(){
         var len = $("#idNum > li").length;
    var index = 0;
    $("#idNum li").mouseover(function(){
       index =   $("#idNum li").index(this);
       showImg(index);
    }); 
    //滑入 停止动画，滑出开始动画.
    $('#idTransformView').hover(function(){
         if(MyTime){
         clearInterval(MyTime);
         }
    },function(){
         MyTime = setInterval(function(){
           showImg(index)
         index++;
         if(index==len){index=0;}
         } , 2000);
    });
    //自动开始
    var MyTime = setInterval(function(){
       showImg(index)
       index++;
       if(index==len){index=0;}
    } , 2000);
    })
    // Demo1 : 关键函数：通过控制top ，来显示不通的幻灯片
    function showImg(i){
       $("#idSlider").stop(true,false).animate({top : -168*i},800);
       $("#idNum li")
        .eq(i).addClass("on")
        .siblings().removeClass("on");
    }
    //Demo2:
    $(function(){
         var len2 = $("#idNum2 > li").length;
    var index2 = 0;
    $("#idNum2 li").mouseover(function(){
       index2 =   $("#idNum2 li").index(this);
       showImg2(index2);
    }); 
    //滑入 停止动画，滑出开始动画.
    $('#idTransformView2').hover(function(){
         if(MyTime2){
         clearInterval(MyTime2);
         }
    },function(){
         MyTime2 = setInterval(function(){
           showImg2(index2)
         index2++;
         if(index2==len2){index2=0;}
         } , 3000);
    });
    //自动开始
    var MyTime2 = setInterval(function(){
       showImg2(index2)
       index2++;
       if(index2==len2){index2=0;}
    } , 2000);
    })
    // Demo2 : 关键函数：通过控制left ，来显示不通的幻灯片
    function showImg2(i){
       $("#idSlider2").stop(true,false).animate({left : -408*i},800);
       $("#idNum2 li")
        .eq(i).addClass("on")
        .siblings().removeClass("on");
    }
    </script>
    <div class="container" id="idTransformView">
    <ul class="slider" id="idSlider">
        <li><img src="images/tu_2.jpg"/></li>
        <li><img src="images/tu_2.jpg"/></li>
        <li><img src="images/tu_2.jpg"/></li>
    <li><img src="images/tu_2.jpg"/></li>
    <li><img src="images/tu_2.jpg"/></li>
    </ul>
    <ul class="num" id="idNum">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>
    <br/>
    <br/>
    <br/>
    <div class="container" id="idTransformView2">
    <ul class="slider slider2" id="idSlider2">
        <li><img src="images/tu_2.jpg"/></li>
        <li><img src="images/tu_2.jpg"/></li>
        <li><img src="images/tu_2.jpg"/></li>
    <li><img src="images/tu_2.jpg"/></li>
    <li><img src="images/tu_2.jpg"/></li>
    </ul>
    <ul class="num" id="idNum2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>
    </body>
    </html>
    不知道对你有用没用，有用拿分走人~~
      

  2.   

    自己写的，具体样式自己调 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
     <HTML>  
      <HEAD>  
       <style type="text/css">  
         #src li{  
             float:left;width:150px;border:solid 1px yellow;text-align:center;height:30px;
         }  
       </style>  
      </HEAD>     
      <BODY>  
         <div>  
             <div style="width:450px;POSITION: relative;OVERFLOW: hidden;height:50px;background:green;">  
                 <ul id="src" style="LEFT: 0px; WIDTH: 1500px; POSITION: relative;padding-top:10px;margin-left:0px;margin-top:0px;">  
                     <li>图片1</li>  
                     <li>图片2</li>  
                     <li>图片3</li>  
                     <li>图片4</li>  
                     <li>图片5</li>  
                     <li>图片6</li>  
                     <li>图片7</li>  
                     <li>图片8</li>  
                     <li>图片9</li>  
                     <li>图片10</li>  
                 </ul>  
             </div>  
         </div>  
      </BODY>  
      <script language="javascript" >  
          var count=0;  
          var flag = true;  
          var ulIns = document.getElementById("src");  
          function resetPic(){  
             if(count == 0){  
                 flag = true;  
             }  
             if(count >=7){  
                 flag = false;  
             }    
             if(flag){  
                 count = count+1;  
             }else{  
                 count=0;  
             }          
             var val = '-'+count*150+'px';  
             //alert(val);  
             ulIns.style.left= val;  
          }  
          var intv = setInterval(function (){resetPic();},1000);  
          ulIns.onmouseover=function (){clearInterval(intv)};  
          ulIns.onmouseout=function (){intv = setInterval(function (){resetPic();},1000);};  
       </script>  
     </HTML>