javascript无缝全屏轮播
虽然平时能利用插件来实现，但是总是觉得，如果连个无缝轮播都写不出来，还玩个毛线；
其实现在还真的是玩毛线，因为代码都是别人的，不过嘛，很快就变成是我的啦！
代码还没封装成插件，其实我也还没弄清楚。
下面有很多注释的，如果路过的你认为有错误，请指出来啊，使劲拍。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
html,body{
margin:0px;
padding:0px;
}
.wrap{
width: 1920px;
height: 450px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.list{
position: absolute;
}
img{
width: 1920px;
height: 450px;
float: left;
}
a{
text-decoration: none;
position: absolute;
top:100px;
display: inline-block;
width: 85px;
line-height: 70px;
background: rgba(3,3,3,.3);
color: #fff;
font-weight: 700;
font-size: 50px;
text-align: center;
display: none;
}
.buttons{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
span{
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
cursor: pointer;
border: 1px solid #fff;
}
span~span{
margin-left: 20px;
}
.light{
background-color: #fff;
}
</style>
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="list" id="list" style="left:-1920px;">
<img src="4.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="1.jpg">
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next" style="right:0;">></a>
<div class="buttons" id="buttons">
<span class="light"></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</div>
</body>
</html>
js
<script type="text/javascript">
window.onload = function(){
var index = 1;
var b = false;
var timer;
var wrap = document.getElementById('wrap');
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var buttons = document.getElementById('buttons');
var dots = document.getElementsByTagName('span');
var width = list.getElementsByTagName('img')[0].width;
var length = dots.length; //初始化
list.style.width = (length * width +2*width)+ 'px'; //给span添加索引
function addIndex(){
for(i = 0 ; i < dots.length ; i++){
dots[i].setAttribute('index',i+1) ; }
}
addIndex(); //左右按钮鼠标滑入显示
wrap.onmouseover = function(){
prev.style.display = 'block';
next.style.display = 'block';
stop();
}; //左右按钮鼠标滑出隐藏
wrap.onmouseout = function(){
prev.style.display = 'none';
next.style.display = 'none';
play();
}; //上一张
function prevImg(){
//防止连续滚动出现bug
if(b){
return;
} //上一张函数
slider(width); //索引，pagination用到
index--;
if(index < 1){
index = length;
}else if(index > length){
index = 1;
} //pagination函数
pagination();
} //下一张
function nextImg(){
//防止连续滚动出现bug
if(b){
return;
}
//上一张函数
slider(-width); //索引，pagination用到
index++;
if(index < 1){
index = length;
}else if(index > length){
index = 1;
} //pagination函数
pagination();
} //上一张，下一张，触发其他函数变化
function btn(e){
if(b){
return;
}
//兼容ff，ie
e = window.e || e;
var target = e.target ? e.target : e.srcElement;
if(target.nodeName.toLowerCase() == 'span'){
var index1 = target.getAttribute('index');
//获取目标索引图片和当前图片的距离
var offset = (index - index1) * width;
slider(offset);
index = index1;
pagination();
}
} //切换核心函数
function slider(offset){ b = true ;
//完成时间
var time = 500;
//间隔时间
var inter = 5;
//间隔时间内的移动距离，需要优先级限制，不然会出现问题（6/3/1）与（6/（3/1））结果不一 var speed = Math.ceil(offset/(time/inter)); //每次运动后的距离
var left = parseInt(list.style.left) + offset; //运动函数
var go = function(){ //当前left
var curLeft = parseInt(list.style.left); //当滑动出处于中间，并且left没有完成动画时
if((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)){ //运动（根据speed，的正负，决定左右方向）
list.style.left =curLeft + speed + 'px';
//延迟动画，是否执行取决于条件，也就是距离是否返程 setTimeout(go,inter); }
//当处于两端的时候
else{ //首先执行完成运动函数
list.style.left = left + 'px';
//根据left的值，决定是否重新设置left;
//当滑到最右
if(left < -(width * length)){
list.style.left = -width + 'px';
}
//当滑到最左
else if(left > -width){
list.style.left = -(width * length) + 'px';
};
b = false;
};
};
go();
}; //绑定dom
function addEvent(element, event, listener){
//兼容ff,ie
if(element.addEventListener){
element.addEventListener(event,listener,false);
}else{
element.attachEvent('on'+event,listener);
};
}; //触发点击事件
addEvent(prev,'click',prevImg);
addEvent(next,'click',nextImg);
addEvent(buttons,'click',btn) //分页函数
function pagination(){ //遍历span,找出当前点亮的span
for( i = 0 ; i< dots.length ; i++){
if(dots[i].className == 'light'){
dots[i].className = '';
//跳出循环，执行循环后的函数
break;
};
};
//使span索引为当前index-1（span的索引从0开始）的点亮
dots[index -1].className = 'light';
}; //自动轮播
function play(dire,interval){
interval = interval || 3000;
if(dire == 'left'){
timer = setInterval(prevImg,interval);
}else{
timer = setInterval(nextImg,interval);
}
};
play('right',3000); //终止轮播
function stop(){
clearInterval(timer);
}; //全屏滚动，图片居中；
function center(){
var viewWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var imgWidth = width;
var posCenter = (imgWidth - viewWidth) / 2; wrap.style.left = -posCenter + 'px';
}
window.onresize = center; };
</script>
javascript无缝全屏轮播的更多相关文章
- 关于最近在做的一个js全屏轮播插件
最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...
- Vue与swiper想结合封装全屏轮播插件
项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...
- 全屏banner及全屏轮播
一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> < ...
- javascript无缝流畅动画轮播，终于让我给搞出来了。
自己一直想写一个真正能用的轮播图,以前是写过一个,但是不是无缝的轮播,感觉体验很差,这个轮播之前也搞了很多实例,看了很多代码,但是脑子总转不过弯,为什么在运动到一定距离后可以突然转回到原始位置,而没有 ...
- 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...
- 全屏轮播插件 fullPage.js应用(基础版兼容IE7， 背景图版兼容IE8)
/** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2 ...
- 图片全屏轮播插件poposlides
jQuery轻量级全屏自适应焦点图插件poposlides 在线演示本地下载
- Swiper 移动端全屏轮播图效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码 在线演示本地下载
随机推荐
- apache 反向代理配置(ubuntu)
1.配置apache2的站点文件 cd /etc/apache2/site-avaliable sudo vim edy.conf 具体配置如下: # 反向代理配置 # 监听所有80端口的访问 < ...
- 洛谷 P3383 【模板】线性筛素数
P3383 [模板]线性筛素数 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范 ...
- JavaScript中的一些细节
1.设置id / class等属性 用 setAttribute 设置一些常规属性如 id ,className 的时候经常不起作用,只能用 object.id = value 这样来设置 news_ ...
- phantomjs初入门
对DOM操作,而调试过程必不可少,对于那些微乎其微的方法,总显得余力不足.在这里PhantomJS就就行了很好的实现. PhantomJS是一个拥有JavaScript API的无界面WebKit 正 ...
- iframe的操作
获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...
- WordPress插件制作教程(二): 编写一个简单的插件
上一篇说到了如何创建一个插件,我想大家看了之后一定会有所收获,这一篇简单给大家写一个插件样例,让大家有一个基本的印象.这个插件的样例就是当你激活这个插件后会在你的每篇文章中插入一段自己定义好的内容,比 ...
- Scala学习笔记--抽象成员
package com.evor.test1 class Test1 { } object Test1{ def main(args:Array[String]):Unit = { //类参数和抽象字 ...
- [TYVJ] P1027 木瓜地
木瓜地 背景 Background USACO OCT09 4TH 描述 Description Bessie不小心游荡出Farmer John的田地,而走进了相邻的农民的地.她举起一个木瓜,木瓜 ...
- 火狐的打开3D效果
最近研究网页的时候,想看看一个页面中盒子的层次问题,点击右键查看元素的后,没有发现3D效果的按钮. 在网上百度后说要什么显卡支持,以为是公司的电脑用的是集显,就没有这个功能.回去用自己的笔记本后,发现 ...
- TypeError: not enough arguments for format string
到一个问题,表示100% 的时候,出现这个问题. 因为python语法会认为是你需要转移符,这个时候你可以选择100%% 来表示