js实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量123 收藏
点赞数
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45378970/article/details/108842184
版权

复制下面的代码查看神奇的效果(有趣的特效轮播图)

html部分

		<div id="outer">
			<ul id="imgList">
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
				<li><img src="img/5.jpg" alt=""></li>
				<li><img src="img/1.jpg" alt=""></li>
			</ul>
			<div id="nav">
				<a href="" class="current"></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
			</div>
			<div id="span">
				<span class="left" id="left"><</span>
				<span class="right" id="right">></span>
			</div>
		</div>

css部分

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 500px;
				height: 200px;
				overflow: hidden;
				margin: 100px auto;
				position: relative;
			}
			#outer #imgList{
				list-style: none;
				position: absolute;
				left: 0;
				top: 0;
			}
			div#outer #imgList li{
				float: left;
			}
			#imgList li>img{
				width: 500px;
				height: 200px;
			}
			div#nav{
				width: 170px;
				height: 30px;
				position: absolute;
				bottom: 5px;
			}
			#nav a{
				display: inline-block;
				margin: 5px;
				border: 1px solid #FF0000;
				width: 15px;
				height: 15px;
				background: #FF0000;
			}
			#nav a.current{
				background: #FFA500;
			}
			div#span{
				display: none;
			}
			span{
				position: absolute;
				top: 50%;
				margin-top:-20px;
				font-size: 25px;
				display: block;
				width: 30px;
				height: 35px;
				line-height: 35px;
				background: #CCCCCC;
				text-align: center;
				cursor: pointer;
			}
			#span .right{
				right:0;
			}
		</style>

js部分

	<script type="text/javascript">
			function mFun$(id){
				return  document.getElementById(id);
			}
			//获取outer
			var box=mFun$('outer');
			//获取相框宽度
			var imgWidth=box.offsetWidth;
			//获取ul
			var ul=box.children[0];
			//获取所有的img
			var images=document.getElementsByTagName('img');
			//给ul设置宽度
			ul.style.width=500*images.length+'px';
			//获取导航
			var nav=mFun$('nav');
			var width=nav.offsetWidth;
			//导航居中
			nav.style.left=(imgWidth-width)/2+'px';
			var span=mFun$('span');
			//获取所有的a标签
			var aAll=document.getElementsByTagName('a');
			for(var i=0;i<aAll.length;i++){
				aAll[i].num=i;
				aAll[i].οnmοuseοver=function(){
					index=this.num;
					animate(ul,-index*imgWidth);
					//排它事件
					for(var j=0;j<aAll.length;j++){
						aAll[j].removeAttribute('class');
					}
					this.className='current';
				}
			}
			//设置任意的一个元素,移动到指定的目标位置
			function animate(element, target,callback) {
			  clearInterval(element.timeId);
			  //定时器的id值存储到对象的一个属性中
			  element.timeId = setInterval(function () {
			    //获取元素的当前的位置,数字类型
			    var current = element.offsetLeft;
			    //每次移动的距离
			    var step = 10;
			    step = current < target ? step : -step;
			    //当前移动到位置
			    current += step;
			    if (Math.abs(current - target) > Math.abs(step)) {
			      element.style.left = current + "px";
			    } else {
			      //清理定时器
			      clearInterval(element.timeId);
			      //直接到达目标
			      element.style.left = target + "px";
				  callback && callback()
			    }
			  }, 30);
			}
			//自动播放
			var timer=setInterval(f1,3000);
			//移入移出
			box.οnmοuseοver=function(){
				span.style.display='block';
				clearInterval(timer);
			}
			box.οnmοuseοut=function(){
				span.style.display='none';
				timer=setInterval(f1,1000);
			}
			//右边按钮
			var index=0;
			var flag=true; //节流阀
			mFun$('right').οnclick=f1;
			function f1(){
				if(flag){
					flag=false;
					if(index==images.length-1){
						index=0;
						ul.style.left=0;
					}
					index++;
					animate(ul,-index*imgWidth,function(){
						flag=true;
					});
					if(index==images.length-1){
						//删除第5个按钮的背景颜色
						aAll[aAll.length-1].removeAttribute('class');
						aAll[0].className='current';
					}else{
						//去除所以的颜色
						for(var i=0;i<aAll.length;i++){
							aAll[i].removeAttribute('class');
						}
						aAll[index].className='current';
					}
				}
				if(index==images.length-1){
					index=0;
					ul.style.left=0;
				}
				index++;
				animate(ul,-index*imgWidth);
				if(index==images.length-1){
					//删除第5个按钮的背景颜色
					aAll[aAll.length-1].removeAttribute('class');
					aAll[0].className='current';
				}else{
					//去除所以的颜色
					for(var i=0;i<aAll.length;i++){
						aAll[i].removeAttribute('class');
					}
					aAll[index].className='current';
				}
			}
			//左边按钮
			mFun$('left').οnclick=function(){
				if(flag){
					flag=false;
					if(index==0){
						index=5;
						ul.style.left=-index*imgWidth+'px';
					}
					index--;
					animate(ul,-index*imgWidth,function(){
						flag=true;
					});
					for(var i=0;i<aAll.length;i++){
						aAll[i].removeAttribute('class');
					}
					aAll[index].className='current';
				}
				if(index==0){
					index=5;
					ul.style.left=-index*imgWidth+'px';
				}
				index--;
				animate(ul,-index*imgWidth);
				for(var i=0;i<aAll.length;i++){
					aAll[i].removeAttribute('class');
				}
				aAll[index].className='current';
			}
		</script>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 500px;
				height: 200px;
				overflow: hidden;
				margin: 100px auto;
				position: relative;
			}
			#outer #imgList{
				list-style: none;
				position: absolute;
				left: 0;
				top: 0;
			}
			div#outer #imgList li{
				float: left;
			}
			#imgList li>img{
				width: 500px;
				height: 200px;
			}
			div#nav{
				width: 170px;
				height: 30px;
				position: absolute;
				bottom: 5px;
			}
			#nav a{
				display: inline-block;
				margin: 5px;
				border: 1px solid #FF0000;
				width: 15px;
				height: 15px;
				background: #FF0000;
			}
			#nav a.current{
				background: #FFA500;
			}
			div#span{
				display: none;
			}
			span{
				position: absolute;
				top: 50%;
				margin-top:-20px;
				font-size: 25px;
				display: block;
				width: 30px;
				height: 35px;
				line-height: 35px;
				background: #CCCCCC;
				text-align: center;
				cursor: pointer;
			}
			#span .right{
				right:0;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
				<li><img src="img/5.jpg" alt=""></li>
				<li><img src="img/1.jpg" alt=""></li>
			</ul>
			<div id="nav">
				<a href="" class="current"></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
			</div>
			<div id="span">
				<span class="left" id="left"><</span>
				<span class="right" id="right">></span>
			</div>
		</div>
		<script type="text/javascript">
			function mFun$(id){
				return  document.getElementById(id);
			}
			//获取outer
			var box=mFun$('outer');
			//获取相框宽度
			var imgWidth=box.offsetWidth;
			//获取ul
			var ul=box.children[0];
			//获取所有的img
			var images=document.getElementsByTagName('img');
			//给ul设置宽度
			ul.style.width=500*images.length+'px';
			//获取导航
			var nav=mFun$('nav');
			var width=nav.offsetWidth;
			//导航居中
			nav.style.left=(imgWidth-width)/2+'px';
			var span=mFun$('span');
			//获取所有的a标签
			var aAll=document.getElementsByTagName('a');
			for(var i=0;i<aAll.length;i++){
				aAll[i].num=i;
				aAll[i].οnmοuseοver=function(){
					index=this.num;
					animate(ul,-index*imgWidth);
					//排它事件
					for(var j=0;j<aAll.length;j++){
						aAll[j].removeAttribute('class');
					}
					this.className='current';
				}
			}
			//设置任意的一个元素,移动到指定的目标位置
			function animate(element, target,callback) {
			  clearInterval(element.timeId);
			  //定时器的id值存储到对象的一个属性中
			  element.timeId = setInterval(function () {
			    //获取元素的当前的位置,数字类型
			    var current = element.offsetLeft;
			    //每次移动的距离
			    var step = 10;
			    step = current < target ? step : -step;
			    //当前移动到位置
			    current += step;
			    if (Math.abs(current - target) > Math.abs(step)) {
			      element.style.left = current + "px";
			    } else {
			      //清理定时器
			      clearInterval(element.timeId);
			      //直接到达目标
			      element.style.left = target + "px";
				  callback && callback()
			    }
			  }, 30);
			}
			//自动播放
			var timer=setInterval(f1,3000);
			//移入移出
			box.οnmοuseοver=function(){
				span.style.display='block';
				clearInterval(timer);
			}
			box.οnmοuseοut=function(){
				span.style.display='none';
				timer=setInterval(f1,1000);
			}
			//右边按钮
			var index=0;
			var flag=true; //节流阀
			mFun$('right').οnclick=f1;
			function f1(){
				if(flag){
					flag=false;
					if(index==images.length-1){
						index=0;
						ul.style.left=0;
					}
					index++;
					animate(ul,-index*imgWidth,function(){
						flag=true;
					});
					if(index==images.length-1){
						//删除第5个按钮的背景颜色
						aAll[aAll.length-1].removeAttribute('class');
						aAll[0].className='current';
					}else{
						//去除所以的颜色
						for(var i=0;i<aAll.length;i++){
							aAll[i].removeAttribute('class');
						}
						aAll[index].className='current';
					}
				}
				if(index==images.length-1){
					index=0;
					ul.style.left=0;
				}
				index++;
				animate(ul,-index*imgWidth);
				if(index==images.length-1){
					//删除第5个按钮的背景颜色
					aAll[aAll.length-1].removeAttribute('class');
					aAll[0].className='current';
				}else{
					//去除所以的颜色
					for(var i=0;i<aAll.length;i++){
						aAll[i].removeAttribute('class');
					}
					aAll[index].className='current';
				}
			}
			//左边按钮
			mFun$('left').οnclick=function(){
				if(flag){
					flag=false;
					if(index==0){
						index=5;
						ul.style.left=-index*imgWidth+'px';
					}
					index--;
					animate(ul,-index*imgWidth,function(){
						flag=true;
					});
					for(var i=0;i<aAll.length;i++){
						aAll[i].removeAttribute('class');
					}
					aAll[index].className='current';
				}
				if(index==0){
					index=5;
					ul.style.left=-index*imgWidth+'px';
				}
				index--;
				animate(ul,-index*imgWidth);
				for(var i=0;i<aAll.length;i++){
					aAll[i].removeAttribute('class');
				}
				aAll[index].className='current';
			}
		</script>
	</body>
</html>
是小王啊i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js实现轮播图(3种轮播图).zip
12-28
在前端开发中，轮播图（Carousel）是一...以上内容涵盖了纯JavaScript实现轮播图所需的核心知识点，通过学习和实践这三种不同的轮播图实现，开发者可以深入理解JavaScript在前端动态效果中的应用，提升自己的前端技能。
原生js实现轮播图特效
11-21
鼠标不经过轮播图，轮播图也会自动播放图片。 ​ 6.鼠标经过，轮播图模块， 自动播放停止。 此文章的代码为一个完整的轮播图的实现代码，复制即可运行 实现效果由于大小问题无法上传，可自行观看淘宝或京东首页轮播...
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
JS实战——轮播图
热门推荐
qq_65715980的博客
07-06 3万+
html+css+js实现目前各大网站上轮播图的效果，可以利用我的代码稍加改装就能实现想要的效果。
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 451
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
JS实现轮播图(超详细代码注释)
m0_56836274的博客
08-24 2万+
html，css,javasript实现轮播图,超详细代码注释。实现的功能有：自动轮播，鼠标放上去停止轮播，鼠标离开自动轮播，点击下方小圆圈实现图片切换，点击左右按钮实现切换
JS实现轮播图
WYF857446152的博客
05-17 7062
用JS实现轮播图
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
js实现轮播图效果 纯js实现图片自动切换
11-19
本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片； 2. 鼠标离开，恢复自动播放； 3. 点击...
JavaScript实现轮播图片完整代码
10-15
JavaScript 实现轮播图片是一种常见的网页动态效果，用于展示多张图片并自动切换，提供良好的用户体验。本示例代码提供了一种简洁的实现方法，主要包括以下几个关键知识点： 1. HTML 结构：HTML 部分定义了一个包含...
js所写轮播图的方法
11-23
js所写轮播图方法：<div class="banner" id="box"> <ul id="ulList"> <li><img src="images/01.jpg" alt="" id="pic1"/></li> <li><img src="images/02.jpg" alt=""/></li> <li><img src="images/03.jpg" alt=""/></li> <li><img src="images/04.jpg" alt=""/></li> <li><img src="images/05.jpg" alt=""/></li> </ul> <ol id="circle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <img src="images/left.jpg" id="left"> <img src="images/right.jpg" id="right"> </div>
JavaScript实现图片轮播组件代码示例
10-21
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
前端JavaScript实现轮播图效果
04-11
最后，我们需要编写JavaScript代码来实现轮播图的动态切换和交互功能。在`slide.js`文件中，我们可以创建一个定时器来自动切换图片，并添加点击事件来允许用户手动切换。以下是一个基本的实现： ```javascript let ...
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
JS轮播图详解
weixin_75154342的博客
09-17 3750
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值