关于图片轮播

时间 2019-11-09

标签关于图片繁體版

原文原文链接

开通了很久的博客，直到如今才开始写博客，很惭愧。之后争取每两天更新一篇博文。其实写博文不只是为了可以巩固本身学到的东西，也是为了可以和你们分享，只有分享才可以不断的进步，只直到学不知道总结，无异于闭门造车。javascript

好了，开始进入正题了。css

图片轮播算是一个网站不可缺乏的效果了，并且应该也算是前端工程师学的第一个网站效果了，印象都比较深入。我还记得我刚开始作轮播的时候是跟着网站视频教程一个个代码敲出来，第一遍不是很明白，返回去再看一遍基本就明白了。html

图片轮播由好多实现原理，例如改变opacity属性，改变offsetLeft属性，利用JQERY作动画效果等，先来讲说第一种改变opacity属性。前端

opacity属性java

opacity是CSS3中设置元素的透明度属性，取值为0.0~1.0，0.0表示彻底透明，1.0表示彻底不透明。主流浏览器基本都支持这个属性，除了万恶的IE8及如下版本须要使用filter:Alpha(opacity=10)，该取值范围是0~100，从彻底透明到彻底不透明。jquery

看到这里有些人以为那不是很简单吗，只须要设置属性就行了，真的吗？浏览器

通常说轮播就须要好几张图片吧，无论你用div嵌套仍是用li嵌套，他们都是块元素，单独占一行，使用了opacity也只是改变透明度，你还须要将图片放在一块重叠起来，这就是用到posiiton:absolute前端工程师

以上就是大概的思路了，如今贴上个人代码：ide

<div class="slidebanner">
	<ul class="wrap">
		<li>
			<a href="#"><img src="img/01.jpg" /></a>
		</li>
		<li>
			<a href="#"><img src="img/02.jpg" /></a>
		</li>
		<li>
			<a href="#"><img src="img/03.jpg" /></a>
		</li>
	</ul>
</div>
<script type="text/javascript">
　　var items = document.querySelectorAll('.wrap li');
　　var len = items.length;
　　var index = 0;

    function showItem(){
	/*格式化透明度和背景*/
	for(var i=0;i<len;i++){
		items[i].style.opacity = 0;
	}
        /*设置透明度和背景*/
	items[index].style.opacity = 1;
	if(index > len-2){
		index = 0;
	}else{
		index++;
	}
	setTimeout(showItem,3000);
    }
</script>

这是大概的html结构和js代码，建议本身手动敲，没有写上css样式，因此复制粘贴上后不会有效果。学习

offsetLeft属性

offsetLeft能够理解成该盒模结构的左边离定义好的外盒模左边的距离，在网上找到一个特别全的图片，各类距离示意

仍是很清晰的。

使用offsetLeft作轮播的原理就是将全部包裹img的li在一行内显示，利用overflow：hidden的裁剪功能将超出div容器的内容减掉，最后就是利用定时器变化offseLeft的数值，显示出来轮播的效果（记得判断offsetLeft的数值，由于他不是无限宽的，到达必定数值后须要将其清零，进行新一轮的播放）。

下面是部分的代码，最好仍是本身根据思路敲一遍，这样理解的透彻一点。

<body>
　　<div id="div1">
	<ul>
		<li><img src="img/1.jpg"/></li>
		<li><img src="img/2.jpg"/></li>
		<li><img src="img/3.jpg"/></li>
		<li><img src="img/4.jpg"/></li>
	</ul>
　　</div>
　　<input type="button" value="left" />
　　<input type="button" value="right" />
</body>

<script>
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var aInput = document.getElementsByTagName('input');
	var timer = null;
	var speed = 2;
		
	oUl.innerHTML += oUl.innerHTML;
	oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
		
	timer = setInterval(move,30);
		
	aInput[0].onclick = function(){
		speed = -2;
		move();
	}
	aInput[1].onclick = function(){
		speed =2;
		move();
	}
	function move(){
		if(oUl.offsetLeft<-oUl.offsetWidth/2){
			oUl.style.left = '0';
		}
		if(oUl.offsetLeft>0){
			oUl.style.left = -oUl.offsetWidth/2+'px';
		}
		oUl.style.left = oUl.offsetLeft + speed +'px';
	}
	oUl.onmouseover = function(){
		clearInterval(timer);
	}
	oUl.onmouseout = function(){
		timer = setInterval(move,30);
	}
</script>

建议：

　　一、在使用定时器的时候将运动条件和清除定时器条件分开写，避免出错；

　　二、使用定时器以前先清除定时器；

　　三、多元素使用定时器的时候注意属性的私有化，避免出错。

下面是CSS样式

<style>
	*{margin: 0;padding: 0;}
	#div1{width: 712px;height: 108px;margin: 100px auto;position: relative;background: red;overflow: hidden;}
	#div1 ul{position: absolute;left: 0;top: 0;}
	#div1 ul li{width: 178px;height: 108px; float: left;list-style: none;}
</style>

JQUERY的animate（）方法

最后一个就是使用JQUERY的animate来作轮播，这是w3school上的解释：

animate() 方法执行 CSS 属性集的自定义动画。

该方法经过CSS样式将元素从一个状态改变为另外一个状态。CSS属性值是逐渐改变的，这样就能够建立动画效果。

只有数字值可建立动画（好比 "margin:30px"）。字符串值没法建立动画（好比 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来建立相对动画（relative animations）。

这是我本身写的一个方法：

/**
 *  图片轮播
 * @param {Object} elem   运动元素
* @param {Object} size	     运动距离
*/
function toMove(elem,size){
	$(elem).animate({left:'-='+size},2000).delay(2000)
			.animate({left:'-='+size},2000).delay(2000)
			.animate({left:'-='+size},2000,function(){
				$(elem).css('left',0);
				toMove(elem,size);
			}).delay(2000);
}

这个方法不算好，由于我学习的时间不长，各位大神有好的思路或者方法，还请不吝赐教！！

谢谢阅读，能够在评论区交流