用js实现自动和手动轮播

小咪咪 2023-06-20 06:09 18阅读 0赞

> 记得去年第一次写轮播时候，好像是写的这个小米官网首页的轮播图，当时跟着视频教程，一点一点的研究学习，劲儿头十足。今天突然想写博客，一是记录些什么，二是希望能帮到大一的学弟学妹。

先来看看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]  
  html代码很简单：

<div class="one">
    			
    			<ul id="imagelist">
    				<li><img class="one-imgs" src="images/02.png"></li>
    				<li><img class="one-imgs" src="images/03.png"></li>
    				<li><img class="one-imgs" src="images/04.png"></li>
    				<li><img class="one-imgs" src="images/05.png"></li>
    				<li><img class="one-imgs" src="images/06.png"></li>
    				<li><img class="one-imgs" src="images/02.png"></li>
    			</ul>
    			
    			<div id="one-anniu">
    				<a class="lianjie" href="javascript:;"></a>
    				<a class="lianjie" href="javascript:;"></a>
    				<a class="lianjie" href="javascript:;"></a>
    				<a class="lianjie" href="javascript:;"></a>
    				<a class="lianjie" href="javascript:;"></a>
    			</div>
    		</div>

css代码也很简单：

.one { 
    	width: 1250px;
    	height: 480px;
    	margin: 0 auto;
    	position: relative;
    	overflow: hidden;
    }
    
    #imagelist { 
    	list-style-type: none;
    	position: absolute;
    	left: 0;
    	padding: 0;
    }
    
    #imagelist li { 
    	float: left;
    }
    
    #imagelist img { 
    	width: 1250px;
    }
    
    #one-anniu { 
    	position: absolute;
    	bottom: 15px;
    	right: 20px;
    }
    
    #one-anniu a { 
    	width: 15px;
    	height: 15px;
    	margin: 0 5px;
    	background-color: #675c5c;
    	float: left;
    	opacity: 0.5;
    	/*兼容IE8透明*/
    	filter: alpha(opacity=50);
    }
    
    #one-anniu a:hover { 
    	background-color: black;
    }

主要是js代码：

window.onload = function() { 
    	//获取imgList
    	var imagelist = document.getElementById("imagelist");
    	//获取页面中所有的img标签
    	var imgs = document.getElementsByClassName("one-imgs");
    	//设置imglist的宽度
    	imagelist.style.width = 1250 * imgs.length + "px";
    	//获取导航按钮
    	var anniu = document.getElementById("one-anniu");
    	//默认显示图片的索引
    	var index = 0;
    	//获取所有的a
    	var allA = document.getElementsByClassName("lianjie");
    	//设置默认选中的效果
    	allA[index].style.backgroundColor = "black";
    	//创建一个方法用来设置选中的a
    	function setA() { 
    		//判断当前索引是否是最后一张图片
    		if(index >= imgs.length - 1) { 
    			//则将index设置为0
    			index = 0;
    			imagelist.style.left = 0;
    		}
    		for(var i = 0; i < allA.length; i++) { 
    			allA[i].style.backgroundColor = "";
    		}
    		allA[index].style.backgroundColor = "black";
    	};
    	//定义一个自动切换的定时器的标识
    	var timer;
    	//创建一个函数，用来开启自动切换图片
    	function autoChange() { 
    		//开启一个定时器，用来定时去切换图片
    		timer = setInterval(function() { 
    			//使索引自增
    			index++;
    			//判断index的值
    			index %= imgs.length;
    			//执行动画，切换图片
    			move(imagelist, "left", -1250 * index, 20, function() { 
    				//修改导航按钮
    				setA();
    			});
    
    		}, 3000);
    
    	}
    
    	function getStyle(obj, name) { 
    
    		if(window.getComputedStyle) { 
    			//正常浏览器的方式，具有getComputedStyle()方法
    			return getComputedStyle(obj, null)[name];
    		} else { 
    			//IE8的方式，没有getComputedStyle()方法
    			return obj.currentStyle[name];
    		}
    
    	}
    
    	function move(obj, attr, target, speed, callback) { 
    		//关闭上一个定时器
    		clearInterval(obj.timer);
    			
    		//获取元素目前的位置
    		var current = parseInt(getStyle(obj, attr));
    	
    		//判断速度的正负值
    		if(current > target) { 
    			//此时速度应为负值
    			speed = -speed;
    		}
    		//开启一个定时器，向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    		obj.timer = setInterval(function() { 
    			//获取原来的left值
    			var oldValue = parseInt(getStyle(obj, attr));
    			//在旧值的基础上增加
    			var newValue = oldValue + speed;
    			//向左移动时，需要判断newValue是否小于target
    			//向右移动时，需要判断newValue是否大于target
    			if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { 
    				newValue = target;
    			}
    			obj.style[attr] = newValue + "px";
    			if(newValue == target) { 
    				//达到目标，关闭定时器
    				clearInterval(obj.timer);
    				//动画执行完毕，调用回调函数
    				callback && callback();
    			}
    			
    		}, 30);
    	}
    	//为所有的超链接都绑定单击响应函数
    	for(var i = 0; i < allA.length; i++) { 
    		//为每一个超链接都添加一个num属性
    		allA[i].num = i;
    		//为超链接绑定单击响应函数
    		allA[i].onclick = function() { 
    			//关闭自动切换的定时器
    			clearInterval(timer);
    			//获取点击超链接的索引,并将其设置为index 
    			index = this.num;
    			//设置选中的a
    			setA();
    			//使用move函数来切换图片
    			move(imagelist, "left", -1250 * index, 20, function() { 
    				//动画执行完毕，开启自动切换
    				autoChange();
    			});
    		};
    	}
    	//开启自动切换图片
    	autoChange();
    };

代码里的注释很详细，就不在这多说了（毕竟好早之前写的了，嘻嘻）。  
  当然，轮播图有很多种实现方式，也有很多样式，可以根据需要根据喜好自行选择使用。  
  喜欢下面这种轮播图的可以打开我之前的博客学习哦~  
  博客链接：[用js实现简易轮播图][js]  
  博客网址：https://blog.csdn.net/qq\_43652492/article/details/96265681  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191208085400326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[js]: https://blog.csdn.net/qq_43652492/article/details/96265681
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191208090214928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 js简单实现自动轮播

//简单一个布局存放图片 <div class="lb"> 　　<div class="lbt">　　　　　　<img src="img/lunbo1.jpg" c

谁践踏了优雅/ 2023年08月17日 16:51/ 0 赞/ 151 阅读

相关用js实现自动和手动轮播

> 记得去年第一次写轮播时候，好像是写的这个小米官网首页的轮播图，当时跟着视频教程，一点一点的研究学习，劲儿头十足。今天突然想写博客，一是记录些什么，二是希望能帮到大一的学弟学

小咪咪/ 2023年06月20日 06:09/ 0 赞/ 19 阅读

相关 js实现轮播和滑动轮播

js的轮播图无论网页还是移动端都随处可见，本文用简单的方法来实现js的普通轮播图与滑动轮播图。（废话不多说，关键思路都写在代码注释处） js普通轮播简单描述一下js普

矫情吗；*/ 2023年02月18日 08:27/ 0 赞/ 176 阅读

相关 PC端JS轮播图（自动+手动）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

电玩女神/ 2023年01月08日 02:10/ 0 赞/ 296 阅读

相关轮播图实现（手动+自动）

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

冷不防/ 2022年12月11日 13:33/ 0 赞/ 425 阅读

相关 js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。\\ > 特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！ 1.先新建一个文件，随意命名

喜欢ヅ旅行/ 2022年11月25日 10:20/ 0 赞/ 594 阅读

相关 html简单实现自动轮播代码怎么写,js+html+css实现手动轮播和自动轮播

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码，供大家参考，具体内容如下原理：设置图片层的总长=单张图片长度\张数；在轮播层中利用overflo

左手的ㄟ右手/ 2022年10月05日 10:46/ 0 赞/ 475 阅读

相关 JS实现图片轮播效果（自动和手动）

本次轮播效果图如下：![20180530162018480][] 具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 ps:由

小灰灰/ 2022年05月23日 01:26/ 0 赞/ 398 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 565 阅读

相关 JS实现轮播图（手动切换+自动切换两种方法）

1.轮播图效果图 ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

水深无声/ 2022年03月20日 12:38/ 0 赞/ 369 阅读