js写轮播图，鼠标移入轮播图停止，鼠标移出轮播图继续

最新推荐文章于 2023-12-17 20:26:26 发布

懒啦

最新推荐文章于 2023-12-17 20:26:26 发布

阅读量5.9k

点赞数 6

文章标签： javascript css3 css

本文链接：https://blog.csdn.net/qq_47648083/article/details/122407204

版权

要求：1、点击按钮，切换图片；
　　　2、图片能够自动轮播；
　　 3、鼠标移入，轮播停止；移出继续轮播；
知识点：1、定时器：setInterval()；
　　　　2、鼠标移入事件：onmouseenter/onmouseover；
　　　　　鼠标移出事件：onmouseleave/onmouseout；
难点：假设轮播图轮播到第二张图片，此时点击第一张图片，我们想要的效果是鼠标移出后，图片轮播到第二张图片，到事实是轮播到第三张图片。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style type="text/css">
	#counter {
		width: 600px;
		height: 300px;
		position: relative;
		overflow: hidden;
	}

	#list {
		width: 3600px;
		height: 300px;
		position: absolute;
		z-index: 1;
	}

	#list img {
		width: 600px;
		height: 300px;
		float: left;
	}

	.arrow {
		position: absolute;
		top: 110px;
		text-decoration: none;
		z-index: 2;
		display: none;
		width: 40px;
		height: 40px;
		font-size: 36px;
		font-weight: bold;
		line-height: 39px;
		text-align: center;
		color: #fff;
		background-color: rgba(0, 0, 0, 1);
		cursor: pointer;
	}

	.arrow:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	#counter:hover .arrow {
		display: block;
	}

	#pre {
		left: 20px;
	}

	#next {
		right: 20px;
	}

	#list {
		transition: left 1s;
	}

	.list {
		transition: left 0.1s;
	}

	#buttons {
		position: absolute;
		height: 10px;
		width: 120px;
		left: 250px;
		bottom: 20px;
		z-index: 2;
	}

	#buttons span {
		border: 1px solid #FFFFFF;
		border-radius: 5px;
		float: left;
		width: 10px;
		height: 10px;
		background-color: #333;
		margin-right: 5px;
		cursor: pointer;
	}

	#buttons .on {
		background: orangered;
	}
</style>
<div id="counter">
	<div id="list" style="left:0px;">
		<!-- 设置初始偏移量为0px -->
		<img src="http://uploads.rayli.com.cn/2019/0415/thumb_280_280_1555322412781.png" alt="1">
		<img src="http://uploads.rayli.com.cn/2019/0415/thumb_280_280_1555322401710.png" alt="2">
		<img src="http://uploads.rayli.com.cn/2019/0415/thumb_280_280_1555322391906.png" alt="3">
		<img src="http://uploads.rayli.com.cn/2019/0415/thumb_280_280_1555322380169.png" alt="4">
		<img src="img/img5.jpg" alt="5">
		<img src="img/img6.jpg" alt="6">
	</div>
	<!-- 图片两边的左右点击切换图片按钮 -->
	<a href="javascript:;" id="pre" class="arrow">&lt;</a>
	<a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

<script type="text/javascript">
	var counter = document.getElementById("counter");
	var list = document.getElementById("list");
	var pre = document.getElementById("pre");
	var next = document.getElementById("next");
	var timer;

	//html与js结合式书写 : 变量名.style.left=数值
	var nextlist = parseInt(list.style.left);//接收偏移量的值
	// var index=1;
	// var buttons=document.getElementById("buttons").getElementById('span');

	//偏移量的改变
	function animals(offset) {
		var newlist = parseInt(list.style.left) + offset;//定义参数随时传递新的偏移量值
		list.style.left = newlist + 'px';//偏移量需要单位‘像素px’，否则计算机识别不出，图片将不会移动位置
		//到达最后一张时，点击右耳朵则返回到第一张
		if (newlist < -3001) {
			list.style.left = 0 + 'px';
			list.setAttribute('class', 'list');
		}
		//在第一张时，点左耳朵则返回到最后一张
		if (newlist > 0) {
			list.style.left = -3000 + 'px';
			list.setAttribute('class', 'list');
		}
	}
	// 点击左右耳朵触发函数
	pre.onclick = function () {
		animals(600)  //点击左边耳朵，图片往左移一张，偏移量加600
	}
	next.onclick = function () {
		animals(-600)   //点击右边耳朵，图片往右移一张，偏移量减600
	}
	// 开始定时器
	function start() {
		timer = setInterval(function () {
			next.onclick()
		}, 2000);
	}
	start();
	// 关闭定时器
	function stop() {
		clearInterval(timer);
	}
	// 鼠标移出时,开始定时器
	counter.onmouseleave = start;
	// 鼠标移入时,关闭定时器
	counter.onmouseenter = stop;
</script>

</html>

懒啦

关注

6
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
js写轮播图，鼠标移入轮播图停止，鼠标移出轮播图继续

要求：1、点击按钮，切换图片；　　　2、图片能够自动轮播；　　 3、鼠标移入，轮播停止；移出继续轮播；知识点：1、定时器：setInterval()；　　　　2、鼠标移入事件：onmouseenter/onmouseover；　　　　　鼠标移出事件：onmouseleave/onmouseout；难点：假设轮播图轮播到第二张图片，此时点击第一张图片，我们想要的效果是鼠标移出后，图片轮播到第二张图片，到事实是轮播到第三张图片。<!DOCTYPE html><html
复制链接

扫一扫