js特效之图片切换

最新推荐文章于 2021-06-03 05:20:49 发布

muziqi6688

最新推荐文章于 2021-06-03 05:20:49 发布

阅读量656

点赞数 1

分类专栏： JavaScript 文章标签： js特效 js图片切换

本文链接：https://blog.csdn.net/muziqi6688/article/details/71805514

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单的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.οnlοad=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" οnmοuseοver="stopImg();" οnmοuseοut="startImg();"/>
		<ul>
			<li id="li1" οnmοuseοver="stopImgBtn(this);" οnmοuseοut="startImgBtn(1);">1</li>
			<li id="li2" οnmοuseοver="stopImgBtn(this);" οnmοuseοut="startImgBtn(2);">2</li>
			<li id="li3" οnmοuseοver="stopImgBtn(this);" οnmοuseοut="startImgBtn(3);">3</li>
			<li id="li4" οnmοuseοver="stopImgBtn(this);" οnmοuseοut="startImgBtn(4);">4</li>
			<li id="li5" οnmοuseοver="stopImgBtn(this);" οnmοuseοut="startImgBtn(5);">5</li>	
		</ul>
	</div>
</body>
</html>