JS实现某东移动web轮播图

移动web轮播图

参考实例,可以从中保存轮播图的图片,这里我们放入uploads的文件夹下,将八张图片一次改为l1.jpg,l2.jpg…(最后面都demo)

https://m.jd.com/

HTML

  1. 这里要放入十张图片,因为手指滑动的时候要从第一张滑动到最后一张,是无缝滑动,当然可以用原生的JS进行添加
  2. 最终我们可以通过移动ul来达到轮播的效果,所以ul的宽度要刚好放得下十张图片
  3. ol下的li是分页器,也就是我们看到的圆圈,类.current为选中状态
  4. clearfix类是清除浮动
<div class="jd_banner">
		<ul class="jd_wrap clearfix">
				<li><a href="javascript:;"><img src="uploads/l8.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l1.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l2.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l3.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l4.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l5.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l6.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l7.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l8.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l1.jpg" alt=""></a></li>
		</ul>
		<ol>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>

css样式

.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
}

.jd_banner {
  max-width: 640px;
  min-width: 320px;
  margin: 100px auto;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.jd_banner .jd_wrap {
  width: 1000%;
  transform: translateX(-10%);
}
.jd_banner .jd_wrap li {
  width: 10%;
  float: left;
}
.jd_banner .jd_wrap li img {
  width: 100%;
}
.jd_banner ol {
  height: 10px;
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
}
.jd_banner ol li {
  width: 6px;
  height: 6px;
  float: left;
  border: 1px solid #fff;
  margin-left: 10px;
  border-radius: 50%;
}
.jd_banner ol li.current {
  background: #fff;
}

轮播图效果

JS

  1. 我们主要通过控制index,translateX,监听过渡动画的结束(webkitTransitionEnd)来实现轮播
  2. 对index进行限制
  3. 相同的代码进行封装
  4. 优化代码
var jdCon = document.querySelector('.jd_banner')
	var ul = document.querySelector('.jd_banner>.jd_wrap')
	var index = 1
	var li = ul.querySelectorAll('li')
	var olLi = document.querySelectorAll('ol>li')
	var imgWidth = li[0].offsetWidth
	// 过渡移动的效果
	var transit = function(move){
		var move = move || 0
		ul.style.transition = 'all 0.5s linear'
		ul.style.transform = `translateX(${-imgWidth*index+move}px)`
	}
	// 瞬间定位效果
	var moment = function(distanceMove){
		var distanceMove = distanceMove || 0
		ul.style.transform = `translateX(${-imgWidth*index+distanceMove}px)`
		ul.style.transition = 'none'
	}
	window.onresize = function(){
		imgWidth = li[0].offsetWidth
	}
	var timer1 = setInterval(function(){
		index++;
		transit()
	}, 1000)
	ul.addEventListener('webkitTransitionEnd', function(){
		if(index>li.length-2){
			index = 1
			moment()
		}
		if(index<1){
			index = li.length-2
			moment()
		}
		document.querySelector('.current').classList.remove('current')
		olLi[index-1].classList.add('current')
	})
	var distanceStart = 0;
	var move = 0;
	var distanceEnd = 0;
	jdCon.addEventListener('touchstart',function(e){
		clearInterval(timer1)
		distanceStart = e.touches[0].clientX
	})
	jdCon.addEventListener('touchmove',function(e){
		var distance = e.touches[0].clientX
		move = distance - distanceStart
		moment(move)
	})
	jdCon.addEventListener('touchend',function(){
		if(move>imgWidth/2){
			index--
			transit()
		}else if(move<-imgWidth/2){
			index++
			transit()
		}else{
			transit()
		}
		distanceStart = 0;
		move = 0;
		distanceEnd = 0;
		timer1 = setInterval(function(){
			index++;
			transit()
		}, 1000)
	})

整体思路

  1. 首先做好布局,ul的子元素li要在一行上,无缝链接
  2. 利用css,ul的宽度为1000%, 设置transform: translateX(-10%);,使得不会显示展示给用户的最后一张图片,显示第一张图片
  3. 自动播放轮播图
  4. 利用定时器,让index每次加1,然后过渡滚动一张图片
var timer1 = setInterval(function(){
		index++;
		ul.style.transition = 'all 0.5s linear'
		ul.style.transform = `translateX(${-imgWidth*index}px)`
	}, 1000)
  1. 监听webkitTransitionEnd,过渡动画结束时,清除当前的类.current,给ol下的li[index]添加一个类
  2. 过渡动画结束后,如果index过大,我们要对其进行限制,当index为9,此时界面显示的是第十张图片,也就是用户看到的第一张图片,所以我们瞬间(在0s)让其移动到第一张,在令index=1
ul.addEventListener('webkitTransitionEnd', function(){
		// 当时间过渡结束
		// 添加.current
		if(index>8){
			// 当第一张移动完成后
			// 瞬间让index变为1
			ul.style.transform = `translateX(${-imgWidth}px)`
			ul.style.transition = 'none'
			index = 1
		}		document.querySelector('.current').classList.remove('current')
		olLi[index-1].classList.add('current')
	})
  1. ul跟随着手指的滑动而滑动,当手指滑动多少,ul跟着滑动多少
var distanceStart = 0;
	var move = 0;
	var distanceEnd = 0;
jdCon.addEventListener('touchstart',function(e){
		clearInterval(timer1)
		distanceStart = e.touches[0].clientX
	})
	jdCon.addEventListener('touchmove',function(e){
		var distance = e.touches[0].clientX
		move = distance - distanceStart
		ul.style.transform = `translateX(${-imgWidth*index+move}px)`
		ul.style.transition = 'none'
	})
  1. 滑动结束时做吸附效果
  2. 向右滑动时,如果滑动大于图片二分之一的宽度,当手指放开则加上过渡动画效果移动到上一张图片,此时我们移动始终是控制index
if(move>imgWidth/2){
			index--
			ul.style.transition = 'all 0.5s linear'
			ul.style.transform = `translateX(${-imgWidth*index}px)`
		}
  1. 向左滑动时,如果滑动大于图片二分之一的宽度,当手指放开则加上过渡动画效果移动到下一张图片,此时我们移动始终是控制index
else if(move<-imgWidth/2){
			index++
			ul.style.transition = 'all 0.5s linear'
			ul.style.transform = `translateX(${-imgWidth*index}px)`
		}
  1. 其它情况保持显示现状的图片
else{
			ul.style.transition = 'all 0.5s linear'
			ul.style.transform = `translateX(${-imgWidth*index}px)`
		}
  1. 最后所有的清0,开启定时器
  2. 相同代码封装,测试是否有bug,发现右滑有问题--------始终通过控制index来实现移动和切换ol分页器,要对index进行限制。对数字通过ul下的li.length来控制,将代码封装成可调用,可读性,逻辑性的代码
if(index<1){
			ul.style.transform = `translateX(${-imgWidth*8}px)`
			ul.style.transition = 'none'
			index = 8
		}

步骤

/*
	获取 必须知道的 变量
	处理 
	1: 不考虑过渡效果 实现自动播放
		定时器中 index++
			    限制index的值
			   修改 轮播图ul的 位置
			   考虑到 索引从1开始
			   css 默认 让ul 往左边窜一个屏幕宽度
	2:	  根据索引li标签 给li添加类
		监听滚动结束添加.current类
	3:然切换有动画效果
		使用css3中的transition
	4:当我切换到 最后一张时 瞬间 切到 第一张
		关闭过度
		瞬间切换到第一张

	5:过渡结束知识点
		由于 我们在修改 ul的位置时 会使用过度
		当注册了 过渡结束事件之后,每次 过渡完毕 都会 调用该事件
			将 判断 index  是否 越界 以及 修改 索引的 代码 全部 迁移到 过渡结束事件中
	6: 使用touch事件,实现 手指 拨动 ul滑动 效果
	7:封装优化代码
*/

疑问

  1. 宽高必须考虑到移动web的适配方案
  2. 可能大家会把ul进行定位,ul定位(absolute),我们就无法把父盒子撑开,也就是父盒子jd_banner就没有高度,到时ol也很难定位,影响页面布局等问题
  3. 直接给父盒子设置高度,但是我们这个高度不好设置,因为不同的屏幕图片高度是不一致的
  4. 使用translateX来移动逻辑会更简单些
  5. 注意要样式重置,比如img要去掉基线
  6. clearfix可以不加,因为父盒子jd_banner已经设置overflow: hidden;会触发bfc
  7. 实际开发中最好使用zetop.js或则swiper.js来提高我们的开发效率

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	ol,ul{
		list-style: none;
	}
		.clearfix::before,
		.clearfix::after{
		    content: "";
		    display: block;
		    height: 0;
		    line-height: 0px;
		    clear: both;
		    visibility: hidden;
		}
		.jd_banner {
		  max-width: 640px;
		  min-width: 320px;
		  margin: 100px auto;
		  width: 100%;
		  position: relative;
		  overflow: hidden;
		}
		.jd_banner .jd_wrap {
		  width: 1000%;
		  transform: translateX(-10%);
		}
		.jd_banner .jd_wrap li {
		  width: 10%;
		  float: left;
		}
		.jd_banner .jd_wrap li img {
		  width: 100%;
		}
		.jd_banner ol {
		  height: 10px;
		  position: absolute;
		  left: 50%;
		  bottom: 3px;
		  transform: translateX(-50%);
		}
		.jd_banner ol li {
		  width: 6px;
		  height: 6px;
		  float: left;
		  border: 1px solid #fff;
		  margin-left: 10px;
		  border-radius: 50%;
		}
		.jd_banner ol li.current {
		  background: #fff;
}

	</style>
</head>
<body>
	<div class="jd_banner">
		<ul class="jd_wrap clearfix">
				<li><a href="javascript:;"><img src="uploads/l8.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l1.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l2.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l3.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l4.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l5.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l6.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l7.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l8.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="uploads/l1.jpg" alt=""></a></li>
		</ul>
		<ol>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>

</body>
<script>
	var jdCon = document.querySelector('.jd_banner')
	var ul = document.querySelector('.jd_banner>.jd_wrap')
	var index = 1
	var li = ul.querySelectorAll('li')
	var olLi = document.querySelectorAll('ol>li')
	var imgWidth = li[0].offsetWidth
	// 过渡移动的效果
	var transit = function(move){
		var move = move || 0
		ul.style.transition = 'all 0.5s linear'
		ul.style.transform = `translateX(${-imgWidth*index+move}px)`
	}
	// 瞬间定位效果
	var moment = function(distanceMove){
		var distanceMove = distanceMove || 0
		ul.style.transform = `translateX(${-imgWidth*index+distanceMove}px)`
		ul.style.transition = 'none'
	}
	window.onresize = function(){
		imgWidth = li[0].offsetWidth
	}
	var timer1 = setInterval(function(){
		index++;
		transit()
	}, 1000)
	ul.addEventListener('webkitTransitionEnd', function(){
		if(index>li.length-2){
			index = 1
			moment()
		}
		if(index<1){
			index = li.length-2
			moment()
		}
		document.querySelector('.current').classList.remove('current')
		olLi[index-1].classList.add('current')
	})
	var distanceStart = 0;
	var move = 0;
	var distanceEnd = 0;
	jdCon.addEventListener('touchstart',function(e){
		clearInterval(timer1)
		distanceStart = e.touches[0].clientX
	})
	jdCon.addEventListener('touchmove',function(e){
		var distance = e.touches[0].clientX
		move = distance - distanceStart
		moment(move)
	})
	jdCon.addEventListener('touchend',function(){
		if(move>imgWidth/2){
			index--
			transit()
		}else if(move<-imgWidth/2){
			index++
			transit()
		}else{
			transit()
		}
		distanceStart = 0;
		move = 0;
		distanceEnd = 0;
		timer1 = setInterval(function(){
			index++;
			transit()
		}, 1000)
	})

</script>
</html>

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试