JS实现轮播图效果

最新推荐文章于 2023-09-17 14:12:21 发布

路人甲小码

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量438

点赞数 4

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44111864/article/details/87908343

版权

javascript 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

一、用JS实现轮播图,简单分为五大步，具体看代码块注释
1.自动播放
2.鼠标进入停止播放
3.鼠标离开继续播放
4.点豆豆跳转到对应图片
5.给图片添加超链接
二、示例图
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单的轮播图</title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		#box{
			width:500px;
			height:300px;
			position:relative;
			top:150px;
			left:400px;
			/*border:1px solid red;*/
		}
		#ulId{
			list-style:none;
			position:absolute;
			right:15px;
			bottom:10px;
			z-index:3;
		}
		#ulId li{
			width:10px;
			height:10px;
			border-radius:50%;
			background:greenyellow;
			margin:0 5px;
			float:left;
			z-index:3;
		}
		#ulId li:nth-child(1){
			background:green;
		}
		#box img{
			width:100%;
			height:100%;
			position:absolute;
			left:0;
			top:0;
			z-index:1;
		}
		#box img:nth-child(1){
			z-index:2;
		}
	</style>
</head>
<body>
	<div id="box">
		<img src="img/1.jpg"/>
		<img src="img/2.jpg"/>
		<img src="img/3.png"/>
		<img src="img/4.jpg"/>
		<img src="img/5.jpg"/>
		<img src="img/6.jpg"/>
		<img src="img/7.jpg"/>
		<img src="img/8.jpg"/>
		<img src="img/9.jpg"/>
		<ul id="ulId">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript">
	function $(str){
	if(str.startsWith("#")){
		return document.getElementById(str.substring(1));
	}else if(str.startsWith(".")){
		return document.getElementsByClassName(str.substring(1));
	}else{
		return document.getElementsByTagName(str);
	}
}
	//1.自动播放
	let currIndex=0;
	let myTime;
	function autoPlay(){
		//给所有li添加自定义属性
		let liDoms=$("li");
		for(let i=0;i<liDoms.length;i++){
			liDoms[i].setAttribute("index",i);
		}
		//一、数据处理
		myTime=setInterval(()=>{
			//1.改变数据
			currIndex++;
			//2.边界处理
		if(currIndex>=9){
			currIndex=0;
		}
		//二、改变样式
		//1.改图片
		//让所有img的zIndex为1
			for(let i=0;i<$("img").length;i++){
			$("img")[i].style.zIndex=1;
		}
		//让当前img的zIndex为2
		$("img")[currIndex].style.zIndex=2;
		//2.改豆豆
		//让所有li的background为greenyellow
			let liDoms=$("#ulId").children;
			for(let i=0;i<liDoms.length;i++){
				liDoms[i].style.background="greenyellow";
		}
		//让当前li的background为green
		liDoms[currIndex].style.background="green";
		},1000);
	}
	//2.停止播放
	function stopPlay(){
		window.clearInterval(myTime);
	}
	//3.继续播放
	//4.点豆豆改变图片
	function goImg(index){
		currIndex=index;
		if(currIndex<0 || currIndex>9){
			currIndex=0;
		}
		//二、改变样式
		//1.改图片
		//让所有img的zIndex为1
			for(let i=0;i<$("img").length;i++){
			$("img")[i].style.zIndex=1;
		}
		//让当前img的zIndex为2
		$("img")[currIndex].style.zIndex=2;
		//2.改豆豆
		//让所有li的background为greenyellow
			let liDoms=$("#ulId").children;
			for(let i=0;i<liDoms.length;i++){
				liDoms[i].style.background="greenyellow";
		}
		//让当前li的background为green
		liDoms[currIndex].style.background="green";
	}
	//5.超链接
	window.function(){
		//1.自动播放
		autoPlay();
		//2.停止播放
		$("#box").onmouseover=function(){
			stopPlay();
		}
		//3.继续播放
		$("#box").onmouseout=function(){
			autoPlay();
		}
		//4.点豆豆改变图片
		let liDoms=$("#ulId").children;
		for(let i=0;i<liDoms.length;i++){
			liDoms[i].onclick=function(){
				goImg(this.getAttribute("index"));
			}
		}
	}
</script>

路人甲小码

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS实现轮播图效果

一、用JS实现轮播图,简单分为五大步，具体看代码块注释1.自动播放2.鼠标进入停止播放3.鼠标离开继续播放4.点豆豆跳转到对应图片5.给图片添加超链接二、示例图&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单的轮播图
复制链接

扫一扫