码迷,mamicode.com
首页 > 编程语言 > 详细

javascript无缝流畅动画轮播,终于让我给搞出来了。

时间:2016-01-05 18:18:16      阅读:2717      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/bestsamcn/p/5102944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!