用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

图片切换功能代码

2016-12-21 作者: lijinbo举报

[javascript]代码库

<style type="text/css">
	#picture{
	 width:400px;
	 height:300px;
	}
	img{
	 width:300px;
	 height:200px;
	}
	ul{
	  width:60px;
	 float:right;
	 list-style:none; 
	}
	ul li{
	 width:20px;
	 height:20px;
	 border:1px solid #000;
	 margin-top:5px;
	 text-align:center;
	}
	.bg{
	 background:"red";
	}
	</style>
	<script type="text/javascript">
	  window.onload=init;
	  var timer;
	    var i=1;
	  function init(){
	    var objli1=document.getElementsByTagName("li")[0];
		 
		objli1.style.background="red";
		
	    var objul=document.getElementById('tupian');
		 var lis=objul.getElementsByTagName('li');
		 for(var n=0;n<lis.length;n++){
		   lis[n].index=n;
		   lis[n].onmouseover=function(){
		     ys();
		     this.style.background="red";
		     var j=this.index+1;
			 //alert(j);
			 var obj=document.getElementById("pic");
		  	obj.src="/images/0"+j+".jpg";
		   window.clearInterval(timer);
		    i=j;
		   }
		   lis[n].onmouseout=function(){
		      this.style.background="";
		      timer=window.setInterval(tupian,1000);
		   }
		 }
	    timer=window.setInterval(tupian,1000);	
	  }
	  function tupian(){
		  i++;
		 if(i>6){
		 i=1;
		 }
		 var obj=document.getElementById("pic");
		  obj.src="/images/0"+i+".jpg";
		  ys();
		  var yanse=document.getElementsByTagName("li")[i-1];
		  yanse.style.background="red";
		}
	  function ys(){
	     var objul=document.getElementById('tupian');
		 var lis=objul.getElementsByTagName('li');
		 for(var n=0;n<lis.length;n++){
		   lis[n].style.background="";
		 }
	  }	
	  function tostop(){
	    window.clearInterval(timer);
	  }
	  function tostart(){
	    timer=window.setInterval(tupian,1000);
	  }
	  function selectpic(n){
	    var m=n.innerHTML;
		var obj=document.getElementById("pic");
		  obj.src="/images/0"+m+".jpg";
		   window.clearInterval(timer);
	  }
	</script>
</head>
<body>
   <div id="picture">
	 <img id="pic" src="\images\01.jpg" alt="" onmouseover="tostop()" onmouseout="tostart()"/>
     <ul id="tupian">
     	<li>1</li>
     	<li>2</li>
     	<li>3</li>
     	<li>4</li>
     	<li>5</li>
     	<li>6</li>
     </ul>
	 </div>
</body>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...