前端js实现轮播图

落日映苍穹つ 2023-02-16 15:30 42阅读 0赞

根据学到的javaScript简单写了个轮播图  
前端代码

<body onload="onload_img()">
    		<div id="id">
    			<img src="img/dc.jpg" id="img" />
    		</div>
    		<ul>
    			<li class="li" onclick="changeImg('img/dc.jpg',0)">1</li>
    			<li class="li" onclick="changeImg('img/dq.jpg',1)">2</li>
    			<li class="li" onclick="changeImg('img/dj.jpg',2)">3</li>
    		</ul>
    		<script src="js/lunbo.js" type="text/javascript"></script>
    	</body>

js代码

//获取图片
    var img = document.getElementById("img");
    //获取li节点
    var lis = document.getElementsByClassName("li");
    //开始加载
    function onload_img(){ 
    	setInterval(dong_img,"2000");
    }
    //设下标初始值
    var index=0;
    lis[index].style.backgroundColor = "#FF0000";
    function dong_img(){ 
    	//图片封装成一个数组
    	var img_array = ["img/dc.jpg","img/dq.jpg","img/dj.jpg"];
    	//把上一个li的背景颜色还原
    	lis[index].style.backgroundColor = "";
    	//下标加一
    	index = (index+1)%img_array.length;
    	//li加背景颜色
    	lis[index].style.backgroundColor = "#FF0000";
    	//变换图片
    	img.setAttribute("src",img_array[index]);
    }
    //当点击li时执行
    function changeImg(path,num){ 
    	//把上一个li的背景颜色还原
    	lis[index].style.backgroundColor = "";
    	//当前li添加背景色
    	lis[num].style.backgroundColor = "#FF0000";
    	//下标赋值下次循环使用
    	index = num;
    	//变换图片
    	img.setAttribute("src",path);
    }

css样式

<style type="text/css">
    		
    		*{ 
    			margin: 0px;
    			padding: 0px;;
    		}
    		#id{ 
    			width: 400px;
    			height: 200px;
    			
    			position: absolute ;
    		}
    		img{ 
    			
    			width: 400px;
    			height: 200px;
    		}
    		ul{ 
    			color: #FFFFFF;
    			font-weight: bold;
    			
    			position: absolute;
    			top: 180px;
    			left: 310px;
    			list-style-type: none;
    			text-align: center;
    		}
    		ul li{ 
    			
    			float: left;
    			width:20px;
    			height: 20px;
    			border: 1px solid #ffffff;
    			border-radius: 50%;
    			margin-right:10px ;
    			line-height: 20px;
    		}
    		ul li:hover { 
    			background-color: red;
    		}
    	</style>

css可根据自己喜欢的格式调整

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现轮播图

<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Ty

港控/mmm°/ 2023年06月05日 11:19/ 0 赞/ 63 阅读

相关 js实现轮播图

js实现轮播图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

旧城等待，/ 2023年06月02日 07:55/ 0 赞/ 26 阅读

相关前端js实现轮播图

根据学到的javaScript简单写了个轮播图前端代码 <body onload="onload_img()"> <div id="id">

落日映苍穹つ/ 2023年02月16日 15:30/ 0 赞/ 43 阅读

相关 js定时器实现轮播图

js定时器实现轮播图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

深藏阁楼爱情的钟/ 2022年12月25日 11:59/ 0 赞/ 255 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 446 阅读

相关原生JS实现轮播图

原生JS实现轮播图 js实现轮播图，我经历了一下几个步骤： 1. 把静态界面写出来 2. 添加切换上一张下一张的箭头(为了省事，直接用的`<`和`>`…) 3.

迈不过友情╰/ 2022年06月08日 23:06/ 0 赞/ 495 阅读

相关 JS实现轮播图效果

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

深藏阁楼爱情的钟/ 2022年03月17日 14:14/ 0 赞/ 536 阅读

相关 js实现图片轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2022年01月07日 10:21/ 0 赞/ 464 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 811 阅读

相关 js实现轮播图功能

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

素颜马尾好姑娘i/ 2021年09月23日 06:10/ 0 赞/ 461 阅读