原生的js轮播图

图片会照常循环播放，当然也可以通过按钮来进行切换，当切出当前的页面时，等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态。

HTML部分：

</div>
<script>
slider('.slider1')
</script>
</body>
</html>

CSS部分：

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.slider{
overflow: hidden;
}
.slider .slider-wrapper{
height: 100%;

}
.slider .slider-wrapper .slider-slide{
background-size: cover;
background-position: center top;
height: 100%;
float: left;
}
.slide-btn{
width: 30px;
height: 50px;
position: absolute;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
background-repeat: no-repeat;
}
.slider-prev{
left: 20px;
background-image: url(../img/left.jpg);
}
.slider-next{
right: 20px;
background-image: url(../img/right.jpg);
}

js部分：

function slider(selector){//selector就是一个选择器,接收从dom那边传来的选择器
//保存全局变量
var container
var wrapper
var slides
var index=0
var buttons
var defaluts={
speed:1000,
delay:2000
}
var flag=false
var timer
//初始化轮播图
function init(){
container=document.querySelector(selector)
wrapper=container.querySelector(".slider-wrapper")
slides=container.querySelectorAll(".slider-slide")
buttons=container.querySelectorAll('.slide-btn')
//应该在结尾和开头添加图片
clone()
//设置宽度
setWidth()
//移动wrapper
moveWrapper()
//自动播放
autoplay()
//响应式
resize()
buttons[0].addEventListener('click',function(){
buttonClick('left')
})
buttons[1].addEventListener('click',function(){
buttonClick('right')
})
//检测是否切出当前页面
visibilityChange()
}
function visibilityChange(){
console.log('321',window)
window.addEventListener("visibilityChange",function(){
//当切换回来的时候还是停留在之前切出去的时候的那张图片
if(document.hidden){
clearTimeout(timer)
}else{
clearTimeout(timer)
autoplay()
}
})
}
function buttonClick(direction){
if(!flag){
moveSlide(direction)
clearTimeout(timer)
autoplay()
}
}
//响应式
function resize(){
window.addEventListener("resize",function(){
setWidth()
wrapper.style.transitionDuration='0ms'
moveWrapper()
})
}
//自动播放
function autoplay(){
timer=setTimeout(function(){
moveSlide('left')
autoplay()
},defaluts.delay+defaluts.speed)
}
//播放滑动slider
function moveSlide(direction){
direction=='right' ? index++ : index--
wrapper.style.transitionDuration=defaluts.speed+'ms'
flag=true
setTimeout(function(){
flag=false
},defaluts.speed)
if(index<0 || index>=slides.length){
setTimeout(function(){
if(index<0){
index=slides.length-1
}
if(index>=slides.length){
index=0
}
wrapper.style.transitionDuration='1ms'
moveWrapper()
},defaluts.speed)
}
moveWrapper()
}
//复制图片
function clone(){
//firstElementChild是获取wraper下面的第一个元素
//为true的时候也可以吧孩子里面的孩子给克隆出来，也就是复制出来
var firstElement=wrapper.firstElementChild.cloneNode(true)
var lastElement=wrapper.lastElementChild.cloneNode(true)
wrapper.appendChild(firstElement)//把第一张图片添加到后边
wrapper.insertBefore(lastElement,slides[0])//把最后一张图片插入到第一个位置

}
//设置宽度
function setWidth(){
var wrapperWidth=0
var sliders=container.querySelectorAll(".slider-slide")
for(var i=0;i<sliders.length;i++){
sliders[i].style.width=container.offsetWidth+'px'
wrapperWidth+=sliders[i].offsetWidth
}
wrapper.style.width=wrapperWidth+'px'
}
//移动wrapper
function moveWrapper(){
var px=0
var sliders=container.querySelectorAll('.slider-slide')
for(var i=0;i<=index;i++){
px+=sliders[i].offsetWidth
}
wrapper.style.transform='translate3d(-'+px+'px,0,0)'
}
init()
}

原生的js轮播图的更多相关文章

javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
原生js轮播图
//用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

随机推荐

1-4Controller之Middleware
1.注册中间件: 新建中间件文件:Activity <?php namespace App\Http\Middleware; use Closure; class Activity{ publi ...
flask-security(一)快速入门
很多例程都是基于flask-sqlalchemy的. 但是我使用sqlalchemy,并没有使用sqlalchemy,看中的也就是flask的灵活性. 暂时写flask的程序,但是为了以后写别的程序方 ...
RTTI，C++类型转换操作符
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
Xilinx SDK编译Microblaze时出错
reference:http://www.eeboard.com/evaluation/digilent-cmod-a7-fpga/9/ 在vivado 2015.4中创建microblaze软核,l ...
centos7部署kubernetes
参考:https://www.cnblogs.com/zhenyuyaodidiao/p/6500830.html 1.环境介绍及准备: 1.1 物理机操作系统物理机操作系统采用Centos7.3 ...
Problem B 一元二次方程类
Description 定义一个表示一元二次方程的类Equation,该类至少具有以下3个数据成员:a.b和c,用于表示方程“a*x*x + b*x +c = 0”.同时,该类还至少具有以下两个成员函 ...
强化学习9-Deep Q Learning
之前讲到Sarsa和Q Learning都不太适合解决大规模问题,为什么呢? 因为传统的强化学习都有一张Q表,这张Q表记录了每个状态下,每个动作的q值,但是现实问题往往极其复杂,其状态非常多,甚至是连 ...
5.Python爬虫入门五之URLError异常处理
大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网连接不到特定的 ...
day 51
一 window对象 window 对象表示一个浏览器窗口. 在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊 ...
Git客户端的安装与配置入门
GitLab与Git客户端的安装与配置入门,每次配置完一段时间,就忘记配置过程了,为了自己和同学们以后有所参照,特记录了本次下载和配置,其实Git就是一个版本控制系统,类似于SVN,CVS等下载:W ...

原生的js轮播图

原生的js轮播图的更多相关文章

随机推荐

热门专题