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

随机推荐

用sp_change_users_login消除Sql Server的孤立用户
异常详细信息: System.Data.SqlClient.SqlException: 拒绝了对对象 'zwj_EnterpriseActivities' (数据库 'Ntours',架构 'dbo' ...
js字母大小写转换
function a(){ document.getElementById("test").value = document.getElementById("test&q ...
一行代码设置UITableView分割线的长度
使用UITableView时会发现分割线的长度是这样的: 而QQ里面分割线左端到昵称的下面就截止了: 只需行代码就可以搞定: self.tableView.separatorInset = UIEdg ...
MySql函数应用
-- 当前时间 now(); -- 查询结果串联(逗号) select group_concat(col_name) from table_name;
hdu Big Number 求一个数的位数
Problem Description In many applications very large integers numbers are required. Some of these app ...
CSS: Table-Layout & Word-Break 设置表和列的宽度固定不变
1. 设置Table的列宽由表格宽度和列宽度设定(指定表格宽度,各个列宽度): table#tbl_id{table-layout:fixed;} 2. 设置TD内容根据宽度进行换行,即使字符串之间无 ...
pyopenssl
https://pyopenssl.readthedocs.org/en/stable/ pyopenssl是一个封装了openssl的python模块. 使用它可以方便地进行一些加解密操作. 1.产 ...
javax.net.ssl.SSLException: java.lang.UnsupportedOperationException
Loading KeyStore C:\Tool\jdk1.7.0_71\jre\lib\security\jssecacerts... Opening connection to www.googl ...
Linux(Centos)下安装MySQL
转载:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html 一.mysql简介说到数据库,我们大多想到的是关 ...
Facebook公开其Hadoop与Avatarnode代码——有效解决Namenode顽疾
Google在2004年创造了MapReduce,MapReduce系统获得成功的原因之一是它为编写需要大规模并行处理的代码提供了简单的编程模式.MapReduce集群可包括数以千计的并行操作的计算机 ...

javascript无缝全屏轮播

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

随机推荐

热门专题