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>

<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五屏轮播手风琴切换代码在线演示本地下载

随机推荐

解决 innerHTML 在 IE6-IE9中不能赋值的bug
在MSDN可以了解跟多,关于innerHTML的介绍,但是在这里只要是解决表格部分问题 MSDN上有这样的记录: When using innerHTML to insert script, you ...
基于JQUERY写的 LISTBOX 选择器
本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...
使用区域组织 ASP.NET MVC 应用程序
MVC 模式可将应用程序的模型(数据)逻辑与其呈现逻辑和业务逻辑分离. 在 ASP.NET MVC 中,这种逻辑分离还在项目结构中以物理方式实现,在该项目结构中,控制器和视图保存在使用命名约定定义关系 ...
html5新特性--音频视频，拖放
1.音频 <audio controls> <source src="aaa.ogg" type="audio/ogg"> <so ...
2、shell命令学习
1.第一个例子 touch test.sh vim test.sh #!/bin/bash echo "hello world" chmod 755 test.sh ./test. ...
OpenGL ES 2.0 卷绕和背面剪裁
基本知识背面剪裁是指渲染管线在对构成立体物体的三角形图元进行绘制时,仅当摄像机观察点位于三角形正面的情况下才绘制三角形. OpenGL ES中规定若三角形中的3个顶点的卷绕顺序是逆时针则摄像机观察其 ...
hdu 1019 n个数的最小公倍数
The least common multiple (LCM) of a set of positive integers is the smallest positive integer which ...
练习--分治法--Merge k Sorted Lists
Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. / ...
c#类似单片机的8bit或运算
1.正确 PWMSUBM0 &= (byte)(PWMSUBM0 | 0xfc); PWMSUBM0 &= (byte)(PWMSUBM0 | (byte)0xfc); 2.不能编译的 ...
Android开发笔记之: 数据存储方式详解
无论是神马平台,神马开发环境,神马软件程序,数据都是核心.对于开发平台来讲,如果对数据的存储有良好的支持,那么对应用程序的开发将会有很大的促进作用.总体的来讲,数据存储方式有三种:一个是文件,一个是数 ...

javascript无缝全屏轮播

javascript无缝全屏轮播的更多相关文章

随机推荐

热门专题