JavaScript——网页轮播图( 实现点击小圆点、图片滑动、小圆点样式改变)

一、轮播图要实现的效果:

实现点击小圆点、图片滑动、小圆点样式改变

二、轮播图实现效果步骤:

1.利用html+css完成轮播图片,底部小点的整体效果的布局。

2.通过原生js完成图片轮播,无缝自动切换,底部小点随图片切换而切换。

css部分

 	        *{
				padding: 0px;
				margin: 0px;
			}
			.banner{
				 width: 600px;
				 margin: auto;
				 border: 10px solid green;
				 height: 350px;
				 position: relative;
				 overflow: hidden;
			}
			.imgList img{
				 width: 600px;
				 height: 350px;
			}
			.imgList{
				/* 绝对定位 */
				 position: absolute;
				/* left:-600px; */
				/* width: 2600px; */
			}
			.imgList li{
				 float:left;
			  	 margin-right: 20px;
				 list-style: none;
			}
			.circle{
                 position: absolute;
                 bottom: 15px;left:50%;
                 transform:translateX(-50%);}
			.circle a{
				 width: 15px;
				 height: 15px;
				 background: green;
				 display: block;
				 border-radius: 50%;
				 opacity: .8;
				 flo
  • 13
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,以下是一个基本的 CSS 轮播图的 HTML 和 CSS 代码示例,它包括左右箭头按钮、小圆点和左右滑动功能: HTML 代码: ``` <div class="slideshow-container"> <div class="slide"> <img src="slide1.jpg"> </div> <div class="slide"> <img src="slide2.jpg"> </div> <div class="slide"> <img src="slide3.jpg"> </div> <a class="prev">❮</a> <a class="next">❯</a> <div class="dots-container"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> ``` CSS 代码: ``` /* 轮播图容器 */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* 图片轮播 */ .slide { display: none; width: 100%; position: absolute; top: 0; left: 0; } /* 显示第一张图片 */ .slide:first-child { display: block; } /* 左右箭头样式 */ .prev, .next { position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 30px; transition: 0.6s ease; border-radius: 0 3px 3px 0; cursor: pointer; } /* 右箭头位置 */ .next { right: 0; border-radius: 3px 0 0 3px; } /* 当鼠标悬停时,箭头变为半透明 */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* 小圆点容器 */ .dots-container { text-align: center; padding: 20px; background: #ddd; } /* 小圆点样式 */ .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #bbb; margin: 0 5px; cursor: pointer; } /* 显示当前图片小圆点 */ .active { background-color: #717171; } /* 左右滑动效果 */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } ``` 这段代码中的 `slide` 类用于设置每个幻灯片的样式,`prev` 和 `next` 类用于设置左右箭头按钮的样式,`dots-container` 类用于设置小圆点样式。鼠标点击左右箭头或小圆点时,使用 JavaScript 代码来触发幻灯片的左右滑动效果。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值