JS基础知识点（9）——轮播的实现

最新推荐文章于 2024-04-15 10:28:24 发布

张贺_

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量720

点赞数 1

分类专栏：学习笔记 js基础部分文章标签： javascript 轮播实现图片切换

本文链接：https://blog.csdn.net/weixin_41849462/article/details/80588016

版权

学习笔记同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

js基础部分

18 篇文章 3 订阅

订阅专栏

轮播效果及原理的分析：

1.定时器：反复性定时器；

2.页面加载完成之后才回去切换图片：onload事件；

3.鼠标放到图片上，图片停止切换；鼠标离开图片，图片继续切换（动起来）；

4.鼠标放到列表上，图片停止到对应的图片，列表标的背景颜色也要改变；

5.鼠标离开列表，图片继续自动切换，列表标背景颜色也自动切换；

第1步：通过定时器实现自动切换：

效果：

源码：

<script type="text/javascript">
	//页面加载完成之后让图片动起来
	window.onload = init;
	var i = 1;
	function init(){
		window.setInterval("tupian()",1000);
	}

	//让图片切换的函数
	function tupian(){
		//获取img对象
		var obj = document.getElementById("d1");
		i++;
		//自己写的，%6取余思想，略微绕完了
		//i = i%6;			
		//if (i == 0) 
		//	i++;
		//推荐写法：当溢出时，重新给i赋值为1；	
		if (i>5) {
			i = 1;
		}	
		obj.src = "images/"+i+".png";
	}
</script>

<body>
    <img id="d1" alt="images/1.png" src="images/1.png">
</body>

第2步：鼠标放图片上停止自动切换：

源码：

function stopTo(){
		window.clearInterval(timer);
	}
	//鼠标离开继续切换
	function starTo(){
		init();
	}
</script>

<body>
    <img id="d1" alt="images/1.png" src="images/1.png" οnmοuseοver="stopTo()" οnmοuseοut="starTo()">
</body>

第3步：增加对应标号，当鼠标悬浮在标号上时停止切换并显示出对应图片：

源码：

<style type="text/css">
	div{
		border: 1px solid red;
		width: 660px;
	}
	div ul{
		float: right;
	}
	ul li{
		list-style: none;
		border: 1px solid black;
		width: 18px;
		height: 22px;
		text-align: center;
		text-height: 22px;
	}
</style>

function tingtu(e){
		var obj = document.getElementById("d1");
		//obj.src = "images/1.png";
		var num = e.innerHTML;
		obj.src = "images/"+num+".png";
		window.clearInterval(timer);
	}

<body>
	<div>
		<img id="d1" src="images/1.png" οnmοuseοver="stopTo()" οnmοuseοut="starTo()">
		<ul>
			<li οnmοuseοver="tingtu(this)">1</li>
			<li οnmοuseοver="tingtu(this)">2</li>
			<li οnmοuseοver="tingtu(this)">3</li>
			<li οnmοuseοver="tingtu(this)">4</li>
			<li οnmοuseοver="tingtu(this)">5</li>
		</ul>
	</div>
    
</body>

第4步：鼠标离开li标签时，图片自动切换：

在li中添加onmouseout事件

需要注意的是：在上一步的停图时，我们需要将所停的图片记录下来，接下来继续依次切换，而不是直接在原有基础上进行切换；

第5步：鼠标停留li标签时，标签改变颜色：

首先获取所有的li标签，并把其背景颜色统一；在onmouseover时通过this将当前li背景颜色突出：

源码：

		for (var i = 1; i <= 5; i++) {
			var obj = document.getElementById("li"+i);
			obj.style.background = "white";
		}
		e.style.background = "orange";

第6步：当图片自动切换时，对应的标签改变背景颜色：

首先在切换时把所有的背景颜色统一，然后获取到当前切换的图片对应的li，进行背景色设置：

完整源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	div{
		border: 1px solid red;
		width: 660px;
	}
	div ul{
		float: right;
	}
	ul li{
		list-style: none;
		border: 1px solid black;
		width: 18px;
		height: 22px;
		text-align: center;
		text-height: 22px;
	}
</style>
<script type="text/javascript">
	//页面加载完成之后让图片动起来
	window.onload = init;
	var i = 1;
	var timer;
	function init(){
		var obj = document.getElementById("li1");
		obj.style.background = "orange";
		timer = window.setInterval("tupian()",500);
	}

	//让图片切换的函数
	function tupian(){
		//获取img对象
		var obj = document.getElementById("d1");
		i++;
		//自己写的，%6取余思想，略微绕完了
		//i = i%6;			
		//if (i == 0) 
		//	i++;
		//推荐写法：当溢出时，重新给i赋值为1；	
		if (i>5) {
			i = 1;
		}	
		obj.src = "images/"+i+".png";
		clearlicolor();
		var licolor = document.getElementById("li"+i);
		licolor.style.background = "orange";
	}

	//鼠标放上停止切换
	function stopTo(){
		window.clearInterval(timer);
	}
	//鼠标离开继续切换
	function starTo(){
		timer = window.setInterval("tupian()",500);

	}
	function tingtu(e){
		var obj = document.getElementById("d1");
		//obj.src = "images/1.png";
		var num = e.innerHTML;
		i = num;
		obj.src = "images/"+num+".png";
		clearlicolor();
		e.style.background = "orange";
		window.clearInterval(timer);
	}

	//清除所有标签的背景颜色
	function clearlicolor(){
		for (var i = 1; i <= 5; i++) {
			var objli = document.getElementById("li"+i);
			objli.style.background = "white";
		}
	}

</script>
</head>
<body>
	<div>
		<img id="d1" src="images/1.png" οnmοuseοver="stopTo()" οnmοuseοut="starTo()">
		<ul>
			<li id="li1" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">1</li>
			<li id="li2" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">2</li>
			<li id="li3" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">3</li>
			<li id="li4" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">4</li>
			<li id="li5" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">5</li>
		</ul>
	</div>
    
</body>
</html>

效果图：

注：仅供个人学习使用，转载请注明出处

张贺_

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识点（9）——轮播的实现

轮播效果及原理的分析：1.定时器：反复性定时器；2.页面加载完成之后才回去切换图片：onload事件；3.鼠标放到图片上，图片停止切换；鼠标离开图片，图片继续切换（动起来）；4.鼠标放到列表上，图片停止到对应的图片，列表标的背景颜色也要改变；5.鼠标离开列表，图片继续自动切换，列表标背景颜色也自动切换；...
复制链接

扫一扫