纯JS实现左右滑动轮播图

效果图

(完整代码在最下面)
美末2属实⑧行

轮播图的功能要求

  • 每次只显示一张图片
  • 轮播图需要实现左右无缝切换
  • 需要实现跳转(放在圆点显示对应图片)
  • 当前图片的小圆点样式需要突出
  • 当鼠标放在图片上时,轮播停止
  • 在切换图片时鼠标放在图片上,取消轮播效果,切换到对应图片。

HTML布局与css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}

			body {
				background: #646863;
			}

			img {
				width: 1280px;
				height: 722px;
			}

			#banner {
				width: 1280px;
				height: 722px;
				overflow: hidden;
				position: relative;
			}

			#img_list {
				width: 7680px;
				height: 722px;
			}

			#img_list li {
				float: left;
			}

			#icon_list {
				position: absolute;
				right: 20px;
				bottom: 20px;
				list-style: none;
			}

			#icon_list li {
				color: #E69800;
				float: left;
				height: 50px;
				width: 50px;
				border: 5px solid cadetblue;
				border-radius: 50%;
				line-height: 50px;
				text-align: center;
				margin-right: 15px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<ul id="img_list">
				<li><img src="img3/preview1.jpg"></li>
				<li><img src="img3/preview2.jpg"></li>
				<li><img src="img3/preview3.jpg"></li>
				<li><img src="img3/preview4.jpg"></li>
				<li><img src="img3/preview1.jpg"></li>
			</ul>
			<ul id="icon_list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>

			</ul>
		</div>
		</body>
</html>

实现原理

每次只显示一张图片

  • 多余图片的隐藏
    在这里插入图片描述
    利用小盒子套大盒子,实现对图片的隐藏。

轮播图需要实现左右无缝切换

  • 轮播图的动态切换
    利用右外边距或左外边距的加减来操作整个放有图片div的移动,同时利用setTimeout()函数和计时器实现自动切换,从而达到图片无缝切换的效果
//得到图片的集合
var imgs = document.getElementById('img_list').getElementsByTagName('li');
//得到小圆点的集合
var icons = document.getElementById('icon_list').getElementsByTagName('li');
//初始左外边距默认为0px
var Left = 0;
//定义计时器
var timer;
			run();
			function run() {
   
				//图片切换到最后时,重新归零。
				if (Left <= -5120) {
   
					img_list.style.marginLeft = "0px";
					Left = 0;
				}
				//用n表示图片切换和停留的时间,如果刚好显示,停2000,否则以10的速度切换(Left持续-10,直到再次刚好显示图片)
				var n = (Left % 1280 == 0 ? 2000 : 10);
				changeimg();
				m = Math.floor(-Left / 1280);//切换小圆点样式的方法,此处暂且不提
				changeicon(m);//切换小圆点样式的方法,此处暂且不提
				Left -= 10;
				//重复执行run方法。实现一直轮播。
				timer = setTimeout(run, n);
			}

			function changeimg() {
   
				//切换图片的方法、
				img_list.style.marginLeft = Left + "px";
			}

需要实现跳转(放在圆点显示对应图片)

  • 为小圆点添加监听事件,当鼠标放在圆点上时,调用clearTimeout()方法停止轮播,调整计时器参数到固定值,使左右边距加减的滑动效果转为直接跳转到对应图片的效果,并在鼠标移出时重新启动轮播setTimeout()
// 变量作用域两种:全局变量、局部变量。js中函数内部可以读取全局变量,函数外部不能读取函数内部的局部变量。
			
			// js链式作用域:子对象会一级一级向上寻找所有父对象的变量,反之不行。
			// f2可以读取f1中的变量,只要把f2作为返回值,就可以在f1外读取f1内部变量
			for (var i 
  • 16
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值