Home » Code » 简易图片轮播(三)-更换结构

简易图片轮播(三)-更换结构

继续图片轮播系列。

在(二)中,已经写了一个运动的函数,动画效果用的Tween,这样动画效果就丰富了许多。现在来考虑更换一下html的结构,毕竟(一)中是需要在左右两端各放一张占位的图,是不是不必如此呢。好吧,站在巨人的肩膀上得知,不放占位图不复制图片也是可以实现的,使用的是相对定位的方法。

具体做法为:以切换到右边最末张为例,再要下一张,自然是到左边第一张,按钮变为1,把第一张图片相对定位,移到最末张的下一个位置,正常的切换过去,切换完成,第一张图片去掉相对定位回到左边第一的位置,再复原整个装图片的盒子将第一张对正当前,完成。左边同理。这样,就不用多放图片了!看代码实现:

HTML结构:

<div id="box">
	<ul id="list">			
		<li><img src="images/1.jpg"/></li>
		<li><img src="images/2.jpg"/></li>
		<li><img src="images/3.jpg"/></li>
		<li><img src="images/4.jpg"/></li>
		<li><img src="images/5.jpg"/></li>					
	</ul>
	<ol id="buttons">		
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>			
	</ol>
	<a class="arrow" id="prev">&lt</a>
	<a class="arrow" id="next">&gt</a>
</div>

javascript实现,动画使用(二)中的startMove()函数:

window.onload = function(){
	var list = document.getElementById("list");
	var box = document.getElementById("box");
	var images = list.getElementsByTagName("li");
	var next = document.getElementById("next");
	var prev = document.getElementById("prev");
	var buttons = document.getElementById("buttons").getElementsByTagName("li");
	var oneWidth = images[0].offsetWidth;
	var len = buttons.length;
	var imgIndex = 0;
	var btnIndex = 0;
	var timer = null;

	for(var i = 0; i < len; i++){
		buttons[i].index = i;
		buttons[i].onmouseover = function(){
			btnIndex = this.index;
			imgIndex = this.index;
			setBtn();
			startMove(list, {left:-this.index * oneWidth}, 600, 'ExpoeaseInOut');	
		}
	}
	timer = setInterval(go, 2000);
	function go(){			
		if(btnIndex == len - 1){//按钮超出最后一个
			btnIndex = 0;//按钮回到第一个
			images[0].style.position = "relative";//第一个图片相对定位,拉到末尾
			images[0].style.left = len * oneWidth + 'px';
		}else{
			btnIndex++;
		}
		imgIndex++;
		setBtn();
		startMove(list, {left:-imgIndex * oneWidth}, 600, 'ExpoeaseInOut', function(){
			if(btnIndex == 0){//按钮是第一个
				images[0].style.position = "static";
				list.style.left = 0 + 'px';
				imgIndex = 0;
			}
		});
	}
	box.onmouseover = function(){
		clearInterval(timer);
	}
	box.onmouseout = function(){
		timer = setInterval(go, 2000);
	}

	next.onclick = go;

	prev.onclick = function(){			
		if(btnIndex == 0){				
			btnIndex = len - 1;
			images[len - 1].style.position = "relative";//最后一张,拉到开头
			images[len - 1].style.left = -len * oneWidth + 'px';
		}else{
			btnIndex--;
		}
		imgIndex--;
		setBtn();
		startMove(list, {left:-imgIndex * oneWidth}, 600, 'ExpoeaseInOut', function(){
			if(btnIndex == len - 1){
				images[len - 1].style.position = "static";
				list.style.left = -(len - 1) * oneWidth + 'px';
				imgIndex = len - 1;
			}
		});	
	}
	function setBtn(){
		for(var k = 0; k < len; k++){
			buttons[k].className = '';
		}
		buttons[btnIndex].className = "active";
	}
}

动画效果是“ExpoeaseInOut”,其实那一大堆感觉好看的其实也不多~.~

demo写在文章里面实在不方便,或许是我不懂,(一)中用的自定义字段的办法插入css和js,好麻烦,而且html代码只能在编辑器的文本模式下,一切换回可视化即被转义,之后编辑文章都不方便了,一不小心就乱掉。有什么好办法呢,还是放单独页面了。

去瞧瞧改进了些许的轮播图—->

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.