JS轮播图

最新推荐文章于 2024-04-08 18:28:22 发布
最新推荐文章于 2024-04-08 18:28:22 发布
阅读量109 收藏
点赞数
分类专栏： JS 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43177432/article/details/116453883
版权

这是一个轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#main{
				width: 700px;
				height: 300px;
				position: relative;
				overflow: hidden;
				cursor: pointer;
			}
			.box{
				height: 100%;
				width: 100%;
			}
			.item{
				width: 100%;
				height: 100%;
				z-index: 1;
				text-align: center;
				position: absolute;
				/* transition: 1s; */
			}
			.trans{
				transition: 1s;
			}
			#left{
				width: 50px;
				height: 50px;
				background-color: rgba(0,0,0,.3);
				border-radius: 25px;
				z-index: 2;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				transition: .3s;
				opacity: 0;
			}
			#right{
				width: 50px;
				height: 50px;
				background-color: rgba(0,0,0,.3);
				border-radius: 25px;
				z-index: 2;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				transition: .3s;
				opacity: 0;
			}
			#page{
				position: absolute;
				z-index: 2;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				transition: .3s;
				background: auto;
				opacity: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="main">
			<div class="box">
				<div class="item trans" style="background-color: antiquewhite;"></div>
				<div class="item trans" style="background-color: aquamarine;"></div>
				<div class="item trans" style="background-color: brown;"></div>
				<div class="item trans" style="background-color: cadetblue;"></div>
				<div class="item trans" style="background-color: cornflowerblue;"></div>
				<div class="item trans" style="background-color: darkgrey;"></div>
			</div>
			<div id="left"></div>
			<div id="right"></div>
			<div id="page"></div>
		</div>
		<script type="text/javascript">
			let items = document.querySelectorAll('.item'); // 获取全部要轮播的元素
			let page = document.getElementById('page'); // 下方白点的盒子
			let time = 3000 // 计时器切换的cd
			let Interval = setInterval(()=>{ // 计时器
				i++
				a()
			},time)
			let i = items.length*100 // 轮播数据
			items.forEach((item,index)=>{ // 生成白点
				let div = document.createElement('div')
				div.className = 'page-item'
				div.style.width = '5px'
				div.style.height = '5px'
				div.style.margin = '0 5px'
				div.style.borderRadius = '3px'
				div.style.border = '1px solid #fff'
				div.style.float = 'left'
				// div.onclick = function(){
				// 	if(i%items.length !== index){
				// 		console.log(index)
				// 		i = i+(index-i%items.length)
				// 		a()
				// 	}
				// }
				page.appendChild(div)
			})
			let pageItems = document.querySelectorAll('.page-item'); // 所有白点
			a()

			function a(){ // 切换的方法
				pageItems.forEach(item => {
					item.style.background = ''
				})
				pageItems[i%items.length].style.background = '#fff'
				items.forEach((item,index)=>{
					if(index == i%items.length-1){
						item.style.display = 'block'
						item.style.top = '0'
						item.style.left = '-700px'
					}else if(index == i%items.length){
						item.style.display = 'block'
						item.style.top = '0'
						item.style.left = '0'
					}else if(index == i%items.length+1){
						item.style.display = 'block'
						item.style.top = '0'
						item.style.left = '700px'
					}else{
						item.style.display = 'none'
					}
				})
				if(i%items.length == items.length-1){
					items[0].style.top = '0'
					items[0].style.left = '700px'
					items[0].style.display = 'block'
					
				}
				if(i%items.length == 0){
					items[items.length-1].style.display = 'block'
					items[items.length-1].style.top = '0'
					items[items.length-1].style.left = '-700px'
				}
			}
			
			
			let main = document.getElementById('main'); // 轮播图整体，定义各种事件
			let left = document.getElementById('left'); // 左侧按钮
			let right = document.getElementById('right'); // 右侧按钮
			main.onmouseover = function(){ // 鼠标移入轮播图事件，轮播暂停，显示按钮
				left.style.opacity = 1
				right.style.opacity = 1
				page.style.opacity = 1
				left.style.left = '20px'
				right.style.right = '20px'
				window.clearInterval(Interval)
			}
			main.onmouseout = function(){ // 鼠标移出轮播图事件，轮播继续，隐藏按钮
				left.style.opacity = 0
				right.style.opacity = 0
				page.style.opacity = 0
				left.style.left = '0px'
				right.style.right = '0px'
				items[i%items.length].style.left = '0px'
				items[(i+1)%items.length].style.left = '700px'
				items[(i-1)%items.length].style.left = '-700px'
				Interval = setInterval(()=>{
					i++
					a()
				},time)
			}
			let down = false // 定义轮播图是否有鼠标按下事件
			let s // 定义按下时纵向坐标
			main.onmousedown = function(e){ // 轮播图鼠标按下事件
				down = true
				s = e.pageX
				items.forEach(item => {
					item.className = 'item'
				})
			}
			main.onmouseup = function(e){ // 轮播图鼠标抬起事件，判断移了多少，是否跳转轮播
				down = false
				items.forEach(item => {
					item.className = 'item trans'
				})
				if(e.pageX-s > 100){
					i--
					a()
				}else if(e.pageX-s < -100){
					i++
					a()
				}else{
					items[i%items.length].style.left = '0px'
					items[(i+1)%items.length].style.left = '700px'
					items[(i-1)%items.length].style.left = '-700px'
				}
				
			}
			main.onmousemove = function(e){ // 鼠标移动事件，当鼠标按下时，移动轮播
				e.preventDefault()
				if(down){
					items[i%items.length].style.left = e.pageX-s+'px'
					items[(i+1)%items.length].style.left = 700+e.pageX-s+'px'
					items[(i-1)%items.length].style.left = -700+e.pageX-s+'px'
				}
			}
			
			left.onclick = function(){ // 点击左侧按钮
				i--;
				a()
			}
			right.onclick = function(){ // 点击右侧按钮
				i++;
				a()
			}
			
			let leftdiv = document.createElement('div') // 给左侧按钮添加箭头
			leftdiv.style.width = '10px'
			leftdiv.style.height = '10px'
			leftdiv.style.borderWidth = '1px'
			leftdiv.style.borderStyle = 'solid'
			leftdiv.style.borderColor = '#fff #fff transparent transparent'
			leftdiv.style.position = 'absolute'
			leftdiv.style.left = '50%'
			leftdiv.style.top = '50%'
			leftdiv.style.transform = 'translate(-25%,-50%) rotate(-135deg)'
			left.appendChild(leftdiv)
			
			let rightdiv = document.createElement('div') // 给右侧按钮添加箭头
			rightdiv.style.width = '10px'
			rightdiv.style.height = '10px'
			rightdiv.style.borderWidth = '1px'
			rightdiv.style.borderStyle = 'solid'
			rightdiv.style.borderColor = '#fff #fff transparent transparent'
			rightdiv.style.position = 'absolute'
			rightdiv.style.left = '50%'
			rightdiv.style.top = '50%'
			rightdiv.style.transform = 'translate(-75%,-50%) rotate(45deg)'
			right.appendChild(rightdiv)
		</script>
	</body>
</html>
久遇不厌
关注
专栏目录
js轮播图片小圆点变化_原生js实现轮播图的示例代码
weixin_39855186的博客
12-21 1161
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。原理：将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。步骤一：建立html基本布局如下所示：轮播图 12345<>只有五张图片，却使用7张来轮播，这是...
纯js实现轮播图(3种轮播图).zip
12-28
在前端开发中，轮播图（Carousel）是一种常见的网页元素，用于展示一组可滑动切换的图片或内容。本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份...
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
JS轮播图详解
weixin_75154342的博客
09-17 3928
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图实现
qq_53843555的博客
05-29 5401
使用js实现轮播图
【JS基础】JavaScript轮播图代码详解
qq_44580366的博客
07-06 5061
小米轮播图 js 轮播图效果 JavaScript基础项目
JavaScript轮播图
Junnix的博客
01-09 561
JavaScript轮播图 <!-- 定义初始页面图片 --> <img id="and" src="img/1.jpg" width="100%" height="30%"> <script> var i=1; function fun(){ i++ while(i>3){ i=1 }
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1821
class = "current" 用于定位当前显示图片所在位置。
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
JS 轮播图点击左右切换
最新发布
m0_72189003的博客
04-08 477
点击左右按钮实现轮播图切换图片。
js轮播图_javascript_
10-03
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JavaScript 轮播图.rar
04-08
JavaScript（可能在javascript文件夹中的script.js）是实现轮播图动态功能的关键。主要功能包括： 1. 初始化：获取DOM元素，如轮播图容器、图片列表、控制按钮等，并设置初始状态，比如第一张图片显示，其他隐藏。 ...
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
vue中使用gif.js
久遇不厌的博客
04-28 2831
gif.js是一个用js把几张图片转换成gif的插件，但是在vue中会出现一些问题导致不可用。 主要的原因就是 gif.js里使用了Worker，而vue中使用Worker需要独特配置。 下载插件npm install worker-loader -D 在vue.config.js中添加一下内容: chainWebpack: config => { config.module .rule('worker') .test(/\.w.
js导入导出
久遇不厌的博客
04-28 2159
js导入导出 CommonJS commonJS是Node服务器模块规范。每个文件就是一个模块，有自己的作用域，每个模块里面的东西都是私有的，其他模块不能调用。CommonJS规定，每个模块内部：module代表当前模块。这个变量是一个对象，module对象下有个属性exports也是一个对象,exports就是模块的对外接口。想导出某个方法，变量等就把它放到exports下。用require导入即可。 // 1.js var a = 1; function b(){ console.log(2) } m
JS Object方法总结
久遇不厌的博客
05-12 296
create 创建一个对象 const obj = Object.create({a:1},{b:{value:2}}) //第一个参数为对象，对象为函数调用之后反回新对象的原型对象，第二个参数是对象本身的实例方法（默认不能修改，不能枚举） console.log(obj)//{b:2} console.log(obj.__proto__)//{a:1} const obj2=Object.create({},{ p:{ value:2,//属性值 writabl.
JS数组遍历
久遇不厌的博客
05-11 230
for循环 let arr = [1,2,3] for(let i = 0; i < arr.length; i++){ // √ 遍历数组 console.log(arr[i]) } let str = '1312' for(let i = 0; i < str.length; i++){ // √ 遍历字符串 console.log(str[i]) } let num = 123123 for(let i = 0; i < num.length; i++){ // ×
Js实现图片点击切换轮播图详解
这个简单的JavaScript轮播实现是一个基础的起点，可以帮助初学者理解如何用JavaScript控制DOM元素和处理用户交互。随着技能的提升，你可以进一步优化代码，增加更多高级特性，以满足不同项目的需要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值