HTML+css+JavaScript实现手动和自动轮播

最新推荐文章于 2024-04-15 03:02:33 发布

℡52Hz★

最新推荐文章于 2024-04-15 03:02:33 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/qq_53541336/article/details/132832788

版权

案例分享专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天来更新一个前端必备且常见的案例-轮播图，本文章主要应用到的技术包含HTML、css、js,对于轮播的实现主要依赖于js。

（一）HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图的实现</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="slider" id="slider">
			<div class="slider_scroll" id="slider_scroll">
				<div class="slider_main" id="slider_main">
					<div class="item">
						<a href="#"><img src="images/pic1.jpeg" alt=""></a>
					</div>
					<div class="item">
						<a href="#"><img src="images/pic2.jpeg" alt=""></a>
					</div>
					<div class="item">
						<a href="#"><img src="images/pic3.jpeg" alt=""></a>
					</div>
					<div class="item">
						<a href="#"><img src="images/pic4.jpeg" alt=""></a>
					</div>
				</div>
				<span class="next" id="next"></span>
				<span class="prev" id="prev"></span>
			</div>
			<div class="slider_index" id="slider_index"></div>
		</div>
		<script src="js/app2.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>

（二）css部分

写这里之前一定要记得提前写一个公共样式哦，我就不再重复写了。

.slider{
	width: 600px;
	height: 500px;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}
.slider .slider_scroll,.slider_main{
	width: 600px;
	height: 500px;
	position: relative;
}
.slider_main .item{
	width: 600px;
	height: 500px;
	position: absolute;
}
.slider_main .item img{
	width: 600px;
	height: 500px;
}
.slider_scroll span{
	position: absolute;
	width: 30px;
	height: 68px;
	background: url('../images/icon-slides.png') no-repeat;
	top: 50%;
	margin-top: 34px;
	cursor: pointer;
}
.slider_scroll span.next{
	right: 0;
	background-position: -46px 0;
}
.slider_scroll span.prev{
	left: 0;
	background-position: 0 0;
}
.slider_index{
	width: 600px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: 700;
	z-index: 20;
	color: #fff;
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	bottom: 0;
	cursor: pointer;
}
.slider_index .slider_index_icon{
	line-height: 40px;
	display: inline-block;
	margin: 0 10px;
}
.slider_index .slider_index_icon.current{
	color: #fc0;
}

（三）js部分

app2的js代码

var speed=0;
function startAnimation(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(()=>{
		var cur=0;
		var flag=true;//标杆
		for(var attr in json){
			//透明度变化处理
			switch(attr){
				case 'opacity':
					cur=Math.round(parseFloat(getStyle(obj,attr))*100)//转化成浮点型
				break;
				case 'scrollTop':
					cur=obj[attr]
				break;
				default:
					cur=parseInt(getStyle(obj,attr));//获取样式变量
				break;
			}
			//求速度
			speed=(json[attr]-cur)/20;
			speed=json[attr]>cur?Math.ceil(speed):Math.floor(speed)
			//处理临界问题
			if(json[attr]!==cur){
				flag=false
			}
			switch(attr){
				case 'opacity':
					obj.style[attr]=`alpha(opacity:${cur+speed})`;
					obj.style[attr]=(cur+speed)/100;
				break;
				case 'scrollTop':
					obj.scrollTop=cur+speed;
				break;
				default:
					obj.style[attr]=cur+speed+'px'
				break;
			}
		}
		if(flag){
			clearInterval(obj.timer)
			if(fn){
				fn();
			}
			return
		}
		
	},30)
}
function getStyle(obj,attr){
	if(obj.currentStyle){
		//兼容ie
		return obj.currentStyle[attr]
	}else{
		//兼容主流浏览器
		return getComputedStyle(obj,null)[attr]
	}
}

index的js代码

window.onload=()=>{
	//获取标签
	var slider=document.getElementById('slider');
	var slider_main=document.getElementById('slider_main');
	var allBoxs=slider_main.children;
	var next=document.getElementById('next');
	var prev=document.getElementById('prev');
	var slider_index=document.getElementById('slider_index')
	var iNow=0;//当前可视元素的索引
	var timer=null;
	//动态创建索引器
	for(var i=0;i<allBoxs.length;i++){
		var span=document.createElement('span');
		if(i===0){
			span.className='slider_index_icon current';
		}else{
			span.className='slider_index_icon';
		}
		span.innerText= i + 1;
		slider_index.appendChild(span)
	}
	//让滚动的元素归位
	var scroll_w=parseInt(getStyle(slider,'width'));
	console.log(scroll_w)
	for(var j=1;j<allBoxs.length;j++){
		allBoxs[j].style.left=scroll_w+'px'
	}
	//监听下一张按钮事件
	next.onclick=function(){
		//让当前可视元素动画左移
		startAnimation(allBoxs[iNow],{
			'left':-scroll_w
		})
		//让iNow更新
		iNow++;
		if(iNow>=allBoxs.length){
			iNow=0;
		}
		allBoxs[iNow].style.left=scroll_w+'px'
		startAnimation(allBoxs[iNow],{
			'left':0
		})
		//改变索引
		changeIndex(0)
	}
	//监听上一张按钮事件
	prev.onclick=function(){
		//当前元素快速右移
		startAnimation(allBoxs[iNow],{
			'left':scroll_w
		})
		//让iNow更新
		iNow--;
		if(iNow<0){
			iNow=allBoxs.length-1;
		}
		allBoxs[iNow].style.left=-scroll_w+'px'
		startAnimation(allBoxs[iNow],{
			'left':0
		})
		//改变索引
		changeIndex()
	}
	//开启定时器 自动播放
	timer=setInterval(autoPlay,3000);
	function autoPlay(){
		//让当前可视元素动画左移
		startAnimation(allBoxs[iNow],{
			'left':-scroll_w
		})
		//让iNow更新
		iNow++;
		if(iNow>=allBoxs.length){
			iNow=0;
		}
		allBoxs[iNow].style.left=scroll_w+'px'
		startAnimation(allBoxs[iNow],{
			'left':0
		})
		//改变索引
		changeIndex(0)
	}
	slider.onmouseover=function(){
		clearInterval(timer)
	}
	slider.onmouseout=function(){
		timer=setInterval(autoPlay,3000)
	}
	var slider_index_icons=slider_index.children;
	//遍历索引器，添加监听事件
	for(var i=0;i<slider_index_icons.length;i++){
		slider_index_icons[i].onmousedown=function(){
			//获取当前点击的索引
			var index=parseInt(this.innerText)-1;
			//点击的索引与当前的iNow进行对比
			if(index>iNow){
				startAnimation(allBoxs[iNow],{
					'left':-scroll_w
				})
				allBoxs[index].style.left=scroll_w+'px'
			}else if(index<iNow){
				startAnimation(allBoxs[iNow],{
					'left':scroll_w
				})
				allBoxs[index].style.left=-scroll_w+'px'
			}
			iNow=index;
			startAnimation(allBoxs[iNow],{
				'left':0
			})
			changeIndex()
		}
	}
	//控制当前的索引
	function changeIndex(){
		for(var i=0;i<slider_index_icons.length;i++){
			slider_index_icons[i].className='slider_index_icon'
		}
		slider_index_icons[iNow].className='slider_index_icon current';
		
	}
}

（四）效果展示

轮播图

℡52Hz★

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML+css+JavaScript实现手动和自动轮播

今天来更新一个前端必备且常见的案例-轮播图，本文章主要应用到的技术包含HTML、css、js,对于轮播的实现主要依赖于js。写这里之前一定要记得提前写一个公共样式哦，我就不再重复写了。index的js代码。
复制链接

扫一扫