js特效之图片切换

来源：互联网发布：python中iteritems 编辑：程序博客网时间：2024/05/18 11:45
简单的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>
0 0