JavaScript 实现轮播图

最新推荐文章于 2024-03-29 08:09:33 发布
最新推荐文章于 2024-03-29 08:09:33 发布
阅读量204 收藏 4
点赞数 2
文章标签： JavaScript 实现轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44439442/article/details/87792091
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{width: 590px;height: 470px;margin:50px auto;position: relative;}
		#cont div{display: none;}
		#cont .sel{display: block;}
		#box1{position: absolute;top:50%;margin-top: -16px;width: 100%;}
		.al{float: left;width: 28px;height: 38px;background: rgb(0,0,0,0.5);padding: 2px}
		.ar{float: right;width: 28px;height: 38px;background: rgb(0,0,0,0.5);padding: 2px;}
		.oul{position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);}
		li{list-style: none;width: 10px;height: 10px;border: 1px solid gray;border-radius: 50%;float: left;margin-right: 10px;}
		.oul .oli{background: #fff;}
	</style>
</head>
<body>
	<div id="box">
		<!-- 轮播图 -->
		<div id="cont">
			<div class="sel"><img src="../images/l1.jpg"></div>
			<div><img src="../images/l2.jpg"></div>
			<div><img src="../images/l3.jpg"></div>
			<div><img src="../images/l4.jpg"></div>
		</div>
       <!--  指示器 -->
        <ol class="oul">
        	<li class="oli"></li>
        	<li></li>
        	<li></li>
        	<li></li>
        </ol>
		<!-- 箭头 -->
		<div id='box1'>
			<img src="../images/left.png" class="arrow al">
			<img src="../images/right.png" class="arrow ar">
		</div>
		
	</div>

	<script type="text/javascript">
		var os=document.getElementById('cont').getElementsByTagName('div');
		var oc=document.getElementById('box');//轮播区
		var arrows=document.getElementsByClassName('arrow');
		var lis=document.getElementsByClassName('oul')[0].getElementsByTagName('li');

		var index=0;//当前显示的轮播索引
        var len=os.length;//轮播图个数
		var t;

		//1.自动轮播
		t=setInterval(moveNext,2000);
        //2.鼠标进入，停止轮播
        oc.onmouseenter=function(){
        	oc.style.cursor='pointer';
        	clearInterval(t);
        }
        //3.鼠标离开，继续
        oc.onmouseleave=function(){
            t=setInterval(moveNext,2000);
        }

        //4.箭头轮播
        for(var i=0;i<arrows.length;i++){
        	arrows[i].onmouseenter=function(){
        		this.style.background='rgb(0,0,0,0.6)';
            };
            arrows[i].onmouseleave=function(){
            	this.style.background='rgb(0,0,0,0.5)';
            }
        } 
         //左箭头
         arrows[0].onclick=function(){
             movePre();
         }
         //右箭头
         arrows[1].onclick=function(){
         	moveNext();
         }

        
        //5.指示器
        for(var j=0;j<len;j++){
        	lis[j]._index=j;//为每一个li新增属性，赋值为当前索引
        	lis[j].onclick=function(){
        		//当前显示的修改
        		lis[index].className='';
        		os[index].className='';

        		//被点击的改变
        		this.className='oli';
        		os[this._index].className='sel';
        		index=this._index;//修改index值
        	}
        }
       
		//显示下一张
		function moveNext(){
			//当前显示的置为不显示
            os[index].className='';
            lis[index].className='';
			index++;//索引增加
			//最后一张
			if(index==len){
				index=0;
			}
			//下一张显示
			os[index].className='sel';
			lis[index].className='oli';
		}

		//显示上一张
		function movePre(){
			//当前显示的置为不显示
			os[index].className='';
			lis[index].className='';
			index--;
			//把第一张调整为最后一张
			if(index==-1){
				index=len-1;
			}
			//上一张显示
			os[index].className='sel';
			// lis[index].className='oli';
		}
	</script>
</body>
</html>

 

南归.
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯HTML与JavaScript实现轮播图
weixin_50256767的博客
09-06 498
轮播图
HTML+CSS+JavaScript实现轮播图
weixin_43396749的博客
11-24 2722
HTML+CSS+JavaScript实现轮播图
javaScript实现轮播图
qq_45295297的博客
09-10 79
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div id="box" style="width: 90%;height: 150px;margin: 0 auto"> <img id="img1" src=
Javascript实现轮播图
wuyaohui233的博客
05-04 129
【代码】Javascript实现轮播图。
JavaScript实现图片切换
weixin_43228946的博客
08-15 841
JavaScript实现点击按钮从而使图片切换
使用JavaScript实现图片的自动轮播
Sun_blog
09-21 5474
在网站开发中，经常会遇到需要展示多张图片并自动切换的需求，这就需要使用JavaScript来实现图片的自动轮播功能。本文将通过一个简单的例子，演示如何用JavaScript实现图片的自动轮播，并确保代码占比不高于50%。通过上述步骤，我们成功实现了使用JavaScript来实现图片的自动轮播。在HTML结构中，我们使用标签来表示图片，并给每个图片设置了唯一的id。在CSS样式中，我们使用绝对定位和过渡效果来实现图片切换的动画效果。
【JS】使用JavaScript实现轮播图
点滴记忆
07-19 453
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
使用JavaScript实现轮播图功能（超详细）
rr20060119的博客
03-29 903
通过自动或手动切换，轮播图能够有效地吸引用户的注意力，并展示重要的信息。在本篇博客中，我们将详细介绍如何使用原生JavaScript来实现一个简单的轮播图功能。切换图片：编写一个函数来切换图片，通过改变轮播图容器的transform属性来实现。首先，我们创建一个简单的HTML结构，其中包含轮播图的容器、图片和控制按钮。现在，我们使用JavaScript来实现轮播图的功能。设置状态：为轮播图设置一个当前索引状态，用于跟踪当前显示的图片。HTML结构：创建一个包含图片和轮播图控制按钮的HTML结构。
HTML+CSS+JavaScript实现轮播图效果
热门推荐
apple_54470279的博客
04-11 2万+
轮播图的效果有很多种，做起来也挺有意思。本文所做的轮播图没有添加动画效果，适合不会动画的初学者参考。如果对动画感兴趣，之后我也会分享添加了动画效果的轮播图。
JavaScript实现轮播图
再中二也会被现实打败
10-16 221
JavaScript实现轮播图
JavaScript实现图片轮播组件代码示例
10-21
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。
前端JavaScript实现轮播图效果
04-11
使用HTML+CSS+JavaScript实现轮播图效果，可以自动切换，有完整的点击事件。所有代码都有详细注释，适合初学者参考。
JavaScript实现轮播图片完整代码
10-15
JavaScript 实现轮播图片是一种常见的网页动态效果，用于展示多张图片并自动切换，提供良好的用户体验。本示例代码提供了一种简洁的实现方法，主要包括以下几个关键知识点： 1. HTML 结构：HTML 部分定义了一个包含...
JavaScript实现轮播图特效
10-15
使用JavaScript实现轮播图的核心功能，包括自动播放、鼠标悬停暂停、点击箭头切换和点击索引跳转。 ```javascript // 获取元素 var slider = document.getElementById('slider'); var list = document....
LGK160I（2T4T）.pdf
06-20
LGK160I（2T4T）.pdf
小波神经网络MATLAB仿真模拟源程序
06-20
小波神经网络MATLAB仿真模拟源程序 人工智能学习 MATLAB小波神经网络仿真模拟程序
tensorflow-gpu-2.8.2-cp37-cp37m-win-amd64.whl
最新发布
06-20
format在python中的用法
PyOpenGL-3.1.6-cp310-cp310-win-amd64.whl
06-20
PyOpenGL-3.1.6-cp310-cp310-win_amd64.whl，之前的下载PyOpenGL网页消失了。
原生JavaScript实现轮播图
03-24
非常好的问题！以下是一个基本的原生 JavaScript 轮播图实现： HTML ```html <div class="slider"> <div class="slider-wrapper"> <div class="slider-item"></div> <div class="slider-item"></div> <div class="slider-item"></div> </div> <div class="slider-nav"> <a class="slider-prev" href="#">Prev</a> <a class="slider-next" href="#">Next</a> </div> </div> ``` CSS ```css .slider { position: relative; width: 100%; height: 300px; overflow: hidden; } .slider-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; transition: transform 0.3s ease-in-out; } .slider-item { height: 100%; width: 33.333%; } .slider-nav { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; } .slider-prev, .slider-next { margin: 0 10px; padding: 5px 10px; background-color: #ddd; border-radius: 3px; } .slider-prev:hover, .slider-next:hover { background-color: #bbb; } ``` JavaScript ```js const sliderWrapper = document.querySelector('.slider-wrapper'); const prevBtn = document.querySelector('.slider-prev'); const nextBtn = document.querySelector('.slider-next'); const sliderItems = document.querySelectorAll('.slider-item'); const itemWidth = sliderItems[0].offsetWidth; let position = 0; nextBtn.addEventListener('click', () => { position -= itemWidth; if (position < -itemWidth * (sliderItems.length - 1)) { position = 0; } moveToPosition(); }); prevBtn.addEventListener('click', () => { position += itemWidth; if (position > 0) { position = -itemWidth * (sliderItems.length - 1); } moveToPosition(); }); function moveToPosition() { sliderWrapper.style.transform = `translateX(${position}px)`; } ``` 这个例子通过改变 sliderWrapper 的 transform 属性来移动轮播图的位置。prevBtn 和 nextBtn 的点击事件分别减小或增加 position 值，而 moveToPosition 函数将新的 position 值应用到 sliderWrapper 上，实现轮播图的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值