web前端学习之轮播图实现(原生js)

Posted 风中的沙~~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web前端学习之轮播图实现(原生js)相关的知识,希望对你有一定的参考价值。

  很久前接触过html css js 但自己在工作中用的少,简单的需求直接vue 走起,没有静下心好好写点js css 什么的,现在想要好好学习下 大前端的知识了,第一个小练习,做了个轮播图

 网上有很多轮播图的实现过程,每个人都有自己不一样的思路,自己只要实现了就行。当然有些思路确实比我的要好,后续借鉴学习。

逻辑:将要展示的图片全部放在盒子里,超出部分隐藏,然后设置定时器,没两秒循环一次 img 标签,如果display 为block 就将 display 设置为none  那么后面的图片就到当前的div 区域内了,大体思路是这样 ,当然后面加入了js 时间 支持前后翻页,和提示功能

上代码如下:

<!DOCTYPE html>
<html>

<head>
	<title>caroucel</title>
</head>

<style>
	*{
		margin:0;
		padding:0
	}
	.box {
		width: 300px;
		height: 250px;
		border: 1px solid red;
		position: relative
	}

	img {
		width: 300px;
		height: 250px;
	}

	#prev {
		position: absolute;
		top: 50%;
		margin-top: -12px;
		height: 35px;
		width: 15px;
		background-color: rgba(255, 0, 0, .6);
		vertical-align: center;
		line-height: 35px;
		cursor:pointer;

	}

	#next {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -12px;
		height: 35px;
		width: 15px;
		background-color: rgba(255, 0, 0, .6);
		vertical-align: center;
		line-height: 35px;
		cursor:pointer;


	}
</style>

<body>
	<div class=\'box\' style=\'overflow: hidden\'>
		<img src="./1" alt="">
		<img src="./2" alt="">
		<img src="./3" alt="">
		<img src="./4" alt="">
		<img src="./5" alt="">
		<span id=\'prev\'>
		< </span> <span id=\'next\'> >
		</span>
		
	</div><div id=\'dd\'></div>

	<script>
		// 修改样式为块
		function inintBlock() {
			const imgObjs = document.getElementsByTagName("img")
			for (let i = 0; i < imgObjs.length; i++) {
				imgObjs[i].style.display = \'block\'
			}
		}
		inintBlock()
		function operate() {
			const imgObjs = document.getElementsByTagName("img")
			for (let i = 0; i < imgObjs.length; i++) {
				if (imgObjs[i].style.display === \'block\') {
					imgObjs[i].style.display = \'none\'
					break;
				}
			}
			const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display })
			const res = state.filter(function (i) { return i === \'none\' })
			if (res.length === 5) {
				inintBlock()
			}

		}

		let interval = window.setInterval(
			function () {
				operate()
			}, 2000
		)

		const el = document.getElementsByClassName(\'box\')[0]

		el.addEventListener(\'mouseenter\', function (event) {
			window.clearInterval(interval)
		})

		el.addEventListener(\'mouseleave\', function (event) {
			interval = window.setInterval(function () { operate() }, 2000)
		})

		document.getElementById(\'prev\').addEventListener(\'click\',
			//获取当前images 的属性进行遍历,找block属性,修改前一个节点样式
			function () {
				const imgObjs = document.getElementsByTagName("img")
				for (let i = 0; i <imgObjs.length;i++){
					if(imgObjs[i].style.display === \'block\'){
						if(i-1<0){
							document.getElementsByClassName(\'box\')[0].nextSibling.innerText = \'已经是首页了\'
							break;
						}
						imgObjs[i-1].style.display = \'block\'
						break;
					}
				}
			})

		document.getElementById(\'next\').addEventListener(\'click\',function(){
			const imgObjs = document.getElementsByTagName("img")
				for (let i = 0; i <imgObjs.length;i++){
					if(imgObjs[i].style.display === \'block\'){
						if(i+1>4){
							document.getElementsByClassName(\'box\')[0].nextSibling.innerText = \'已经是最后一页了\'
							break;
						}
						imgObjs[i].style.display = \'none\'
						break;
					}
				}
			
		})

	</script>


</body>

</html>

  代码也是很简单的,主要联系下,js 遍历 dom 的操作,孰能生巧,多多练习

 

 

做的过程中有发现个方法,通过定位把几张图片从左往右一次拼接起来,点击的时候向左或者向右触发事件,事件内容是修改各个图片的定位 left right 值 从而产生左右翻滚的效果。(z-index 也是个实现的方法)

刚开始感觉下手很难,但做着做着方法也就越来越多,根据需求选择最合适的最适合自己的就好。

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面是一个轮播图左右滑动的实现

html部分:

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carousel Figure</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<!--从左向右滑动-->
  <nav>
    <ul id="index">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="img">
      <li><img src="../images/img1.jpg" alt="img1"></li>
      <li><img src="../images/img2.jpg" alt="img2"></li>
      <li><img src="../images/img3.jpg" alt="img3"></li>
      <li><img src="../images/img4.jpg" alt="img4"></li>
      <li><img src="../images/img5.jpg" alt="img5"></li>
    </ul>
  </nav>
<script src="script.js"></script>
</body>
</html>
 
css 部分:
*{
  margin:0;
  padding:0;
}
nav{
  width: 720px;
  height: 405px;
  margin:20px auto;
  overflow: hidden;
  position: relative;
}
#index{
  position: absolute;
  left:320px;
  bottom: 20px;
 
}
#index li{
  width:8px;
  height: 8px;
  border: solid 1px gray;
  border-radius: 100%;
  background-color: #eee;
  display: inline-block;
}
#img{
  width: 3600px;/*不给宽高无法移动*/
  height: 405px;
  position: absolute;/*不定义absolute,js无法设置left和top*/
  z-index: -1;
}
#img li{
  width: 720px;
  height: 405px;
  float: left;
}
#index .on{
  background-color: black;
}
 
 
js 部分:
 

function moveElement(ele,x_final,y_final,interval){//ele为元素对象
  var x_pos=ele.offsetLeft;
  var y_pos=ele.offsetTop;
  var dist=0;
  if(ele.movement){//防止悬停
    clearTimeout(ele.movement);
  }
  if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
    return;
  }
  dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
  x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
   
  dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
  y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
   
  ele.style.left=x_pos+\'px\';
  ele.style.top=y_pos+\'px\';
   
  ele.movement=setTimeout(function(){//分10次移动,自调用10次
    moveElement(ele,x_final,y_final,interval);
  },interval)
}

 

 

图片自动轮播:

var img=document.getElementById(\'img\');

var list=document.getElementById(\'index\').getElementsByTagName(\'li\');
var index=0;//这里定义index是变量,不是属性
 
var nextMove=function(){//一直向右移动,最后一个之后返回
  index+=1;
  if(index>=list.length){
    index=0;
  }
  moveIndex(list,index);
  moveElement(img,-720*index,0,20);
};
var play=function(){
  timer=setInterval(function(){
    nextMove();
  },2500);
};
 
鼠标覆盖小圆点,实现切换效果:
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈,图片就移动到哪个小圆圈,并停止
  list[i].index=i;//这里是设置index属性,和index变量没有任何联系
  list[i].onmouseover= function () {
    var clickIndex=parseInt(this.index);
    moveElement(img,-720*clickIndex,0,20);
    index=clickIndex;
    moveIndex(list,index);
    clearInterval(timer);
  };
  list[i].onmouseout= function () {//移开后继续轮播
    play();
  };
}

 

以上是关于web前端学习之轮播图实现(原生js)的主要内容,如果未能解决你的问题,请参考以下文章

用原生JS 写Web首页轮播图

Web前端原生JavaScript浅谈轮播图

原生js简单轮播图 代码

原生JS面向对象思想封装轮播图组件

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

原生js-实现轮播图效果