原生js实现轮播效果

程序员--韩同学

已于 2022-11-01 10:46:13 修改

阅读量135

点赞数 1

分类专栏： vue 文章标签： javascript css 前端

于 2022-10-31 13:13:29 首次发布

本文链接：https://blog.csdn.net/m0_60970928/article/details/127612593

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

功能概要

鼠标移到图片上显式左右按钮
点击左右按钮切换到下一个图片
自动轮播，数字跟着动
点击数字跳到对应的图片

效果实例

轮播

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index1.css"/>
	</head>
	<body>
		<div id="box">
			<div class="xiangkuang">
				<ul>
					<li><a href=""><img src="images/1.jpg" ></a></li>
					<li><a href=""><img src="images/2.jpg" ></a></li>
					<li><a href=""><img src="images/3.jpg" ></a></li>
					<li><a href=""><img src="images/4.jpg" ></a></li>
					<li><a href=""><img src="images/5.jpg" ></a></li>
				</ul>
				<ol>
					
				</ol>
			</div>
			<div id="focus">
				<span id="left">&lt;</span>
				<span id="right">&gt;</span>
			</div>
		</div>
		<script src="index1.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

css代码：

* {
margin: 0;
padding: 0;
list-style: none;
border: 0;
}

div#box {
	width: 500px;
	height: 200px;
	border: 3px solid red;
	margin: 100px auto 0;
	padding: 6px;	
	position: relative;
}

div#box div.xiangkuang {
	width: 500px;
	height: 200px;
	position: relative;
	overflow: hidden;
}

.xiangkuang ul {
	width: 3000px;
	position: absolute;
	top: 0;
	left: 0;
}

.xiangkuang ul li {
	float: left;
}

.xiangkuang ol {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.xiangkuang ol li {
	float: left;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #ccc;
	margin-left: 10px;
	line-height: 20px;
	text-align: center;
}

.xiangkuang ol li.current{
	background-color: red;
	color: #fff;
}

div#focus{
	display: none;
}

div#focus span{
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #000;
	opacity: 0.3;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	font-family: "黑体";
	position: absolute;
	left: 6px;
	top: 50%;
	border: 1px solid #ccc;
	margin-top: -20px;
}

div#focus #right{
	right: 6px;
	left:auto;
	
}

js代码：

// 获取元素
var box = document.getElementById('box')
var xiangkuang = box.children[0]
// 获取相框宽度
var width = xiangkuang.offsetWidth
var ulObj = xiangkuang.children[0]
var olObj = xiangkuang.children[1]
var focus = box.children[1]
var left = focus.children[0]
var right = focus.children[1]
console.log(box, xiangkuang, ulObj, olObj, focus, left, right)
var olList = olObj.children
var ulList = ulObj.children
var index = 0
// 创建 li
for (var i = 0; i < ulList.length; i++) {
	// 创建li标签
	var li = document.createElement("li")
	console.log(li)
	// 将创建好的li追加给olObj
	olObj.appendChild(li)
	// li添加文本
	li.innerHTML = i + 1
	// 给li设置index属性
	li.setAttribute("index", i)
	// 遍历ol‘中li绑定鼠标移入事件
	li.onmouseover = function() {
		// 清除所有的li中 current样式
		for (var j = 0; j < olObj.children.length; j++) {
			olObj.children[j].removeAttribute("class")
		}
		// 触发鼠标移入事件的li添加current样式
		this.className = "current"
		// 获取触发事件对应li的index属性值
		index = this.getAttribute("index")
		console.log(index)
		// 移动图片
		animate(ulObj, -index * width)
	}
}

// 设置ol中第一个li的默认样式
olObj.children[0].className = 'current'
// 克隆ul中第一个li 追加到ul中li最后面
ulObj.appendChild(ulObj.children[0].cloneNode(true))

// 自动轮播  定时器
var timeId = setInterval(youyi, 3000)

// 左右焦点按钮
box.onmouseover = function(){
	focus.style.display='block'
	clearInterval(timeId)
}
box.onmouseout = function(){
	focus.style.display='none'
	timeId=setInterval(youyi,3000)
}

// 右击按钮
right.onclick = youyi
// 左击按钮
left.onclick=function(){
	if(index ==0 ){
		index = 5
		ulObj.style.left = -index*width+'px'
	}
	index--
	animate(ulObj,-index*width)
	// 设置移动后的按钮颜色
	for(var i=0;i<olObj.children.length;i++){
		olObj.children[i].removeAttribute('class')
	}
	// 设置当前图片 index
	olObj.children[index].className='current'
}
// 封装 自右侧向左侧移动图片
function youyi(){
	if(index==ulList.length-1){
		index=0
		ulObj.style.left=0+'px'
	}
	index++
	animate(ulObj,-index*width)
	// 如果inde==5 当前显式的是第六张图
	if(index==ulList.length-1){
		// 清除第五个按钮的样式
		olObj.children[olObj.children.length-1].className=""
		// 给第一个按钮添加样式
		olObj.children[0].className='current'
	}else{
		// 设置移动后的按钮颜色
		for(var i=0;i<olObj.children.length;i++){
			olObj.children[i].removeAttribute('class')
		}
		// 设置当前图片 index
		olObj.children[index].className='current'
	}
}

//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
	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";
		}
	}, 10);
}

以上就是本节的内容，希望能帮到你，以后也会持续更新更多内容，想了解更多看我主页，谢谢观看！