轮播图样式代码

今天药忘吃喽~ 2023-02-25 10:28 29阅读 0赞

**简单通过HTML，css样式和js实现轮播图的效果**

## 效果图 ##

![这是五张图片的切换][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dRSF9Cb3Nz_size_16_color_FFFFFF_t_70_pic_center]

## 整体思路分析 ##

**1.首先整体是一个大的< div >标签,存放整个布局 ;**  
**2.其次在里面设置两个小的< div >标签,分别用来存放图片和标签；**  
**3.最后通过css样式和js来实现具体的效果**

#### 在html的body中添加一个div作为显示框，然后在这个div内部添加两个子div作为图片盒标签的显示。代码如下： ####

<body>
    		<div class="banner">
    			<div class="img-wrap">
    			<img src="img/1.jpg"/>
    				<img src="img/2.jpg"/>
    				<img src="img/3.jpg"/>
    				<img src="img/4.jpg"/>
    				<img src="img/5.jpg"/>
    			</div>
    			<div class="title-bth">
    				<span id="">01</span>
    				<span id="">02</span>
    				<span id="">03</span>
    				<span id="">04</span>
    				<span id="">05</span>
    			</div>
    		</div>
    	</body>

#### 头部添加css样式，代码如下： ####

<style> .banner{ 
    				height: 342px;
    				width:604px;
    				background: red;
    				margin: 200px auto;
    				overflow: hidden;
    			}
    			.img-wrap{ 
    				width: 500%;
    				height:298px ;
    				/*border: 2px solid #000;*/
    				transform: translateX(0px);
    				transition: 0.5s;
    				
    			}
    			img{ 
    				/*display: block;*/
    				float: left;
    			}
    			.title-bth{ 
    				width: 604px;
    				height: 44px;
    				
    			}
    			span{ 
    				/*行内元素宽高无效 inline,行内块有效inline-block,块级有效block*/
    				width: 120.8px;
    				height: 44px;
    				background: #35353e;
    				/*display: block;*/
    				float: left;
    				font-size:14px; /*默认16;*/
    				text-align: center;
    				line-height: 44px;
    				color: #b1b1b2; /*文本颜色*/
    				cursor: pointer;/*鼠标样式*/
    			}
    			span:hover{ 
    				background: #54545c;
    				color: #d5c258;
    				
    			}
    		</style>

#### 这里还需要引入一个jquery，然后就是通过js实现轮播效果，代码如下： ####

<script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="text/javascript">
    			$("span").mouseenter(function(){ 
    				var index=$(this).index();  //获取下标
    				$(".img-wrap").css({ 
    					transform: 'translateX(-'+index*604+'px)'
    				});
    			})
    			</script>

**到这里，一个简单的轮播图也就实现了。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dRSF9Cb3Nz_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/375517328ec649d8a90d817626542e06.png

发表评论取消回复

表情：

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

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

相关阅读

相关轮播图样式代码

简单通过HTML，css样式和js实现轮播图的效果效果图 ![这是五张图片的切换][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

今天药忘吃喽~/ 2023年02月25日 10:28/ 0 赞/ 30 阅读

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)

就是给这几个图片弄一个定时器，把图片先定位到一个地方，给定时器一个时间，比如五秒，最初让除了第一个图片外的其他的都消失。前五秒显示的是第一张图片，五秒. 请直接复制我的以下代

比眉伴天荒/ 2022年09月02日 14:57/ 0 赞/ 464 阅读

相关轮播图

![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head>

布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 457 阅读

相关轮播图

<html> <head> <meta name="viewport" id="viewport" content="width=device-

布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 384 阅读

相关原生代码实现轮播图

我们经常在浏览网页的时候看到轮播图（比如csdn首页就有），感觉很神奇，哇，我也要做一个！但是觉得有点难，无从下手，只能先发发呆瞎点一下左右轮播键 ![70][] 步

悠悠/ 2022年05月24日 05:54/ 0 赞/ 382 阅读

相关 h5轮播图代码

下面是一个完整的h5轮播图html代码，复制后把图片改成自己的即可运行 <!DOCTYPE html> <html> <head>

朴灿烈づ我的快乐病毒、/ 2022年05月09日 13:06/ 0 赞/ 319 阅读

相关自定义轮播图组件样式

前言 > 如果使用一个组件库的组件，如mint-ui的swipe组件，但indicators样式不想要默认的样式（简单的圆点），即自定义组件样式。解决思路

绝地灬酷狼/ 2022年01月23日 00:47/ 0 赞/ 446 阅读

相关轮播图

本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head>

秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 623 阅读

相关轮播图

CSS样式 { margin: 0; padding: 0; list-style: none

柔情只为你懂/ 2021年11月23日 13:56/ 0 赞/ 669 阅读

相关 jq swiper(各种轮播图样式)

具体样式教程查看地址[swiper][] 各种样式引用地址[各种样式][Link 1] 引入swiper.min.css文件 swiper.jqu

客官°小女子只卖身不卖艺/ 2021年07月24日 12:32/ 0 赞/ 774 阅读