html简单组件（七）：使用transform实现轮播图

谁借莪１个温暖的怀抱￠ 2022-10-29 07:37 7阅读 0赞

### html简单组件（七）：使用transform实现轮播图 ###

#### 实现效果图： ####

![在这里插入图片描述][20210209172848785.gif]

#### HTML代码 ####

<div class="box">
    			<div class="list">
    				<ul>
    					<li id="g0" class="center"><img src="img/1.jpg" alt="" /></li>
    					<li id="g1" class="right"><img src="img/2.jpg" alt="" /></li>
    					<li id="g2" class="hidden"><img src="img/3.jpg" alt="" /></li>
    					<li id="g3" class="hidden"><img src="img/4.jpg" alt="" /></li>
    					<li id="g4" class="hidden"><img src="img/5.jpg" alt="" /></li>
    					<li id="g5" class="left"><img src="img/6.jpg" alt="" /></li>
    				</ul>
    			</div>
    			
    			<div class="leftButton" onclick="changeLeft()"><</div>
    			
    			<div class="rightButton" onclick="changeRight()">></div>
    			
    			<div class="buttons">
    				<div id="b0" class="little"></div>
    				<div id="b1" class="little"></div>
    				<div id="b2" class="little"></div>
    				<div id="b3" class="little"></div>
    				<div id="b4" class="little"></div>
    				<div id="b5" class="little"></div>
    			</div>
    		</div>

#### JS代码 ####

JS代码引入Jquery

var gArr = ["#g0","#g1","#g2","#g3","#g4","#g5"];
    			var bArr = ["#b0","#b1","#b2","#b3","#b4","#b5"];
    			var index = 0;
    			
    			$(function(){ 
    				change(index);
    			});
    			
    			/*点击按钮*/
    			$(".little").click(function(){ 
    				index = $(this).index();
    				change(index);
    			});
    			
    			/*业务执行*/
    			function change(val){ 
    				if(val == 6){ 
    					index = 0;
    				}else if(val == -1) { 
    					index = 5;
    				}
    				changeButton(index);
    				changeImg(index);
    			}
    			
    			/*向右切换*/
    			function changeRight(){ 
    				index ++;
    				change(index);
    			};
    			
    			/*向左切换*/
    			function changeLeft(){ 
    				index --;
    				change(index);
    			};
    			
    			/*切换按钮*/
    			function changeButton(val){ 
    				$(".little").removeClass("blue");
    				var bStyle = bArr[val];
    				$(bStyle).addClass("blue");
    			}
    			
    			/*切换图片*/
    			function changeImg(val){ 
    				$("li").removeClass().addClass("hidden");
    				var center = gArr[0];
    				var left = gArr[5];
    				var right = gArr[1];
    				if(val == 0){ 
    					center = gArr[0];
    					left = gArr[5];
    					right = gArr[1];
    				}else if(val == 5){ 
    					center = gArr[5];
    					left = gArr[4];
    					right = gArr[0];
    				}else{ 
    					center = gArr[val];
    					left = gArr[val-1];
    					right = gArr[val+1];
    				}
    				$(center).removeClass().addClass("center");
    				$(left).removeClass().addClass("left");
    				$(right).removeClass().addClass("right");
    			};
    			
    			/*设置定时切换*/
    			timer = setInterval(function(){  
    				changeRight();
    			}, 3000);

#### CSS样式表 ####

* { 
    				margin: 0;
    				padding: 0;
    			}
    			.box{ 
    				width: 100%;
    				height: 340px;
    				position: relative;
    				margin-top: 10px;
    			}
    			.list{ 
    				width: 80%;
    				height: 300px;
    				overflow: hidden;
    				position: absolute;
    				left: 10%;
    			}
    			.leftButton,.rightButton{ 
    				width: 70px;
    				height: 100px;
    				background-color: rgba(0, 255, 0, .5);
    				position: absolute;
    				font-size: 70px;
    				margin-top: 100px;
    				color: white;
    				cursor: pointer;
    			}
    			.rightButton{ 
    				right: 0px;
    				text-align: right;
    			}
    			li { 
    				position: absolute;
    				top: 0;
    				left: 0;
    				list-style: none;
    				transition: all 0.3s ease-out;
    				opacity: 0;
    			}
    			img { 
    				width: 750px;
    				height: 300px;
    				border: none;
    				float: left;
    			}
    			/*首页第一张*/
    			.center { 
    				transform: translate3d(35%, 0, 0) scale(1);
    				z-index: 3;
    				opacity: 1;
    			}
    			/*右侧图片*/
    			.right { 
    				transform: translate3d(70%, 0, 0) scale(0.8);
    				transform-origin: 100% 50%;
    				opacity: 0.8;
    				z-index: 2;
    			}
    			/*左侧图片*/
    			.left { 
    				transform: translate3d(0, 0, 0) scale(0.8);
    				transform-origin: 0 50%;
    				opacity: 0.8;
    				z-index: 2;
    			}
    			/*隐藏图片*/
    			.hidden{ 
    				transform: translate3d(0, 0, 0) scale(0.8);
    				opacity: 0;
    				z-index: 0;
    			}
    			.buttons { 
    				width: 280px;
    				height: 30px;
    				bottom: 0px;
    				left: 50%;
    				margin-left: -140px;
    				position: absolute;
    				text-align: center;
    			}
    			.little{ 
    				display: block;
    				width: 35px;
    				height: 5px;
    				float: left;
    				margin-left: 10px;
    				background: red;
    				border-width: 0px;
    				margin-top: 10px;
    				border-radius: 5px;
    			}
    			.little:hover{ 
    				cursor: pointer;
    			}
    			.blue { 
    				background: blue;
    			}

完整代码地址：[https://download.csdn.net/download/qq\_26666947/15156976][https_download.csdn.net_download_qq_26666947_15156976]

[20210209172848785.gif]: /images/20221024/947319cd02fb43f58e3f794c41c2164a.png
[https_download.csdn.net_download_qq_26666947_15156976]: https://download.csdn.net/download/qq_26666947/15156976

发表评论取消回复

表情：

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

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

相关阅读

相关 html + js 简单实现轮播图

实现思路如下：设置所有图片的 display 属性为 none 设置一个 index 用来标志获取到的图片设置一个定时器，每隔一段时间令 index 自增并将对应

旧城等待，/ 2022年12月19日 13:16/ 0 赞/ 236 阅读

相关 html简单组件（七）：使用transform实现轮播图

html简单组件（七）：使用transform实现轮播图实现效果图： ![在这里插入图片描述][20210209172848785.gif] HTML代码

谁借莪１个温暖的怀抱￠/ 2022年10月29日 07:37/ 0 赞/ 8 阅读

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

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

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

相关 Html图片轮播遍历,javaScript 简单轮播图实现

Document .crousel \{ width:1500px; height: 500px; margin: auto; position: relative

比眉伴天荒/ 2022年10月09日 05:54/ 0 赞/ 232 阅读

相关 html实现手机端轮播图,swiper移动端轮播图简单实现

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

你的名字/ 2022年10月07日 12:46/ 0 赞/ 303 阅读

相关 html script轮播图,javascript简单轮播图

\\轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV

ゞ浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 304 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 353 阅读

相关 html轮播图用什么语言,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][s1.jpg] ![s3.jpg

不念不忘少年蓝@/ 2022年10月05日 12:46/ 0 赞/ 259 阅读

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图发布时间：2020-08-25 02:23:35 来源：脚本之家阅读：100 作者：nameless-212 html代码：轮

逃离我推掉我的手/ 2022年10月05日 12:44/ 0 赞/ 260 阅读

相关 html简单实现自动轮播代码怎么写,html + js 简单实现轮播图

哎，刚刚看到自己昨天写的如何实现搜索框获得了两个喜欢哎，真的是开心，感谢你们的喜欢。咳咳，回归正题。今天要分享的是如何利用 html + js 实现轮播图。先来看下效果：

Myth丶恋晨/ 2022年10月05日 10:46/ 0 赞/ 226 阅读