JavaScript轮播图

最新推荐文章于 2022-08-29 17:05:32 发布
最新推荐文章于 2022-08-29 17:05:32 发布
阅读量116 收藏
点赞数
分类专栏： JavaScript JavaScript效果运用 文章标签： javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wannaer/article/details/114961927
版权

在这里插入图片描述
在这里插入图片描述

轮播图的body构建

<div class="container">
            <div id="LBT" class="wrap">
            	/* 创建放置轮播图片ul*/
                <ul class="list">
                	/* active 当前图片显示*/
                    <li class="item active">0</li>
                    <li class="item">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                </ul>
                <ul class="pointList">
   /* data-index 自定义标签, 点击这个按钮可以获取应该切换到第几张图片*/
                    <li class="point active " data-index = '0'></li>
                    <li class="point" data-index = '1'></li>
                    <li class="point" data-index = '2'></li>
                    <li class="point" data-index = '3'></li>
                    <li class="point" data-index = '4'></li>
                </ul>
                /* 到下一张或上一张图片*/
                <button type="button" class="bth" id="goPre"><</button>
                <button type="button" class="bth" id="goNext">></button>
            </div>
		</div>

CSS样式

		<style type="text/css">
			/* 清除样式*/
            *{
                margin: 0; padding: 0;
            }
            /* 版心样式*/
            .container{
                width: 80%;
                margin: 0 auto;
                position: relative;
            }
			.wrap{
				height: 400px;
                background-color: crimson;
			}
			.list{
				width: 100%;
				height: 400px;
				list-style: none;
				position: relative;
			}
			.item{
				width: 100%;
				height: 400px;
				font-size: 30px;
				position: absolute;
				color: white;
				opacity: 0;
				transition: 0.8s;
			}
			.item:nth-child(1){
				background-color: red;
			}
			.item:nth-child(2){
				background-color: blue;
			}
			.item:nth-child(3){
				background-color: green;
			}
			.item:nth-child(4){
				background-color:gainsboro;
			}
			.item:nth-child(5){
				background-color: royalblue;
			}
			.bth{
				position: absolute;
				width: 30px;
				height: 100px;
				top: 150px;
				z-index: 20;
			}
			#goPre{
				left:0px;
				opacity: 0.6;
			}
			#goNext{
				right:0px;
				opacity: 0.6;
			}
			.item.active{
				z-index: 10;
				opacity: 1;
			}
			.pointList{
				padding-left: 0px;
				list-style: none;
				position: absolute;
				right: 20px;
				bottom: 20px;
				z-index: 1000;
			}
			.point{
				width: 8px;
				height: 8px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 100%;
				float: left;
				margin-right: 10px;
				border-style: solid;
				border-width: 2px;
				border-color: rgba(255, 255, 255, 0.6);
	
				cursor: pointer;
			}
			.point.active{
				background-color: rgba(255, 255, 255, 1);
			}
		</style>

JavaScript代码`

<script>
			var items = document.getElementsByClassName("item");
			var goPreBtn = document.getElementById("goPre");
			var goNextBtn = document.getElementById("goNext");
			var points = document.getElementsByClassName("point");
		
			var index = 0;
			var clearActive = function(){
				for(var i = 0; i < items.length; i++){
					items[i].className = "item";
				}
				for(var i=0; i<points.length;i++){     
					points[i].className = "point";
				}
			}
			var goIndex = function(){
				clearActive();
				items[index].className = "item active";
				points[index].className = "point active";
			}
		
			var goNexts = function(){
				
				if(index < 4){
					index++;
				}else{  
					index = 0;
				}
		
				goIndex();
			}
		
			var goPres = function(){
				if(index > 0){
					index--;
				}else{
					index = 4;
				}
				goIndex();
			}
			goNextBtn.addEventListener("click",function(){
				goNexts();
			})
		
			goPreBtn.addEventListener("click", function(){
				goPres();
			})
		
			for(var i = 0; i < points.length; i++){
				points[i].addEventListener("click", function(){
					var pointIndex = this.getAttribute("data-index");
					index = pointIndex;
					goIndex();
				})
			}
		</script>

完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>轮播图</title>
        <meta charset="utf8">
		<style type="text/css">
            *{
                margin: 0; padding: 0;
            }
            .container{
                width: 80%;
                margin: 0 auto;
                position: relative;
            }
			.wrap{
				height: 400px;
                background-color: crimson;
			}
			.list{
				width: 100%;
				height: 400px;
				list-style: none;
				position: relative;
			}
			.item{
				width: 100%;
				height: 400px;
				font-size: 30px;
				position: absolute;
				color: white;
				opacity: 0;
				transition: 0.8s;
			}
			.item:nth-child(1){
				background-color: red;
			}
			.item:nth-child(2){
				background-color: blue;
			}
			.item:nth-child(3){
				background-color: green;
			}
			.item:nth-child(4){
				background-color:gainsboro;
			}
			.item:nth-child(5){
				background-color: royalblue;
			}
			.bth{
				position: absolute;
				width: 30px;
				height: 100px;
				top: 150px;
				z-index: 20;
			}
			#goPre{
				left:0px;
				opacity: 0.6;
			}
			#goNext{
				right:0px;
				opacity: 0.6;
			}
			.item.active{
				z-index: 10;
				opacity: 1;
			}
			.pointList{
				padding-left: 0px;
				list-style: none;
				position: absolute;
				right: 20px;
				bottom: 20px;
				z-index: 1000;
			}
			.point{
				width: 8px;
				height: 8px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 100%;
				float: left;
				margin-right: 10px;
				border-style: solid;
				border-width: 2px;
				border-color: rgba(255, 255, 255, 0.6);
	
				cursor: pointer;
			}
			.point.active{
				background-color: rgba(255, 255, 255, 1);
			}
		</style>
	
	</head>

	<body>
        <div class="container">
            <div id="LBT" class="wrap">
                <ul class="list">
                    <li class="item active">0</li>
                    <li class="item">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                </ul>
                <ul class="pointList">
                    <li class="point active " data-index = '0'></li>
                    <li class="point" data-index = '1'></li>
                    <li class="point" data-index = '2'></li>
                    <li class="point" data-index = '3'></li>
                    <li class="point" data-index = '4'></li>
                </ul>
                <button type="button" class="bth" id="goPre"><</button>
                <button type="button" class="bth" id="goNext">></button>
            </div>
		</div>

		<script>
			var items = document.getElementsByClassName("item");
			var goPreBtn = document.getElementById("goPre");
			var goNextBtn = document.getElementById("goNext");
			var points = document.getElementsByClassName("point");
		
			var index = 0;
			var clearActive = function(){
				for(var i = 0; i < items.length; i++){
					items[i].className = "item";
				}
				for(var i=0; i<points.length;i++){     
					points[i].className = "point";
				}
			}
			var goIndex = function(){
				clearActive();
				items[index].className = "item active";
				points[index].className = "point active";
			}
		
			var goNexts = function(){
				
				if(index < 4){
					index++;
				}else{  
					index = 0;
				}
		
				goIndex();
			}
		
			var goPres = function(){
				if(index > 0){
					index--;
				}else{
					index = 4;
				}
				goIndex();
			}
			goNextBtn.addEventListener("click",function(){
				goNexts();
			})
		
			goPreBtn.addEventListener("click", function(){
				goPres();
			})
		
			for(var i = 0; i < points.length; i++){
				points[i].addEventListener("click", function(){
					var pointIndex = this.getAttribute("data-index");
					index = pointIndex;
					goIndex();
				})
			}
		</script>
		  
	</body>
 
</html>
Wannaer
关注
专栏目录
javascript实现轮播图效果
kun的博客
11-25 4684
实现效果如图：   CSS与HTML就不讲了，比较简单，大家用 笔画一下图就懂了，主要说js代码 (建议大家先把css中#container的overflow:hidden;注释掉，这样可以看得直观一点) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;js轮播图&lt;/title&gt; &lt;style t...
使用JavaScript实现轮播图
qq_54998648的博客
01-03 1531
JavaScript实现轮播效果 使用JavaScript实现简单的轮播效果 JavaScript实现轮播效果，实质就是在规定的时间内切换图片的路径。源代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播案例</title> <style> img { width: 100px; height: 100
javascript 轮播图
tangyue1997的博客
06-10 189
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{margin:0px; padding:0px;} #left{ width: 30...
用JavaScript写轮播图
weixin_42254627的博客
06-13 780
用原生js写轮播图 这里使用原生js写轮播图，过程较复杂，实际开发swiper插件、Boostrap框架等快速实现轮播效果。 分析基本模块： 1. 鼠标经过轮播区域，就显示隐藏左右按钮 2. 点击底部小圆圈，切换对应图片 3. 点击左右侧按钮，切换对应图片 4. 点击左右侧按钮，小圆圈跟随一起变化 5. 自动播放轮播图 首先这里用到了animate动画封装函数，如下： 新建一个js文件，命名为animate.js，并把以下代码复制进去 function animate(obj, target,
javaScript实现轮播图
weixin_53849180的博客
11-19 685
1.首先把结构搭建起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
完整JavaScript轮播图代码
08-09
一般用来设置网站图片自动轮播一般用来设置网站图片自动轮播
原生javaScript轮播图手写练习
最新发布
07-24
javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图...
javascript轮播图片的实现
06-07
在实现JavaScript轮播图的过程中，主要涉及以下几个步骤： 1. **引入资源**：确保引入Swiper插件的CSS和JS文件。在`index.html`中，通常会在`<head>`部分引入CSS文件，而在`<body>`底部或者`<head>`中引入JS文件。...
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
JavaScript 实现轮播图
Birdlun的博客
08-10 189
列：使用JavaScript实现轮播图 技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 页面加载完时调用此方法 定时操作：setInterval(“changeImg()”,3000); 实现方法 第一步：确定事件(onload)并为其绑定一个函数 第二步：书写绑定的这个函数 第三步：书写定时任务(setInterval) 第...
javascript实现轮播图
朝歌
04-20 421
这里使用原生代码。效果图如下。 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div class="container"> ...
JavaScript完成轮播图
hongtaochi0464的博客
04-22 1011
轮播图的思想 轮播图的思想,最简单的描述就是通过修改不可见框的left值,来实现滑动播放的效果。 这篇文章从三大步骤来写一下轮播图的实现。 (一)完成轮播图界面 (二)完成点击按钮切换图片的功能 (三)使用定时器完成轮播图的功能 完成轮播图的界面 不可见框 不可见框中应该把图片连成横向一排，像胶卷一样。 <body> <!-- #outer为不可见框部分 将所有的图片连成一排...
javascript轮播图超详细
热门推荐
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
JavaScript表单校验
mqingo的博客
11-11 985
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
js轮播图
m0_72058032的博客
08-29 331
js轮播图 分页器 前进后退按钮 鼠标悬浮离开事件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值