轮播图效果实现

最新推荐文章于 2023-07-29 19:04:37 发布

纵马且长歌

最新推荐文章于 2023-07-29 19:04:37 发布

阅读量522

点赞数 1

分类专栏： Web 文章标签： javascript css html html5 前端

本文链接：https://blog.csdn.net/no2015214099/article/details/105116204

版权

Web 专栏收录该内容

18 篇文章 9 订阅

订阅专栏

轮播图的基本样式代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			li {
				list-style: none;
			}
			
			.box {
				position: relative;
				top: 100px;
				margin: 0 auto;
				width: 576px;
				height: 324px;
				overflow: hidden;
				background-color: pink;
			}
			
			.wardbtn {
				display: none;
				position: absolute;
				top: 50%;
				margin-top: -30px;
				width: 30px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				font-size: 20px;
				color: #fff;
				background-color: rgba(0 , 0 , 0 , .3);
			}
			
			.wardbtn:hover {
				color: #999;
			}
			
			.left {
				left: 0;
				border-radius: 0 30px 30px 0;
			}
			.right {
				right: 0;
				border-radius: 30px 0 0 30px;
			}
			
			.dot {
				position: absolute;
				bottom: 10px;
				left: 50%;
				margin-left: -30px;
				width: 60px;
				height: 20px;

			}
			.dot li {
				float: left;
				width: 10px;
				height: 10px;
				margin: 5px ;
				border-radius: 50%;
				background-color: #fff;
				cursor: pointer;
			}
			
			.dot .select {
				background-color: #999;
			}
			
			.imgs {
				position: absolute;
				top: 0;
				left: 0;
				width: 2304px;
			}
			
			.box img {
				display: inline-block;
				float: left;
				width: 576px;
			}
		</style>	
	</head>
	<body>
		<div class="box">
			<div class="imgs">
				<img src="jin.png" alt="">
				<img src="Jinx.jpg" alt="">
				<img src="Riven2.jpg" alt="">
				<img src="jin.png" alt="">	
			</div>
			<a href="javascript:;" class="wardbtn left">&lt</a>
			<a href="javascript:;" class="wardbtn right">&gt</a>
			<ul class="dot">
				<li class="select"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script src="TurnRoundPic.js"></script>
		<script type="text/javascript">
			var box = document.querySelector('.box');
			turnRoundPic(box);
		</script>
	</body>
</html>

轮播图思路以及JS代码如下：

/*
	1.获取按钮元素
	2.获取图片元素节点
	3.获取小圆点元素
		图片自动更换动画效果
	4.点击左右按钮实现图片切换的动画效果
	5.动画效果
		获取元素
		目标位置与当前位置的差值
		正值ceil
		负值floor
		每次调动前清除一遍动画
	6.点击小圆点实现图片的切换
	7.图片切换时小圆点样式选中
*/


/*
	封装内容：
		animate   动画函数  animate(移动对象， 偏移位置， 回调函数)
		count    页面计数器
		length   单个页面宽度，即一次位移的偏移量
		leftb    左按钮
		rightb	 右按钮
		lis      小圆点数组
		imgs     图片数组（可选由ul实现）
*/

/*动画函数*/
function animate(box, trapos,callback) {    
	clearInterval(box.move);          /*点击之后消除上一次动画，防止未完成的动画与当前动画发生冲突*/
	box.move = setInterval(function() {
		var left = box.offsetLeft;
		var step = trapos - left;
		step = step > 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
		if( step == 0) {
			clearInterval(box.move);
		}
		box.style.left = left + step + 'px';
	}, 20)
	if(callback) {
		callback();
	}	
}

/*
小圆点被选中函数
count 当前的计数值， lis小圆点列表
*/
function getSelect(count, lis) {
	if(count >= 3) {
		count = 0;
	} else if(count < 0) {
		count = 2;
	}
	for(var i = 0 ;i < lis.length; i++) {
		lis[i].className = '';
	}
	
	lis[count].className = 'select'; 
}

/*轮播图主函数*/
function turnRoundPic(box) {
	/*获取元素节点*/
	var length = 576;
	var count = 0;
	var leftb = box.querySelector('.left');
	var rightb = box.querySelector('.right');
	var lis = box.querySelectorAll('li');
	var imgs = box.querySelector('.imgs');
	/*设置初始定时器----全局变量*/
	fn = setInterval(function() {
	count++;
	if(count > 3) {
		 imgs.style.left = 0 + 'px';
		 count = 1;
	}
		getSelect(count, lis);
		animate(imgs, - length * count);
	}, 3000);
	/*轮播图盒子事件监听
			鼠标放在盒子上，左右箭头按钮出现，自动轮播停止
	*/
	box.addEventListener('mouseenter', function() {
		leftb.style.display = 'block';
		rightb.style.display = 'block';
		clearInterval(fn);
	})
	/*轮播图盒子事件监听
		鼠标离开盒子，左右箭头按钮消失，自动轮播开始
	*/
	box.addEventListener('mouseleave', function() {
		leftb.style.display = 'none';
		rightb.style.display = 'none';
		fn = setInterval(function() {
		count++;
		if(count > 3) {
			 imgs.style.left = 0 + 'px';
			 count = 1;
		}
			getSelect(count, lis);
			animate(imgs, - length * count);
		}, 3000);
	})
	/*左按钮事件，点击查看下一张图片*/
	
	leftb.addEventListener('click', function() {
		clearInterval(fn);
		if(count >= 3) {
			imgs.style.left = 0 + 'px';
			count = 0;
		}
		count ++;
		animate(imgs, -length * count);
		console.log(count);	
		getSelect(count, lis);
	})
	/*右按钮事件，点击查看上一张图片*/
	rightb.addEventListener('click', function() {
		clearInterval(fn);
		if(count <= 0) {
			imgs.style.left = - length * 3 + 'px';
			count = 3;
		}
		count --;
		animate(imgs, -length * count);
		console.log(count);	
		getSelect(count, lis);
	})
	/*点击小圆点，跳转指定图片页面*/
	for(var i = 0; i < lis.length; i++){
		lis[i].setAttribute('index', i);
		lis[i].addEventListener('click', function() {
			clearInterval(fn);
			animate(imgs, - length * this.getAttribute('index'));
			getSelect(this.getAttribute('index'), lis);
		})
	}
}

纵马且长歌

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图效果实现

轮播图的基本样式代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图效果</title> <style> * { margin: 0; padding: 0; } a {...
复制链接

扫一扫