滚动图片

 

css{

.ouul1 li{width:128px; float:left;}
.ouul1{width:10000px; position:absolute; left:0; top:0;}
.ouul1 img{width:100px; height:130px; overflow:hidden;}

}

js{

$(document).ready(function(e) {
    djgd(4,".ouul1 li",128,1500,400,".ouul1",".left_bg",".right_bg");//移动条件|移动个数|每次移动的距离|多久移动一次|移动速度|移动模块|左移动|右移动
});
//点击滚动
function djgd(tiaojian,ydgeshu,yidonjuli,jiange,sudu,mokuai,left_bg,right_bg){
 var ydgs = $(ydgeshu).length;
 var cisu = 0;
 var juliku = 0;
 var shifouyidong = 0;
 $(ydgeshu).hover(function(){
  shifouyidong = 1; 
 },function(){
  shifouyidong = 0; 
 });
 $(left_bg).click(function(){
  shifouyidong = 1;
  if(cisu<ydgs-tiaojian){
   cisu+=1;
  }else{
   cisu=0;
  }
  juliku = cisu*yidonjuli;
  $(mokuai).animate({left:-juliku},sudu,function(){
   setTimeout(function(){
    shifouyidong = 0; 
   },jiange); 
  });
 });
 $(right_bg).click(function(){
  shifouyidong = 1;
  if(cisu>0){
   cisu-=1; 
  }else{
   cisu=ydgs-tiaojian; 
  }
  juliku = cisu*yidonjuli;
  $(mokuai).animate({left:-juliku},sudu,function(){
   setTimeout(function(){
    shifouyidong = 0; 
   },jiange); 
  }); 
 });
 if(ydgs>tiaojian){
  setInterval(function(){
   if(shifouyidong==0){
    if(cisu<ydgs-tiaojian){
    cisu+=1; 
    }else{
     cisu=0; 
    }
    juliku = cisu*yidonjuli;
    $(mokuai).animate({left:-juliku},sudu);  
   } 
  },jiange); 
 } 
}

 

 

 

 

<div class="oucon5top">
             <span class="left_bg">前</span>
                <span class="right_bg">后</span>
             <div class="oucong7">
                 <ul class="ouul1">
                     <li><a href="#"><img src="images/img1.jpg" /></a></li>
                        <li><a href="#"><img src="images/img2.jpg" /></a></li>
                        <li><a href="#"><img src="images/img3.jpg" /></a></li>
                        <li><a href="#"><img src="images/img4.jpg" /></a></li>
                        <li><a href="#"><img src="images/img4.jpg" /></a></li>
                        <li><a href="#"><img src="images/img4.jpg" /></a></li>
                        <li><a href="#"><img src="images/img4.jpg" /></a></li>
                    </ul>
                </div>
            </div>

}