JS+CSS3实现轮播图

最新推荐文章于 2024-09-06 23:20:39 发布
最新推荐文章于 2024-09-06 23:20:39 发布
阅读量405 收藏 3
点赞数
分类专栏： js+css 文章标签： js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyy_x_xyy/article/details/116655954
版权

1、无缝连续滚动特效

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 1000px;
				height: 130px;
				border: 1px solid #000;
				margin: 50px auto;
				overflow: hidden;
			}

			.box ul {
				list-style: none;
				/* 设置大一点，这样li才能浮动 */
				width: 5000px;
				position: relative;
			}

			.box ul li {
				float: left;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div id="box" class="box">
			<ul id="list">
				<li><img src="../../images/number/0.png" alt=""></li>
				<li><img src="../../images/number/1.png" alt=""></li>
				<li><img src="../../images/number/2.png" alt=""></li>
				<li><img src="../../images/number/3.png" alt=""></li>
				<li><img src="../../images/number/4.png" alt=""></li>
				<li><img src="../../images/number/5.png" alt=""></li>
			</ul>
		</div>
		<script>
			var box = document.getElementById('box');
			var list = document.getElementById('list');

			// 复制多一遍所有的li
			list.innerHTML += list.innerHTML;

			// 全局变量，表示当前list的left值
			var left = 0;

			// 定时器，全局变量
			var timer;
			move();

			// 动画封装成函数
			function move() {
				// 设表先关，防止动画积累
				clearInterval(timer);

				timer = setInterval(function() {
					left -= 4;
					// 验收
					if (left <= -1260) {
						left = 0;
					}
					list.style.left = left + 'px';
				}, 20);
			}

			// 鼠标进入停止定时器
			box.onmouseenter = function() {
				clearInterval(timer);
			};

			// 鼠标离开继续定时器
			box.onmouseleave = function() {
				move();
			};
		</script>
	</body>

</html>
  1. 将ul复制两份，让用户产生无限滚动的错觉。
  2. 采用定时器，控制ul的滚动
 			timer = setInterval(function() {
					left -= 4;
					// 验收
					if (left <= -1260) {
						left = 0;
					}
					list.style.left = left + 'px';
				}, 20);
  1. 当鼠标进入box，就立即停止定时器；将定时器封装在一个函数中，方便鼠标离开重新启动。
			box.onmouseenter = function() {
				clearInterval(timer);
			};
			box.onmouseleave = function() {
				move();
			};
  1. 康康效果~
    在这里插入图片描述

2.轮播图特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#carousel{
				width: 650px;
				height: 360px;
				margin: 50px auto;
				border: 1px solid #000000;
				position: relative;
				overflow: hidden;
			}
			#carousel ul{
				list-style:none;
				width: 6000px;
				position: relative;
				left: 0;
				transition: left .5s ease 0s;
			}
			#carousel ul li{
				float: left;
			}
			#carousel .leftbtn{
				position: absolute;
				width: 50px;
				height: 50px;
				top: 50%;
				margin-top: -25px;
				left: 20px;
				background-color:rgba(102,180,254,.4);
			}
			#carousel .leftbtn:hover,#carousel .rightbtn:hover{

				background-color:rgba(102,180,254,.8);
			}
			#carousel .rightbtn{
				position: absolute;
				width: 50px;
				height: 50px;
				top: 50%;
				margin-top: -25px;
				right: 20px;
				background-color:rgba(102,180,254,.4);
			}
		</style>
	</head>
	<body>
		<div id="carousel">
			<ul id="list">
				<li><img src="../../images/beijing/0.jpg" alt=""></li>
				<li><img src="../../images/beijing/1.jpg" alt=""></li>
				<li><img src="../../images/beijing/2.jpg" alt=""></li>
				<li><img src="../../images/beijing/3.jpg" alt=""></li>
				<li><img src="../../images/beijing/4.jpg" alt=""></li>
			</ul>
			<a href="javascript:;" class="leftbtn" id="leftbtn"><img src="../../images/prev_active.png" ></a>
			<a href="javascript:;" class="rightbtn" id="rightbtn"><img src="../../images/next_active.png" ></a>
			
		</div>
		<script type="text/javascript">
			var list = document.getElementById('list');
			var leftbtn = document.getElementById('leftbtn');
			var rightbtn = document.getElementById('rightbtn');
			
			var cloneli = list.firstElementChild.cloneNode(true);
			list.appendChild(cloneli);
			//记录到了第几个li
			var index = 0;
			//节流
			var lock = true;
			rightbtn.onclick = function(){
				if(!lock) return;
				lock = false;
				
				list.style.transition = 'left .5s ease 0s';
				index++;
				if(index>4){
					//延时器目的是为了瞬移到第一张照片，为什么要延迟0.5s呢，因为0.5s需要从最后一张照片过渡到复制的第一张照片上。
					setTimeout(function(){
						list.style.transition = 'none';
						list.style.left = 0;
						index=0;
						// alert('hhh');
					},500);
					
				}
				//点击最后一张照片时，先过渡到复制的那张照片上，再执行延时器函数。
				// else{
					list.style.left = -(index*650)+'px';
					// }
					
				setTimeout(function(){
					lock = true;
				},500);
				
			}
			
			leftbtn.onclick = function(){
				if(!lock) return;
				lock = false;
				
				// list.style.transition = 'left .5s ease 0s';
				if(index==0){
						list.style.transition = 'none';
						list.style.left= -(650*5)+'px';
					//瞬间过渡到最后一张，再延时0s执行平缓过渡到倒数第二张操作	
					setTimeout(function(){
						list.style.transition = 'left .5s ease 0s';
						list.style.left = -(650*4)+'px';
						index=4;
					},0);
					
				}else{
					index--;
					list.style.left = -(index*650)+'px';
					}
					setTimeout(function(){
						lock = true;
					},500);
				
			}
			
		</script>
	</body>
</html>
  1. 我们先制作右按钮特效，复制第一个li到ul的最后一个子节点
		var cloneli = list.firstElementChild.cloneNode(true);
			list.appendChild(cloneli);
  1. 实现机理就是当鼠标点击最后一个li的右按钮时，先平缓过渡到新增的第一张li上，再执行瞬间跳转到第一张li中，这里使用延时器，将瞬间移动操作延时到平缓过渡之后，让使用者视觉上察觉不出来
rightbtn.onclick = function(){			
				list.style.transition = 'left .5s ease 0s';
				index++;
				if(index>4){
					//延时器目的是为了瞬移到第一张照片，为什么要延迟0.5s呢，因为0.5s需要从最后一张照片过渡到复制的第一张照片上。
					setTimeout(function(){
						list.style.transition = 'none';
						list.style.left = 0;
						index=0;
						// alert('hhh');
					},500);
					
				}
				//点击最后一张照片时，先过渡到复制的那张照片上，再执行延时器函数。			
					list.style.left = -(index*650)+'px';	
			}
  1. 制作左按钮特效，当用户点击第一张li的左按钮时，将ul瞬移到最后一张新增的li上，然后再利用延时器平缓过渡到倒数第二张上。
			leftbtn.onclick = function(){
				if(!lock) return;
				lock = false;
				
				// list.style.transition = 'left .5s ease 0s';
				if(index==0){
						list.style.transition = 'none';
						list.style.left= -(650*5)+'px';
					//瞬间过渡到最后一张，再延时0s执行平缓过渡到倒数第二张操作	
					setTimeout(function(){
						list.style.transition = 'left .5s ease 0s';
						list.style.left = -(650*4)+'px';
						index=4;
					},0);
					
				}else{
					index--;
					list.style.left = -(index*650)+'px';
					}
					setTimeout(function(){
						lock = true;
					},500);
				
			}
  1. 最后为了防止用户操作过于频繁，需要进行节流操作。
			var lock = true;
			btn.onclick = function(){
				if(!lock) return;
				
				lock = false;//上锁
				
				......
				setTimeout(function(){
					lock = true;//开锁
				},500);
				
			}
  1. 康康效果~
    在这里插入图片描述

呼吸轮播图特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#carousel{
				width: 650px;
				height: 360px;
				margin: 50px auto;
				border: 1px solid #000000;
				position: relative;
			}
			#carousel ul{
				list-style:none;

			}
			#carousel ul li{
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				transition: opacity 1s ease 0s;
			}
			#carousel ul li:first-child{
				opacity: 1;
			}
			#carousel .leftbtn{
				position: absolute;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				top: 50%;
				margin-top: -25px;
				left: 20px;
				background-color:rgba(102,180,254,.4);
			}
			#carousel .leftbtn:hover,#carousel .rightbtn:hover{
			
				background-color:rgba(102,180,254,.8);
			}
			#carousel .rightbtn{
				position: absolute;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				top: 50%;
				
				margin-top: -25px;
				right: 20px;
				background-color:rgba(102,180,254,.4);
			}
		</style>
	</head>
	<body>
		<div id="carousel">
			<ul id="list">
				<li><img src="../../images/beijing/0.jpg" alt=""></li>
				<li><img src="../../images/beijing/1.jpg" alt=""></li>
				<li><img src="../../images/beijing/2.jpg" alt=""></li>
				<li><img src="../../images/beijing/3.jpg" alt=""></li>
				<li><img src="../../images/beijing/4.jpg" alt=""></li>
			</ul>
		<a href="javascript:;" class="leftbtn" id="leftbtn"><img src="../../images/prev_active.png" ></a>
		<a href="javascript:;" class="rightbtn" id="rightbtn"><img src="../../images/next_active.png" ></a>
		
		</div>
		<script type="text/javascript">
			var list = document.getElementById('list');
			var leftbtn = document.getElementById('leftbtn');
			var rightbtn = document.getElementById('rightbtn');
			var lis = list.getElementsByTagName('li');
			//记录到了第几个li
			var index = 0;
			//节流
			var lock = true;
			rightbtn.onclick = function(){
				if(!lock) return;
				lock = false;
				
				lis[index].style.opacity = 0;
				index++;
				
				if(index>4){
					index=0;			
				}
				lis[index].style.opacity = 1;		
				setTimeout(function(){
					lock = true;
				},1000);
				
			}
			
			leftbtn.onclick = function(){
				if(!lock) return;
				lock = false;
				
				lis[index].style.opacity = 0;
				if(index==0){
					index=5;			
				}
				index--;	
				lis[index].style.opacity = 1;		
				setTimeout(function(){
					lock = true;
				},1000);
				
			}
			
		</script>
	</body>
</html>

这个在轮播图特效基础上，将每个li采用绝对定位在相同位置，通过记录当前显示li的位置，改变前后li的透明度来实现呼吸轮播跳转的效果。同样设置节流锁，防止页面切换错误。
康康效果~
在这里插入图片描述

自豪听我的
关注
专栏目录
js+css3图片3D旋转轮播特效
06-09
"js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术，为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动，增加用户的交互体验。 首先，我们来了解一下CSS3。CSS3是层叠...
呼吸轮播图基础布局
王延朕的博客
05-13 213
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸轮播图</title> <style> *{ padding: 0px; margin: 0px; } ul,ol{ list-style:
轮播图基础版（点击切换图片）
qq_52710895的博客
06-29 501
基础版轮播图，点击实现图片切换
如何使用CSS实现一个无限循环滚动的图片轮播效果
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-06 2192
在网页设计中，图片轮播（Carousel）是一种常见的视觉效果，它可以用来展示一系列的图片、广告或者其他内容。我们将从基本概念入手，逐步深入到具体的实现步骤，并提供完整的代码示例，帮助你理解和实现这一功能。通过本文的介绍，我们不仅学会了如何使用纯CSS实现无限循环滚动的图片轮播效果，还探讨了如何进一步增强轮播的交互性和响应性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过添加按钮或滑动事件，可以让用户手动控制图片的滚动，增加交互性。
JS轮播图
XWen_ING的博客
09-17 183
JS轮播图 html+css代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
JS实现轮播图
阿常呓语的专栏
07-08 774
原生JS 轮播图
HTML+CSS+JS实现轮播图
Mr-Miler 的博客
09-23 382
用HTML，CSS，Javascript 实现网站轮播图 。点击下面的小圆圈能展示 所选的图片。
JS+css3实现幻灯片轮播图
11-20
本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>...
html+js+css实现网页轮播图效果
03-08
3.根据轮播图的图片个数，动态生成小圆点。 4.点击小圆点，滑动到对应图片。 5.点击右箭头，换一张图片，图片往后滑动一次，对应的小圆点要改变样式。 6.点击左箭头，换一张图片，图片往前滑动一次，对应的小圆点要...
使用html+js+css 实现页面轮播图效果(实例讲解)
12-12
<... <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...轮播图效果</title> </head> <body> <section
HTML+CSS+js，简单轮播图效果
07-10
HTML+CSS，简单轮播图效果,中华文武的展示。HTML+CSS，简单轮播图效果,中华文武的展示。HTML+CSS，简单轮播图效果,中华文武的展示。HTML+CSS，简单轮播图效果,中华文武的展示。HTML+CSS，简单轮播图效果,中华文武的...
轮播
九亿宅男的梦的博客
01-08 222
js轮播 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * {margin: 0;pa
用JS实现轮播效果
weixin_44541224的博客
07-18 332
作者：老岑 现在我们实现轮播效果都是通过插件来实现的，可是当我们不能用插件的时候呢？ 所以我就在DW里面弄了给JS的轮播事件。 说这么多是没有用的，直接看代码 function animate(offset){ tranfor=true; var list=document.getElementById(“list”); var newleft=0; var time=300; var inter...
轮播图
qq_41534115的博客
09-11 191
方法1 不太完善 html+js代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sc
JS轮播图实现
我想静静的博客
07-24 610
JS实现轮播图，代码很全
原生JavaScript一步步实现焦点轮播图：基本布局-＞边界条件-＞绑定圆点-＞优化
Aelous_dp的博客
07-19 1030
轮播图是在大家学习 JavaScript 时常写的小项目，网络上相关的资源也很多。我在学习的过程中，将写轮播图的经历做一些简单的总结，希望大家在看后能有所收获，如果有不对的地方，请大家在留言区指出。 前言 轮播图是什么 Q:轮播图是什么？ A:简单解释：所谓的轮播图，就是几张图片轮流显示。 我们先随便找个网站访问一下，例如 淘宝网 首页中间这一块。 中间的滚动区域就是轮播图。 哪些知识点 通过轮播图，我们可以巩固(学到)什么知识点呢？ DOM 操作 HTML 事件运用 定时器 无限滚动技巧 JavaS
[Web]焦点图实现 篇一
weixin_44566432的博客
05-19 1400
网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。一般多网站首页版面或频道首页版面，因为是通过图片的形式，所以有一定的吸引性、视觉吸引性。容易引起访问者的点击，据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率高于使用在文字标题5倍。https://baike.baidu.com/item/%E7%BD%91%E7%AB%99%E7%84%A6%E7%82%B9%E5%9
DOM节点的一些常见操作
TianGog的博客
10-10 368
DOM（document object model,文档对象模型）是JS操作HTML文档的接口，使文档操作变得非常优雅简便
css实现轮播图
热门推荐
weixin_58017233的博客
03-18 3万+
轮播图：就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 轮播图的实现代码： 1）创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致，这样就可以保证一次轮播一张图片 最外部的盒子 <div class="box1></div> 最外部盒子的css样式 .box1{ width:722px; height:358px; margin:0 auto; overflow: hidden;..
JS+CSS实现无缝轮播图代码示例
这种效果通常用于网站的轮播图或广告展示区域，可以增加视觉吸引力，同时节省网页空间。该代码结构简单，易于理解和应用，用户只需要将代码插入到网页的部分，并调整图片路径即可使用。 核心知识点： 1. **CSS样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值