原生js实现轮播图-滑入滑出效果

滑入滑出轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>轮播图</title><style>#box{position: relative;width: 400px;height: 300px;border: 1px solid black;overflow: hidden;}#box div{position: absolute;left: 0;top:0;width: 100%;height: 100%;}#box div img{position: absolute;left: 400px;top:0;width: 100%;height: 100%;}#box div img:nth-child(1){left: 0px;}#box ul{list-style: none;position: absolute;left: 50px;top: 250px;width: 100%;height: 100%;}#box ul li{float: left;margin-left: 20px;width: 20px;height: 20px;border-radius: 50%;background-color: pink;}#box ul li:nth-child(1){background-color:red;}</style>
</head>
<body><div id="box"><div><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""></div><ul><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div>
</body>
</html>
<script src="js/mover.js"></script>
<script>//定时器
let myTimer = null;
//当前图片的下标
let currIndex = 0;
let imgDoms = document.getElementById("box").firstElementChild.children;
let liDoms = document.getElementById("box").lastElementChild.children;//自动播放
function autoPlay(){myTimer =  setInterval(()=>{//一、处理数据//1、计算数据//outIndex：离开图片的下标let outIndex = currIndex;currIndex++;//2、边界处理if(currIndex>4){currIndex=0;}//二、处理外观//改变图片slide(imgDoms[outIndex],imgDoms[currIndex],-400,1000);//改变豆豆liDoms[outIndex].style.backgroundColor = "pink";liDoms[currIndex].style.backgroundColor = "red";},2000);
}//停止
function stopPlay(){clearInterval(myTimer);
}//跳转到指定的图片
function goImg(index){//一、处理数据//1、计算数据//outIndex：离开图片的下标let outIndex = currIndex;currIndex = index;//2、边界处理if(currIndex>4){currIndex = 0;}//二、处理外观//改变图片slide(imgDoms[outIndex],imgDoms[currIndex],-400,1000);//改变豆豆liDoms[outIndex].style.backgroundColor = "pink";liDoms[currIndex].style.backgroundColor = "red";
}window.onload = function(){autoPlay();document.getElementById("box").onmouseover = function(){stopPlay();}document.getElementById("box").onmouseout = function(){autoPlay();}for(let i=0;i<liDoms.length;i++){liDoms[i].onclick = function(){goImg(i);}}
}</script>

mover.js


//滑入滑出（花多长时间，让某个元素出，某个元素进）
//参数:
// outDom：出去的dom
// inDom:进来的dom
// endLeft：终点
// timeLong:时长
//返回值：无function slide(outDom,inDom,endLeft,timeLong){//计算时间 间隔 和 步长// 已知  总时长  总距离，//希望平滑一些，频率就高一些，时间间隔就短一些let timerSpace = 5;let step = outDom.offsetWidth/(timeLong/timerSpace);  // 400/步数let currLeft = 0;let myTimer = setInterval(()=>{//一、处理数据//1、计算currLeft = currLeft-step;//2、边界处理if(currLeft<endLeft){currLeft = endLeft;clearInterval(myTimer);}//二、改变外观outDom.style.left = currLeft+"px";inDom.style.left = currLeft+outDom.offsetWidth +"px";},timerSpace);}//淡入淡出（花多长时间，让某个元素出，某个元素进）
//参数:
// outDom：出去的dom
// inDom:进来的dom
// timeLong:时长
//返回值：无function fadeInOut(outDom,inDom,timeLong){//计算时间 间隔 和 步长// 已知  总时长  总距离，//希望平滑一下，频率就高一些，时间间隔就短一些let timerSpace = 5;let step = 1/(timeLong/timerSpace); let currOpacity = 0;let myTimer = setInterval(()=>{//一、处理数据//1、计算currOpacity = currOpacity+step;//2、边界处理if(currOpacity>1){currOpacity = 1;clearInterval(myTimer);}//二、改变外观outDom.style.opacity = 1-currOpacity;inDom.style.opacity = currOpacity;},timerSpace);}

原生js实现轮播图-滑入滑出效果相关推荐

原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
原生js横幅广告轮播图
手把手原生js简单轮播图原生js实现图片轮播效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
原生JS实现轮播图方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现具有往左往右滑动的效果演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...

原生js实现轮播图-滑入滑出效果

滑入滑出轮播图

mover.js

原生js实现轮播图-滑入滑出效果相关推荐

最新文章

热门文章