jquery 图片轮播----手写

<style>
li{list-style-type:none ;
   display:inline;
    width:90px; 
	height:160px;
	float:left; 
	
	}
.pic-all{ width:100px;
 height:180px;
  position:relative;
   overflow:hidden;
   margin-left:200px;
  }	
  
ul{ position:absolute;
   left:0; 
   top:0; 
   width:310px;
   }

</style>

<script>
var imgindex=0;
var imgindex1=0;
/*$(document).ready(function(){
$("#pic").click(function(){
  changeimg();
  });  
  
});*/

setInterval("changeimg()", 1000);
setInterval("changeimg1()", 2000);

function changeimg()
{

 imgindex++;
  if(imgindex==0)
  {
  $("ul").stop().animate({left:"0px"});
  }
  if(imgindex==1)
  {
  $("ul").stop().animate({left:"-150px"});
  }
  
  if(imgindex==2)
  {
  $("ul").stop().animate({left:"-300px"});
  }
  if(imgindex==2)
  {
  imgindex=-1;
  }
  

}

function changeimg1()
{
  imgindex1++;
  if(imgindex1==0)
  {
    $("#imga").attr("src", "images/$F2[P67(QAUOCZ810C)YHRX.png"); 
  }
  if(imgindex1==1)
  {
  $("#imga").attr("src", "images/T1_8YvBKJT1RXrhCrK.jpg"); 
  }
  
  if(imgindex1==2)
  {
  $("#imga").attr("src", "images/T1a3DvB7hv1RXrhCrK!150x150.jpg"); 
  }
  if(imgindex1==2)
  {
  imgindex1=-1;
  }

}



</script>	
<body>
<div class="pic-all">
<ul>
<li ><img src="images/$F2[P67(QAUOCZ810C)YHRX.png"/></li>
<li ><img src="images/T1_8YvBKJT1RXrhCrK.jpg"/></li>
<li ><img src="images/T1a3DvB7hv1RXrhCrK!150x150.jpg"/></li>
</ul>
</div>
<br />
<!--<button id="pic" style="width:100px; height:100px;">按钮</button>-->
<img id="imga" src="images/$F2[P67(QAUOCZ810C)YHRX.png" />



</body>

  

posted @ 2016-03-16 23:12  周菜菜  阅读(340)  评论(0编辑  收藏  举报