js特效之图片切换
2017-05-13 14:13
309 查看
简单的js特效之图片切换,附源代码
1.动态效果截图
2.图片切换的js代码:
<!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" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>js之图片切换</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> div{ border:1px solid red; width:400px; } div ul{ float:right; } ul li{ list-style:none; border:1px solid red; width:30px; height:30px; margin-top:15px; margin-right:25px; text-align:center; line-height:30px; } </style> <script type="text/javascript"> window.onload=init;//页面加载完成后调用init方法 var i=1; var timer;//定时器的名称 //初始化操作(页面加载完成后执行) function init(){ //timer=window.setInterval("changeImg();",1000); startImg(); //设置第一张图片对应的li标签的背景色 var li=document.getElementById("li1"); li.style.background="orange"; } //切换图片 function changeImg(){ i++; if(i>5){ i=1; } var img=document.getElementById("img"); img.src="images/"+i+".jpg"; clearLiColor();//清除所有li标签的背景色 var li=document.getElementById("li"+i); li.style.background="orange"; } //开始图片切换 function startImg(){ timer=window.setInterval("changeImg();",1000); } //停止图片切换 function stopImg(){ window.clearInterval(timer); } //鼠标放到li标签显示对应图片 function stopImgBtn(liBtn){ var img=document.getElementById("img"); img.src="images/"+liBtn.innerText+".jpg"; window.clearInterval(timer); clearLiColor();//清除所有li标签的背景色 liBtn.style.background="orange"; } //鼠标离开li标签继续切换图片 function startImgBtn(n){ i=n; startImg(); } //清除所有li标签背景颜色 function clearLiColor(){ var j; for (j=1; j<=5 ; j++ ){ var li=document.getElementById("li"+j); li.style.background="white"; } } </script> </head> <body> <div id="div1"> <image id="img" src="images/1.jpg" onmouseover="stopImg();" onmouseout="startImg();"/> <ul> <li id="li1" onmouseover="stopImgBtn(this);" onmouseout="startImgBtn(1);">1</li> <li id="li2" onmouseover="stopImgBtn(this);" onmouseout="startImgBtn(2);">2</li> <li id="li3" onmouseover="stopImgBtn(this);" onmouseout="startImgBtn(3);">3</li> <li id="li4" onmouseover="stopImgBtn(this);" onmouseout="startImgBtn(4);">4</li> <li id="li5" onmouseover="stopImgBtn(this);" onmouseout="startImgBtn(5);">5</li> </ul> </div> </body> </html>
相关文章推荐
- Js图片特效:图片幻灯片切换
- 带左右箭头切换的自动滚动图片JS特效
- js实现图片和链接文字同步切换特效的方法
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 滚动图片切换连播(JavaScript特效 | JS特效源代码)
- Flash和JS实现的图片幻灯片切换特效
- js实现图片和链接文字同步切换特效的方法
- 用html+css+js实现的一个简单的图片切换特效
- JS图片自动和可控的轮播切换特效
- 常用首页JS图片切换特效
- 利用JS进行图片的切换即特效展示图片
- 只有几句的js图片切换特效赏析
- JS图片自动和可控的轮播切换特效
- 非常漂亮的JS+CSS图片幻灯切换特效
- 17种js图片切换特效
- (js特效) js代码实现图片切换
- JS图片滤镜 焦点图片自动切换显示效果丨芯晴网页特效
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 图文列表和图片列表JS切换特效代码
- js图片模糊切换显示特效的方法