自己一直想写一个真正能用的轮播图，以前是写过一个，但是不是无缝的轮播，感觉体验很差，这个轮播之前也搞了很多实例，看了很多代码，但是脑子总转不过弯，为什么在运动到一定距离后可以突然转回到原始位置，而没有出现运动情况？为什么我清楚定时器了，还是出现定时器重叠的情况，导致轮播混乱？如何让左右按钮，分页按钮，轮播函数联系起来，在触发一个事件的时候，轮播能正常运行？如何在第一个li的时候向左（上一张）滑动？

平时自己有空就想，试过很多方法，但是始终搞不出来，今天看了别人写的插件，后发现：

1.当ul滚动到最后一张的时候，瞬间回到初始位置，而没有动作，是应为我们都把这个回到初始位置的瞬间当作了运动的一部分了。

2.关于定时器重叠的，问题，以前我试过通过if(timer){clearInterval(timer)}的方法，但是不好用，应为点击分页的时候，还是会出现问题，最后看了别人的代码，发现通过鼠标移入slider之后，清除定时器，可以一劳永逸的解决了这个问题，因为，当鼠标移入slider之后，定时器被清除，而在没有重新启动定时器之前的一切操作，都是在没有自动轮播的情况下进行的。

3.让左右按钮，分页按钮，轮播函数结合，我是这么想的，轮播函数可以独立，然后通过获取当前的offsetLleft，后运动之后的offsetLleft来决定运动距离和方向，然后左右按钮只需通过设置每个li的宽度的正负值传参就可以联系起来，而分页函数和左右函数，则通过index的增减，传参联系起来，分页函数与轮播函数，通过获取当前分页的索引值和点击分页的索引值联系起来，当然这个索引值，可以通过setAttibute和getAttribute来设置获取。

4.关于最后一个问题，我们都知道如果当前页为第一页的时候，如果点击上一张的话，会出现空白，反正就是错，所以我们在初始化的时候，需要在最前面添加最后一个滚动单位（最后一张图片的li），为了让滚动到最后一个li能返回初始位置，也要在ul的最后添加第一个li，如果你觉得，这样会不会影响到分页呢。其实分页我们可以通过独立设置data-index，还有分页的length也可以通过初始化之前的来设置，因为当时并没有添加节点。

html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>demo3</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

    ul{

    	padding:0px;

    	margin:0px;

    }

	#slider{

		width:400px;

		height:200px;

		position: relative;

		margin:400px auto;

		overflow: hidden;

		border:1px solid #eee;

	}

	#prev{

		width:50px;

		height:30px;

		line-height: 30px;

		color:#fff;

		background:#000;

		text-align: center;

		position: absolute;

		opacity:0.5;

		left:-200px;

		text-decoration: none;

		top:50%;

		z-index:100;

		margin-top:-15px;

	}

	#next{

		opacity:0.5;

		text-decoration: none;

		z-index:100;

		width:50px;

		height:30px;

		line-height: 30px;

		color:#fff;

		background:#000;

		text-align: center;

		position: absolute;

		right:-200px;

		top:50%;

		margin-top:-15px;

	}

	#slider ul{

		height:200px;

		position: absolute;

		left:0px;

		top:0px;

	}

	#slider ul li{

		width:400px;

		height:200px;

		background:orange;

		list-style: none;

		text-align: center;

		line-height: 200px;

		font-size:100px;

		font-weight:bold;

		color:#fff;

		float:left;

	}

	#slider ol{

		list-style-type: none;

	    position: absolute;

	    bottom:10px;

	    padding:0;

	    margin:0;

	    width:100%;

	    text-align: center;

	}

	#slider ol li{

		width:10px;

		height:10px;

		display: inline-block;

		background: #000;

		opacity: 0.3;

		cursor:pointer;

		margin:5px;

		border-radius: 50%;

	}

	#slider ol li.on{

		opacity: 0.8;

	}

</style>

</head>

<body>

    <div id="slider">

        <a href="javascript:;" id="prev">prev</a>

        <a href="javascript:;" id="next">next</a>

    	<ul>

    		<li>

    			1

    		</li>

    		<li>

    			2

    		</li>

    		<li>

    			3

    		</li>

    	</ul>

    	<ol>

    	</ol>

    </div>

</body>

</html>

javascript

<script type="text/javascript" src="startmove.js"></script>

<script type="text/javascript">

	window.onload = function (){

		var slider = document.getElementById('slider');

		var oUl = slider.getElementsByTagName('ul')[0];

		var oLi = oUl.getElementsByTagName('li');

        var liWidth = parseInt(getStyle(oLi[0] , 'width'));

        var aNext = document.getElementById('next');

        var aPrev = document.getElementById('prev');

        var timer = null;

        var inter = 3000;

        var index = 0;

        var oOl = slider.getElementsByTagName('ol')[0];

        var pLi = oOl.getElementsByTagName('li');

        var b = false;

        //初始化

        function intSlider(){

        	for(var i = 0 ; i < oLi.length ; i++){

        		oLi[i].setAttribute('data-index',i);

        	}

        	for( var i = 0 ; i < oLi.length; i++){

        		var iLi = document.createElement('li');

        		oOl.appendChild(iLi);

        	}

        	for(var i = 0 ; i < pLi.length ; i++){

        		pLi[i].setAttribute('data-index',i)

        	}

        	pLi[0].className = 'on';

            var cloneLastLi = oLi[oLi.length-1].cloneNode(true);

            var cloneFirstLi = oLi[0].cloneNode(true);

	        oUl.insertBefore(cloneLastLi,oUl.childNodes[0]);

	        oUl.appendChild(cloneFirstLi);

	        oUl.style.left = -parseInt(getStyle(oLi[0] , 'width')) + 'px';

        };

        intSlider();

        //重新设定ul宽度

        function getWidth(){

        	var liWidth = parseInt(getStyle(oLi[0] , 'width'));

        	oUl.style.width = oLi.length * liWidth + 'px';

        };

        getWidth();

        //鼠标移入移除直接清除了timer，就省了很多清除定时器的麻烦

        slider.onmouseover = function() {

        	if(timer){

            	clearInterval(timer);

            }

        	startMove(aNext,{right : 20});

        	startMove(aPrev,{left : 20});

        };

        slider.onmouseout = function() {

        	timer = setInterval(nextSlider , inter);

        	startMove(aNext,{right : -100});

        	startMove(aPrev,{left : -100});

        };

        //核心函数

        function sliderOffset(offset){

        	b = true;

    		//当前left和滚动之后的left

            var currentLeft = oUl.offsetLeft;

            var afterLeft = currentLeft + offset;

    		startMove(oUl , {left : afterLeft},function(){

	            if (oUl.offsetLeft <= -(oUl.offsetWidth) + liWidth) {

	                    oUl.style.left= -liWidth + 'px';

	            } else if (oUl.offsetLeft >= 0) {

	                    oUl.style.left= -(oLi.length - 2) * liWidth  + 'px';

	            };

	            b = false;

            });

        };

        //当前分页函数

        function pageSlider(index){

        	for(var i = 0; i < pLi.length ; i++){

        		if(pLi[i].className == 'on'){

        			pLi[i].className = '';

        		}

        	}

        	pLi[index].className = 'on';

        };

        //分页点击函数

        for(var i = 0 ; i< pLi.length ; i++){

        	pLi[i].onclick = function (){

        		var index1 = this.getAttribute('data-index');

        		var offset = (index - index1) * liWidth;

        		sliderOffset(offset)

        		index = index1;

        		pageSlider(index);

        	}

        };

        //上一张函数

        function nextSlider(){

        	if(b){

        		return;

        	}

        	sliderOffset(-liWidth)

        	if(index >= pLi.length-1){

        		index = 0;

        	}else{

        		index++

        	}

        	pageSlider(index)

        };

        //下一张函数

        function prevSlider(){

        	if(b){

        		return;

        	}

        	sliderOffset(liWidth);

        	if(index <= 0){

        		index = pLi.length-1;

        	}else{

        		index--

        	}

        	pageSlider(index);

        };

        //事件绑定兼容函数

        function addEvent(element,event,listener){

        	if(element.addEventListener){

        		element.addEventListener(event,listener,false);

        	}else{

        		element.attachEvent('on' + event , listener);

        	}

        };

        //绑定事件

        addEvent(aNext,'click',nextSlider);

        addEvent(aPrev,'click',prevSlider);

        //样式获取

		function getStyle(obj, attr){

			if(obj.currentStyle){

				return obj.currentStyle[attr]

			}else{

				return getComputedStyle(obj,false)[attr]

			}

		};

		//自动轮播

		timer = setInterval(nextSlider, inter);

	}

</script>

　　

javascript无缝流畅动画轮播，终于让我给搞出来了。的更多相关文章

  1. javascript无缝全屏轮播

    虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线: 其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦! 代码还没封装成插件,其实我也还没弄清楚. 下 ...

  2. jQuery无缝循环开源多元素动画轮播jquery.slides插件

    详细内容请点击 初始化插件: 一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型$(".slideInner").slide({slideContainer: ...

  3. javascript写无缝平移的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript--缓动动画+轮播图

    上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  5. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  7. 原生JavaScript实现焦点图轮播

    不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...

  8. JavaScript基础 -- 焦点图轮播(转载)

    首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...

  9. javaScript 手写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. AngularJs练习Demo10 ngInclude

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  2. C#操作Flash动画

    对于在C#开发的过程中没有接触过Flash相关开发的人员来说,没有系统的资料进行学习,那么这篇文档针对于初学者来说是很好的学习DEMO. 本文章中的DEMO实现了C#的COM控件库中本来就带有对fla ...

  3. document.cookie

    概念相关: cookie是存于用户硬盘上的一个文件,对应一个域名,当浏览器再次访问这个域名时,便使用这个cookie. cookie 可以跨越一个域名下的多个网页,但不能跨越多个域名使用. cooki ...

  4. JS继承六大模式

    1.原型链 function SuperType(){this.property = true;} SuperType.prototype.getSuperValue = function(){ret ...

  5. Lua 字符串函数小结

    1.求字符串长度 string.len(str) 2.大小写转换 string.upper(str) string.lower(str) 3.字符串查找(非全局) --func_string.lua ...

  6. python学习第四天 --字符编码 与格式化及其字符串切片

    字符编码 与格式化 第三天已经知道了字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采 ...

  7. uva 227 Puzzle

     Puzzle  A children's puzzle that was popular 30 years ago consisted of a 5x5 frame which contained ...

  8. HDU 5492(DP) Find a path

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5492 题目大意是有一个矩阵,从左上角走到右下角,每次能向右或者向下,把经过的数字记下来,找出一条路径是 ...

  9. scala学习笔记-类型参数中协变(+)、逆变（-）、类型上界(<:)和类型下界(>:)的使用

    转载自  fineqtbull   http://fineqtbull.iteye.com/blog/477994 有位je上的同学来短信向我问起了Scala类型参数中协变.逆变.类型上界和类型下界的 ...

  10. mysql 5.7 内存使用监控

    5.7 中的performance_schema 已经有能力监控mysql 的内存使用情况了,对于这一点也是要通过instrument 来实现的,由于内存这一块没有对应的consumer 所以只要 配 ...