基于css3的轮播效果

　　花了一上午来调整页面在ie10上的显示问题，sass编译生成的css文件在ie内核下一直不能正确加载，果然兼容性的问题还需要好好研究。转入正题，用css3实现轮播效果主要是基于css3的framework动画效果实现轮播效果以及之前提到的input:checked伪类来实现轮播的控制。在轮播的控制上不可避免的使用了js，一直想写出优雅的js代码，在看了自己写的代码之后发现自己还有很大的提升空间，也许该找个机会去阅读优秀框架的源代码了。

　　当然也借鉴了网上很多资料，有问题的是在ie下完全没有效果，对轮播导航的实现也比较死板，能够改进的地方很多。假设我们的轮播图有三张。将ul.carousel-wrap的宽度设置为300%，也就是3倍的div.carousel的宽度 overflow:hidden 而ul的子li 元素设置宽度为正好div.carousel的宽度并且设置左浮动保证li的正常显示。这时候我们只要为ul设置keyframes来设置margin-left 给一个负值就能实现轮播的动画效果了。至于导航栏的控制，用input:checked来控制动画的切换，用:active伪类来模拟动画的重新启动。设定一个定时器setinterval来实现轮播导航随着轮播移动。并且维持一个labelSelect的哨兵值来控制记录当前轮播图的位置信息。当label被点击的时候，改变labelSelect的值并且重启定时器来消除时间差。

js代码却是需要改进的地方还有很多，感觉自己的能力离es6还有很大的距离，希望一个月之后能写出比写在高效，优雅的多的js代码。部分js代码如下(大致描述了基本思路)：

//轮播导航条随轮播变化变化
var label1 = document.getElementById('label1');
label1.style.backgroundColor = '#c70025';
var label2 = document.getElementById('label2');
var label3 = document.getElementById('label3');
//当前轮播位置
var labelSelect = 1;
if(!!label1.addEventListener){
　　label1.addEventListener("click",function(){
　　　　var input1 = document.getElementById('l01');
　　　　if(input1.checked === true){
　　　　　　input1.checked = false;
　　　　　}
　　　　labelSelect = 1;
　　　　//重启定时器消除时间差
　　　　clearInterval(timer);
　　　　timer = setInterval("labelMove()",3000);
　　　　var parent = this.parentNode;
　　　　var sibling = parent.getElementsByTagName('label');
　　　　for(var i = 0 ; i < sibling.length ; i++){
　　　　　　sibling[i].style.backgroundColor = '#ffffff';
　　　　}
　　　　this.style.backgroundColor = '#c70025';
　　});
}else if(!!label1.attachEvent){
　　...
}

var timer = null;
timer = setInterval("labelMove()",3000);

var labelMove = function(){
　　var labelGroup = document.getElementById('label-group');
　　var labels = labelGroup.getElementsByTagName('label');
　　labelSelect = Math.ceil((labelSelect + 1)%3.1);
　　for(var i = 0 ; i < labels.length ; i++){
　　　　labels[i].style.backgroundColor = '#ffffff';
　　}
　　labels[labelSelect - 1].style.backgroundColor = '#c70025';
};

秒客网

基于css3的轮播效果

相关文章