js——点击切换图片，未实现无缝连接（定时器）

最新推荐文章于 2023-04-10 08:48:30 发布
最新推荐文章于 2023-04-10 08:48:30 发布
阅读量112 收藏
点赞数
分类专栏： web前端笔记总结 文章标签： 图片切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43151638/article/details/102630892
版权

上下切换：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		li{
			list-style: none;
		}
		.box{
			width: 500px;
			height: 400px;
			margin: 0px auto;
			position: relative;
			border: 5px solid #000000;
			overflow: hidden;
		}
		.list{
			width: 500px;
			height: 400%;
			position: absolute;
			top:0px;
			left:0px;
			transition: 1s;
		}
		img{
			width: 500px;
			height:400px;
			vertical-align: top;
		}
		.btn{
			position: relative;
			top:-100px;
			left: 10%;
		}
		.ospan{
			width:100px;
			height: 20px;
			position: absolute;
			top: 370px;
			left:46%;
		}
		.ospan span{
			width:20px;
			height: 20px;
			float: left;
			border-radius: 50%;
			background: white;
			margin-right: 5px;
		}
		.ospan .active{
			background:red;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="list">
			<li><a href=""><img src="img/1.png" alt=""></a></li>
			<li><a href=""><img src="img/2.png" alt=""></a></li>
			<li><a href=""><img src="img/3.png" alt=""></a></li>
			<li><a href=""><img src="img/4.png" alt=""></a></li>
		</ul>
	</div>
	<div class="btn">
		<button type="button">上一张</button>
		<button type="button">下一张</button>
	</div>
	<div class="ospan">
		<span class="active"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<script type="text/javascript">
		//获取ul,整体移动
		var lists=document.querySelector('.list');
		//按钮
		var btns=document.querySelectorAll('.btn button');
		//可以图片数量
		var imgs=lists.querySelectorAll('li');
		var ospans=document.querySelectorAll('.ospan span');
		var num=0;
		var height=400;
		//上一张
		btns[0].onclick=function(){
			num++;
			num==1?num=-(imgs.length-1):num;
			lists.style.top=(num*height)+'px';
			//设置span样式
			for(var i=0;i<ospans.length;i++){
				ospans[i].className='';
			}
			ospans[-num].className='active';
		}
		//下一张
		btns[1].onclick=function(){
			num--;
			-num>(imgs.length-1)?num=0:num;
			lists.style.top=(num*height)+'px';
			//设置span样式
			for(var i=0;i<ospans.length;i++){
				ospans[i].className='';
			}
			ospans[-num].className='active';
		}
		//给span设置事件
		for(var i=0;i<ospans.length;i++){
			ospans[i].index=i;
			ospans[i].onmouseenter=function(){
				for(var i=0;i<ospans.length;i++){
					ospans[i].className='';
				}
				this.className='active';
				num=-(this.index);
				lists.style.top=(num*height)+'px';
			}
		}
	</script>
</body>
</html>

左右切换：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width:400px;
			height: 400px;
			margin: 0px auto;
			border: 1px solid #000000;
			position: relative;
			overflow: hidden;
		}
		.list{
			width: 1600px;
			height: 400px;
			position:absolute;
			transition: 1s;
			left: 0;
			top:0;
		}
		.box .list li{
			list-style: none;
			float: left;
		}
		img{
			width: 400px;
			height: 400px;
			vertical-align: top;
		}
		.ospan{
			width:100px;
			height: 20px;
			position: absolute;
			top: 370px;
			left:47%;
		}
		.ospan span{
			width:20px;
			height: 20px;
			float: left;
			border-radius: 50%;
			background: white;
			margin-right: 5px;
		}
		.ospan .active{
			background:red;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="list">
			<li>
				<a href="">
					<img src="img/1.png" alt="">
				</a>
			</li>
			<li>
				<a href="">
					<img src="img/2.png" alt="">
				</a>
			</li>
			<li>
				<a href="">
					<img src="img/3.png" alt="">
				</a>
			</li>
			<li>
				<a href="">
					<img src="img/4.png" alt="">
				</a>
			</li>
		</ul>
	</div>
	<div class="ospan">
		<span class="active"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="item" style="width:400px;line-height:50px;margin: 0px auto;text-align: center;background: pink;border: 1px solid #000000;">
		<button type="button">上一张</button>
		<button type="button">下一张</button>
	</div>
	
	<script type="text/javascript">
		var btn=document.querySelectorAll('button');
		var lists=document.querySelector('.list');
		var imgs=lists.querySelectorAll('li');
		var num=0;//定义一个变量num和每次移动的倍数建立联系
		//定义一个变量width和每次移动的定宽建立联系
		var width=400;
		//获取点点的标签
		var ospans=document.querySelectorAll('.ospan span');
		//上一张
		btn[0].onclick=function(){
			//图片向右移,left为正
			num++;
			//当num等于1时回到最后一张图片的倍数,限制num数值
			if(num==1){//==
				num=-(imgs.length-1);
				//0,-1,-2,-3
			}//可以用三目运算判断
			lists.style.left=(num*width)+'px';
			
			//设置span样式
			// var index=-num;
			for(var i=0;i<ospans.length;i++){
				ospans[i].className='';
			}
			ospans[-num].className='active';
		}
		//下一张
		btn[1].onclick=function(){
			//图片向右移,left为负
			num--;
			//当为超出图片的数量时无显示,所以当-num大于图片数量减一;给num赋值为初值
			if(-num>imgs.length-1){
				num=0;
			}
			lists.style.left=(num*width)+'px';
			//-num下标
			for(var i=0;i<ospans.length;i++){
				ospans[i].className='';
			}
			ospans[-num].className='active';
		}
		//设置span样式,事件
		for(var i=0;i<ospans.length;i++){
			//定义一个自定义变量
			ospans[i].index=i;
			//给span添加事件
			ospans[i].onmouseenter=function(){
				//遍历添加清除样式
				for(var i=0;i<ospans.length;i++){
					// ospans[i].style.background='white';
					ospans[i].className='';
				}
				//num和下标建立联系,移动,left为负变的加符号
				num=-(this.index);
				// this.style.background='red';
				this.className='active';
				//点击span切换图片
				lists.style.left=(num*width)+'px';
				
			}
		}
	</script>
</body>
</html>

包装了一小块函数：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width:400px;
			height: 400px;
			margin: 0px auto;
			border: 1px solid #000000;
			position: relative;
			overflow: hidden;
		}
		.list{
			width: 1600px;
			height: 400px;
			position:absolute;
			transition: 1s;
			left: 0;
			top:0;
		}
		.box .list li{
			list-style: none;
			float: left;
		}
		img{
			width: 400px;
			height: 400px;
			vertical-align: top;
		}
		.ospan{
			width:100px;
			height: 20px;
			position: absolute;
			top: 370px;
			left:47%;
		}
		.ospan span{
			width:20px;
			height: 20px;
			float: left;
			border-radius: 50%;
			background: white;
			margin-right: 5px;
		}
		.ospan .active{
			background:red;
		}
	</style>
</head>
<body>
	<!--
	var box=function(){
		console.log(1)
	}
	function fn(){
		console.log(2)
	}
	fn();
	-->
	<div class="box">
		<ul class="list">
			<li>
				<a href="">
					<img src="img/1.png" alt="">
				</a>
			</li>
			<li>
				<a href="">
					<img src="img/2.png" alt="">
				</a>
			</li>
			<li>
				<a href="">
					<img src="img/3.png" alt="">
				</a>
			</li>
			<li>
				<a href="">
					<img src="img/4.png" alt="">
				</a>
			</li>
		</ul>
	</div>
	<div class="ospan">
		<span class="active"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="item" style="width:400px;line-height:50px;margin: 0px auto;text-align: center;background: pink;border: 1px solid #000000;">
		<button type="button">上一张</button>
		<button type="button">下一张</button>
	</div>
	
	<script type="text/javascript">
		var btn=document.querySelectorAll('button');
		var lists=document.querySelector('.list');
		var imgs=lists.querySelectorAll('li');
		var num=0;//定义一个变量num和每次移动的倍数建立联系
		//定义一个变量width和每次移动的定宽建立联系
		var width=400;
		//获取点点的标签
		var ospans=document.querySelectorAll('.ospan span');
		//上一张
		btn[0].onclick=function(){
			//图片向右移,left为正
			num++;
			//当num等于1时回到最后一张图片的倍数,限制num数值
			if(num==1){//==
				num=-(imgs.length-1);
				//0,-1,-2,-3
			}//可以用三目运算判断
			lists.style.left=(num*width)+'px';
			
			//设置span样式
			// var index=-num;
			clearspan();
		}
		//下一张
		btn[1].onclick=function(){
			//图片向右移,left为负
			num--;
			//当为超出图片的数量时无显示,所以当-num大于图片数量减一;给num赋值为初值
			if(-num>imgs.length-1){
				num=0;
			}
			lists.style.left=(num*width)+'px';
			//-num下标
			clearspan();
		}
		//设置span样式,事件
		for(var i=0;i<ospans.length;i++){
			//定义一个自定义变量
			ospans[i].index=i;
			//给span添加事件
			ospans[i].onmouseenter=function(){
				//遍历添加清除样式
				for(var i=0;i<ospans.length;i++){
					// ospans[i].style.background='white';
					ospans[i].className='';
				}
				//num和下标建立联系,移动,left为负变的加符号
				num=-(this.index);
				// this.style.background='red';
				this.className='active';
				//点击span切换图片
				lists.style.left=(num*width)+'px';
				
			}
		}
		function clearspan(){
			for(var i=0;i<ospans.length;i++){
				ospans[i].className='';
			}
			ospans[-num].className='active';
		}
	</script>
</body>
</html>
资本理念
关注
专栏目录
前端实战：小实例2——滚动轮播图
weixin_43328954的博客
06-07 1768
前言 实现思路 用 div 封装轮播图，用 img 标签放置所有图片，图片均初始化为不可见（display : none） HTML + CSS + JavaScript
JavaScript基础学习笔记
qq_42436532的博客
04-10 901
JS基础 1.运算符 1.1 自增运算符 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 // 2. e = 12 ++e = 12 console.log(f); // 22 1.2 逻辑运算符 1.2.1 逻辑与 有假必假，两边都是true才返回true 对于数值和表达式： 语法： 表达式1 && 表达式2 如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 conso
javascript 实现点击超链接变换图片
08-10
javascript 实现点击超链接变换图片 javascript 实现点击超链接变换图片
JS 利用鼠标切换图片（无定时器）
qq_38318589的博客
08-10 1258
实现效果如下图，可以利用鼠标移动在对应的小点点上，或者点击左右两侧的箭头切换图片，并在图片的上方显示出图片的页数，下方显示出对应图片的标题。 全部代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
js计时器实现图片的无缝轮播和简单的图片切换轮播
我的博客
08-14 1527
案例1： 横轴轮播 功能：四张图片可实现横轴轮播，且当鼠标移到图片上时，暂停。当移出时，继续轮播 思想： 方法①：将两个完全一样的div（分别放置四张图片）放到一个足够宽（可以容纳下两个div）的div(方便起见，交div1)中，外层div的父容器设置超出部分隐藏，对div1绑定一个计时器，每10ms让滚动条向右滚动1px(scrollLeft+=speed)。当滚动到两个子div的交界处时...
js中图片无缝切换的两种方法
冰雪为融的博客
03-14 5448
第一种：只适应于可视区只有一个元素的时候，例如整屏切换效果。下面我写的是自适应屏幕宽度的轮播图实现步骤：1、屏幕自适应的处理：当屏幕大小大于1000的时候，让图片居中，解决办法是，用图片的宽度减去可视区的宽度，整体除以2，来实现图片的居中2、图片的轮播切换（此处，主要需要解决的问题是想办法是改变第一个元素的定位）当然我们都很清楚，实现图片的自动轮播切换，一定离不了的是定时器，下面我就写我的实现步骤...
js设置定时器（setInterval）并定时切换图片
丽啊丽宝的博客
09-11 5458
html代码 <img id="image" src="" alt="" srcset="" width="50px" height="50px"> js代码 var curIndex=0;//当前下标 var arr=new Array();//图片数组 arr[0]="https://i.52112.com/icon/jpg/256/201909...
原生JS带你手写高级无缝轮播图实战案例（超赞）
最新发布
weixin_59181738的博客
04-10 464
原生JS带你手写高级无缝轮播图案例（超赞），没有一句html，css代码
jQuery无缝轮播图代码
10-20
7. 边界条件处理：在轮播到最后一张图片时，代码会将图片列表的`left`属性设置为0，使得第一张图片显示在最前面，实现无缝连接；而轮播到第一张图片时，则调整`left`属性为负的（图片总数-1）*图片宽度，使得最后...
web前端JS（DOM）学习第三十一天
StarAh的博客
04-15 863
web前端JS（DOM）学习第三十一天
JavaScript进阶学习-webAPI（总结）
weixin_43294092的博客
04-16 1897
webAPI DOM 概念 JS分三个部分： ECMAScript标准：js的基本语法 DOM：Document object model —文档对象模型—操作页面的元素 BOM: Browser object model —>浏览器对象模型—操作的是浏览器 DOM文档对象模型 文档 把一个HTML文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象 XML 文件也可以看成是一个文...
web中js实现点击切换图片
qq_43399648的博客
05-18 4161
这个也是一种，底部带文字 用到了隐藏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; co...
js点击切换图片
style201904的博客
06-14 4136
<style type="text/css"> *{ margin: 0; padding: 0; } .content{ width: 390px; height: 300px; position: relative; margin: auto; overflow: hidden; } .imgCo...
js实现点击更换图片
热门推荐
莫小遇
06-17 1万+
看到很多技术大牛都在写技术博客，作为刚刚入职的一名应届生，我想这是一种好习惯。大概在一个月前有了这样的想法，但是却一直没有实施，说起来真惭愧。今天终于决定发一篇文章，作为一个新的开始。如果这文章有幸被读者读到，我倍感荣幸，谢谢和您的交流。      刚刚入职Web前端开发，还有很多东西需要学习，这段时间，我主要学习javaScript脚本技术，从零开始！                  
项目答辩总结
qq_43151638的博客
10-11 3400
项目总结 一、项目 1、规划项目 1) 页面数量 2) 页面命名 3) 页面功能 4) 公共样式（公共部分和初始化样式） 5) 完善的项目整体布局 2、项目seo优化 1）页面主题优化 实事求是的写自己网站的名字，网站名字要合理 2）页面头部优化 meta 1.指名编码方式 keywords关键字、描述Description 2.name: description：描述网站的功能 ...
web前端开发第二阶段——鼠标移入移出事件
qq_43151638的博客
10-18 1474
鼠标移入/移出事件 ： 鼠标移入 ：onmouseenter 鼠标移出 ： onmouseleave <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li{ pa...
JavaScript实现点击切换与自动轮播图
"javascript实现点击按钮切换轮播图功能" 在网页设计中，轮播图是一种常见的展示多张图片或内容的交互方式。本资源详细介绍了如何使用JavaScript来实现点击按钮切换轮播图的功能，这对于创建动态且吸引用户的网页至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

资本理念

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值