关于图片轮播
开通了好久的博客，直到现在才开始写博客，很惭愧。以后争取每两天更新一篇博文。其实写博文不仅是为了能够巩固自己学到的东西，也是为了能够和大家分享，只有分享才能够不断的进步，只直到学不知道总结，无异于闭门造车。
好了，开始进入正题了。
图片轮播算是一个网站不可缺少的效果了，而且应该也算是前端工程师学的第一个网站效果了，印象都比较深刻。我还记得我刚开始做轮播的时候是跟着网站视频教程一个个代码敲出来，第一遍不是很明白，返回去再看一遍基本就明白了。
图片轮播由好多实现原理，例如改变opacity属性，改变offsetLeft属性，利用JQERY做动画效果等，先来说说第一种改变opacity属性。
opacity属性
opacity是CSS3中设置元素的透明度属性，取值为0.0~1.0，0.0表示完全透明，1.0表示完全不透明。主流浏览器基本都支持这个属性，除了万恶的IE8及以下版本需要使用filter:Alpha(opacity=10)，该取值范围是0~100，从完全透明到完全不透明。
看到这里有些人觉得那不是很简单吗，只需要设置属性就好了，真的吗？
一般说轮播就需要好几张图片吧，不管你用div嵌套还是用li嵌套，他们都是块元素，单独占一行，使用了opacity也只是改变透明度，你还需要将图片放在一块重叠起来，这就是用到posiiton:absolute
以上就是大概的思路了，现在贴上我的代码：
<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>
建议：
1、在使用定时器的时候将运动条件和清除定时器条件分开写，避免出错；
2、使用定时器之前先清除定时器；
3、多元素使用定时器的时候注意属性的私有化，避免出错。
下面是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);
}
这个方法不算好，因为我学习的时间不长，各位大神有好的思路或者方法，还请不吝赐教！！
谢谢阅读，可以在评论区交流
浙公网安备 33010602011771号