js轮播图最容易懂的代码_容易点的轮播图-CSDN博客

本文链接：https://blog.csdn.net/weixin_46265287/article/details/109035615

js轮播图

HTML代码块
Css代码块
js代码块
- tools.js 需要引用进去或者直接加在最后

HTML代码块

<body>
		<!--容器-->
		<div id="outer">
			<!--图片-->
			<ul id="imgList">
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
				<li><img src="img/5.jpg" /></li>
				<li><img src="img/6.jpg" /></li>
				<li><img src="img/1.jpg" /></li>
			</ul>
			<!--小点-->
			<div id="navDiv">
				<a href="javascipt:;"></a>
				<a href="javascipt:;"></a>
				<a href="javascipt:;"></a>
				<a href="javascipt:;"></a>
				<a href="javascipt:;"></a>
				<a href="javascipt:;"></a>
				</ul>
			</div>
		</div>
	</body>

Css代码块

* {
				margin: 0;
				padding: 0;
			}
			
			#outer {
				width: 340px;
				height: 480px;
				margin: 50px auto;
				background-color: yellowgreen;
				/*设置上下的padding*/
				padding: 10px 0;
				position: relative;
				overflow: hidden;
			}
			/*设置imgList去除项目符号*/
			
			#imgList {
				list-style: none;
				position: absolute;
				/* px*/
			}
			
			#imgList li {
				/*设置浮动*/
				float: left;
				/*设置左右边距*/
				margin: 0 10px;
			}
			
			#navDiv {
				position: absolute;
				bottom: 15px;
			}
			
			#navDiv a {
				float: left;
				width: 15px;
				height: 15px;
				background-color: red;
				margin: 0 5px;
				border-radius: 50%;
				opacity: 0.5;
			}
			
			#navDiv a:hover {
				background-color: black;
			}

js代码块

		//获取取图片的ul
		var imgList = document.getElementById('imgList');
		//获取所有图片
		var imgArr = document.getElementsByTagName('img');
		//设置 ul的宽度
		var oldValue = imgList.style.width = (imgArr.length) * 340 + 'px';
		//获取	outer
		var outer = document.getElementById('outer');
		//	获取 navDiv
		var navDiv = document.getElementById('navDiv');
		//给navDiv设置left值
		navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + 'px';
		//给a设置相应事件
		//获取a
		var allA = document.getElementsByTagName('a');

		//设置一个变量,默认第一个
		var index = 0;
		var count;
		//给一个默认第一个
		allA[index].style.backgroundColor = 'black';

		//一开始先调用函数让他自己动起来
		outoChange();
		//第一步
		for(var i = 0; i < allA.length; i++) {
			//设置点击a跳转
			allA[i].num = i;
			allA[i].onclick = function() {
				//获取点击的a的索引
				index = this.num;
				//修改正在选中的a
				setA();
				//关闭自动切换到的定时器
				clearInterval(count);
				//使用move进行移动
				move(imgList , 'left',-340*index , 50 ,function(){
				//动画执行完毕继续执行自动函数动画
				outoChange();
				//切换图片
				imgList.style.left = -340 * index + 'px';
				});
				
			}
			
		}

		//第二步
		//创建一个点击a之后的函数
		function setA() {
			//判断当前索引是否是最后一张
			if(index>=imgArr.length-1){
				index = 0;
				//进入判断的最后一张和第一张一模一样
				//通过css将最后一张直接换成第一张
				imgList.style.left = 0 + 'px';
			}
			for(var i = 0; i < allA.length; i++) {
				allA[i].style.backgroundColor = 'red';
			}
			allA[index].style.backgroundColor = 'black';
		}

		//第三步
		//自动切换函数 创建一个函数用来开启轮播
		function outoChange(){
			//开始定时器 定时去切换
			count = setInterval(function(){
				//索引自增
				index++;
				//判断index的值
				index %=imgArr.length;
				//执行图片切换
				move(imgList , 'left',-340*index , 50 ,function(){
				//修改a的选择
				setA();
				});
			
			},3000);
		}

tools.js 需要引用进去或者直接加在最后

	//获取元素属性的方法
	function getStyle(obj, name) {
	if(window.getComputedStyle) {
		return getComputedStyle(obj, null)[name];
	} else {
		return obj.currentStyle[name];
	}
}

/*
 *obj 要执行动画的obj 
 * attr 也要执行动画的样式 eg:left top width height
 * speed  速度  有正负
 * target 
 * */
function move(obj, attr, target, speed,callback) {
	//停止上一次的计时器
	clearInterval(obj.timer);
	//判断速度的正负
	//0-800 则speed为正
	//800-0则speed为负
	//获取元素目前的位置
	var count = parseInt(getStyle(obj, "left"));
	if(count > target) {
		speed = -speed;
	}
	//给 执行的obj单独添加属性 用来保存她自己的标识
	obj.timer = setInterval(function() {
		//获取刚开始的left
		var oldValue = parseInt(getStyle(obj, attr));
		//获取新的left
		var newValue = oldValue + speed;
		//当达到800时停止
		//target
		///向左移动的时候,需要判断newValue是否小于targert
		//向右移动的时候,需要判断newValue是否大于targert
		if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
			newValue = target
		}
		//给box赋值 left
		obj.style[attr] = newValue + 'px';
		//当元素到达时停止定时器
		if(newValue == target) {
			clearInterval(obj.timer);
			//动画执行完毕 执行调用函数
			//判断有无传回调函数
			if(callback){
				callback();
			}else{
				callback;
			}
			
		}
	}, 30);
}