用JS实现图片切换、定时器、轮播图

最新推荐文章于 2024-06-17 15:29:34 发布
置顶 最新推荐文章于 2024-06-17 15:29:34 发布
阅读量8.8k 收藏 147
点赞数 26
分类专栏： javascript 文章标签： javascript 前端 图片切换 定时器 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DDL_lalala/article/details/100668409
版权

一. 图片切换

实现功能：

  1. 当点击“下一页”时，跳转到下一张图片；
  2. 当点击“上一页”时，跳转到上一张照片；
  3. 显示当前页数/总页数，如：2/6。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片切换</title>
		<style type="text/css">
			*{
				margin: 0;
				padding:0;
			}
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				text-align: center;
			}
		</style>
	
		<script type="text/javascript">
			window.onload = function(){
				var prev = document.getElementById('prev');
				var next = document.getElementById('next');
				var img = document.getElementsByTagName("img")[0];
				var imgArr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg","img/06.jpg"]
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				var info = document.getElementById("info");
				info.innerHTML = (index+1)+'/' + imgArr.length;	
				prev.onclick = function(){
					index--;
					if(index < 0){
						index = imgArr.length-1;
					}
					img.src = imgArr[index];
					info.innerHTML = (index+1)+'/' + imgArr.length;
				}
				next.onclick = function(){
					index++;
					if(index > imgArr.length-1){
						index = 0;
					}
					img.src = imgArr[index];
					info.innerHTML = (index+1)+'/' + imgArr.length;
				}
			}
		</script>
	</head>
	
	<body>
		<div id="outer">
			<img src="img/01.jpg" width="500px" alt="太子悦神"/>
			<p id="info"></p>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>

效果图：
**在这里插入图片描述**

二. 定时器

实现功能：

  1. 按下“开始”键后，图片自动进行切换；
  2. 按下“停止”键后，图片停止切换，并停留在当前页面。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
		<script type="text/javascript">
			window.onload = function(){
				var img = document.getElementById("img");
				var imgArr = ["img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg", "img/06.jpg"];
				var index = 0;
				var timer; 
				var btn1 = document.getElementById("btn1");
				btn1.onclick = function(){
					clearInterval(timer);
					timer = setInterval(function(){
						index ++;
						index = index % imgArr.length;
						img.src = imgArr[index];
					},1000);
				}
				var btn2 = document.getElementById("btn2");
				btn2.onclick = function(){
					clearInterval(timer);
				}
			}
		</script>
	</head>
	
	<body>
		<img src="img/01.jpg" id="img" style="width: 300px;"/><br />
		<button id="btn1">开始</button>
		<button id="btn2">停止</button>	
	</body>
</html>

效果图：
在这里插入图片描述

三. 轮播图

实现功能：

  1. 自动切换图片；
  2. 点击某一张图片时，可跳转到该图片。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			#outer{
				width: 520px;
				height: 350px;
				margin: 0 auto;
				/*background-color: #bfa;*/
				padding: 10px 0;
				position: relative;
				overflow: hidden;
			}
			
			#imgList{
				list-style: none;
				position: absolute; 
			}
			
			#imgList li{
				float: left;
				margin: 0 10px;
			}
			
			#navDiv{
				position: absolute;
				bottom: 15px;
			}
			#navDiv a{
				float: left;
				width: 15px;
				height: 15px;
				background-color: red;
				margin: 0 5px;
				opacity: 0.5;
				filter: alpha(opacity=50); 
			}

			#navDiv a:hover{
				background-color: black;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				imgList.style.width = 520*imgArr.length + "px";
				var navDiv = document.getElementById("navDiv");
				var outer =document.getElementById("outer");
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				var index = 0;
				var allA = document.getElementsByTagName("a");
				allA[index].style.backgroundColor = "black";
		
		/* 功能：点击超链接，切换到指定的图片*/
				function move(divobj, attr, target, speed, callback){
					var current = parseInt(getStyle(divobj,attr));
					if(current > target){
						speed = -speed;
					}		
					clearInterval(divobj.timer);	
					divobj.timer =  setInterval(function(){
						var oldValue = parseInt(getStyle(divobj,attr)) ;	
						var newValue = oldValue + speed;		
						if(speed<0 && newValue < target || speed>0 && newValue >target){
							newValue = target;
						}						
						divobj.style[attr] = newValue +"px";
						if(newValue == target){
							clearInterval(divobj.timer);
							callback && callback();
						}
					},30);					
				};
				
				function getStyle(obj,name){
					if(window.getComputedStyle){
						return getComputedStyle(obj,null)[name];						
					}else{
						return obj.currentStyle[name];						
					}
				}
			
				for(var i=0; i<allA.length; i++){				
					allA[i].num = i;		
					allA[i].onclick = function(){			
						clearInterval(timer);
						index = this.num;
						setA();	
						move(imgList, "left", -520*index , 20 , function(){
							autoChange();					
						});	
					}
				}	
				autoChange();
				
				function setA(){	
					if(index >= imgArr.length - 1){
						index = 0;   //则将index设置为0
						imgList.style.left = 0;
					}
					for(var i=0; i<allA.length; i++){
						allA[i].style.backgroundColor = "";
					}
					allA[index].style.backgroundColor = "black";
				}
				var timer;
				
			//创建一个函数，用来定时去切换图片			
				function autoChange(){	
					timer = setInterval(function(){
						index++;
						index %= imgArr.length;		
						move(imgList, "left", -520*index , 20 , function(){
							setA();
						})
					},2000);
				}	
			}
		</script>
	</head>
	
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="img/01.jpg"/></li>
				<li><img src="img/02.jpg"/></li>
				<li><img src="img/03.jpg"/></li>
				<li><img src="img/04.jpg"/></li>
				<li><img src="img/05.jpg"/></li>
				<li><img src="img/06.jpg"/></li>
				<li><img src="img/01.jpg"/></li>
			</ul>

			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>	
	</body>
</html>

效果图：
在这里插入图片描述

DDL_lalala
关注
  • 26
    点赞
  • 踩
  • 147
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript轮播图（定时器自动轮播，点击按钮切换图片）
Yueqin0512的博客
10-08 1769
效果（在框内实现图片的轮播，点击小方框跳转图片）： html代码： <!-- 设置外部div,来作为大的容器 --> <div id="outer"> <!-- 创建ul，放置图片 --> <ul id="imgList"> <li><img src="lbimg/1.png" alt=""></li> <li><img src="lbimg/2.png"
原生javascript实现一个轮播图(倒计时,自动翻页)
shuai_ge_feng的博客
07-11 1340
javascript实现一个轮播图 倒计时 自动翻页html和js代码css 代码 html和js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/banner2.css" rel="stylesheet"/> <script> window.addEventLi
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 432
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
javascript学习之利用定时器实现图片的自动切换和关闭功能
Ibelievesunshine的博客
06-19 4121
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;
JavaScript,利用定时器实现图片的切换
weixin_43228946的博客
08-22 811
JavaScript,利用定时器实现图片的切换
JavaScript使用定时器实现图片轮播
weixin_44788220的博客
07-09 1365
JavaScript使用定时器实现图片轮播
js 定时器 setInterval(图片的自动变换)
m0_52946104的博客
09-21 1084
js如何实现动态图的变换
js实现轮播图效果 纯js实现图片自动切换
10-14
在这个实例中，我们将详细探讨如何使用纯JavaScript实现一个功能完备的轮播图，包括图片自动切换、鼠标悬停暂停、鼠标离开恢复播放以及点击导航小圆圈切换图片。 首先，我们需要在HTML中设置基本结构。创建一个包含...
javascript实现点击按钮切换轮播图功能
10-14
然后，我们用JavaScript编写逻辑来处理图片切换。主要包括以下几个核心步骤： 1. 初始化变量：定义当前显示的图片索引，如`var currentIndex = 0`。 2. 事件监听：为“上一张”和“下一张”按钮添加点击事件监听器...
原生js实现图片层叠轮播切换效果
11-24
在本文中，我们将探讨如何使用原生JavaScript实现一个图片层叠轮播切换的效果。这个功能通常用于网站的焦点图展示，能够吸引用户的注意力并提供视觉上的动态体验。以下是实现这一效果的关键知识点： 1. **HTML 结构...
js实现适合新闻类图片的轮播效果
10-20
轮播图是网页设计中常见的一种元素，用于展示多张图片或内容，通常以自动播放或用户交互的方式进行切换。这种效果可以增加网站的视觉吸引力，同时有效地利用有限的空间展示更多信息。 首先，我们看到HTML结构，包含...
漂亮的图片轮播效果（带暂停按钮控制）
03-02
漂亮的图片轮播效果（带暂停按钮控制），漂亮美观，很适合放在网站内展示图片
原生js图片轮播切换代码
06-24
本项目名为“原生js图片轮播切换代码”，它利用JavaScript的原生功能来实现图片的自动轮播以及通过标题和索引按钮进行手动控制。下面将详细介绍这个项目中的关键知识点。 1. **原生JavaScript**： - 原生...
轮播图（JavaScript定时器）
『愚』的博客
11-13 3895
我们在很多网站经常看到的轮播图,基本都有如下功能： 1.图片间隔一定时间自动切换。 2.可以点击下面的图片序号手动切换。 3.鼠标停留在图片上时停止轮播。 先上效果图： 自动轮播功能： 手动切换功能： 悬停停止功能： 完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0;
js小案例-轮播图（定时器）
Ass12454548的博客
02-03 1856
找几张你喜欢的图片.新建一个HTML页面.给一个div把img放进去加上第一张图片.在div元素的下面新建一个script标签添加效果:这里因为我们要做轮播图，所以我们用定时器定义一个定时器：每1s切换一张图片，一共四张图片,在定时器内声明函数,这里需要定义一个变量 index用来接受图片，把图片的路径赋值给图片的src值，图片每变化一次，我们让 index自增，这里做一个判断当 index 自增到4时，让 index 等于0，这样就可以一直不停地变化下去，达到轮播的效果。
JS循环定时器之轮播图案例
Java技术
07-12 626
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <script type="text/javascript"> var count = 0; function run() { var...
定时器轮播图
ddlovebaby的博客
04-02 710
定时器轮播图 1.动态封装函数 // 如果样式的代码在style的标签中设置, 外面是获取不到的 //获取div当前的位置 console.log(my$(“dv”).offsetLeft);// 数字类型 没有px //点击按钮移动到400px , 每过20毫秒移动10px my$("btn").onclick = function () { ...
js计时器实现图片的无缝轮播和简单的图片切换轮播
我的博客
08-14 1498
案例1： 横轴轮播 功能：四张图片可实现横轴轮播，且当鼠标移到图片上时，暂停。当移出时，继续轮播 思想： 方法①：将两个完全一样的div（分别放置四张图片）放到一个足够宽（可以容纳下两个div）的div(方便起见，交div1)中，外层div的父容器设置超出部分隐藏，对div1绑定一个计时器，每10ms让滚动条向右滚动1px(scrollLeft+=speed)。当滚动到两个子div的交界处时...
左右焦点轮播图/幻灯片
dcw43465的博客
03-21 138
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <s...
循环定时器轮播五张不同的图片相关代码实现
05-28
以下是一个使用 JavaScript 实现循环定时器轮播五张不同图片的示例代码： HTML 代码： ```html <div class="slideshow-container"> <div class="slideshow-images"> <img src="img/image1.jpg" alt="Image 1"> <img src="img/image2.jpg" alt="Image 2"> <img src="img/image3.jpg" alt="Image 3"> <img src="img/image4.jpg" alt="Image 4"> <img src="img/image5.jpg" alt="Image 5"> </div> <a class="prev">❮</a> <a class="next">❯</a> </div> ``` CSS 代码： ```css .slideshow-container { position: relative; margin: auto; width: 80%; height: 400px; } .slideshow-images { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slideshow-images img { width: 100%; height: 100%; object-fit: cover; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: bold; padding: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; user-select: none; } .prev { left: 0; } .next { right: 0; } ``` JavaScript 代码： ```js const images = document.querySelectorAll('.slideshow-images img'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentIndex = 0; // 定义切换图片的函数 function showImage(index) { images.forEach(image => { image.style.display = 'none'; }); images[index].style.display = 'block'; currentIndex = index; } // 切换到下一张图片 function nextImage() { currentIndex++; if (currentIndex >= images.length) { currentIndex = 0; } showImage(currentIndex); } // 切换到上一张图片 function prevImage() { currentIndex--; if (currentIndex < 0) { currentIndex = images.length - 1; } showImage(currentIndex); } // 定义定时器，每隔 3 秒切换一次图片 let timer = setInterval(nextImage, 3000); // 当用户鼠标悬停在图片上时，暂停定时器 images.forEach(image => { image.addEventListener('mouseover', () => { clearInterval(timer); }); }); // 当用户鼠标移开图片时，重新启动定时器 images.forEach(image => { image.addEventListener('mouseout', () => { timer = setInterval(nextImage, 3000); }); }); // 当用户点击左右箭头时，切换到上一张或下一张图片 prevBtn.addEventListener('click', prevImage); nextBtn.addEventListener('click', nextImage); ``` 需要注意的是，上述代码中的图片路径和容器宽度、高度等样式需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值