实现轮播的一种方式

　　第一次写，先试一试。

　　初学Js，希望各位大牛指点。

　　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body,ul,li{margin: 0;padding: 0;}
ul{position: absolute;left: 50%;overflow: hidden;}
li{position: absolute;list-style: none;z-index: 0;}
</style>
</head>
<body>

<div id="banner">
<ul>
<li><img src="img/001.jpg"/></li>
<li><img src="img/002.jpg"/></li>
<li><img src="img/003.jpg"/></li>
<li><img src="img/004.jpg"/></li>
<li><img src="img/005.jpg"/></li>
<li><img src="img/006.jpg"/></li>
</ul>
</div>



<script type="text/javascript">
function $(selector, context){
context = context || document;
if (selector.indexOf("#") === 0) // 根据id查找元素
return document.getElementById(selector.slice(1));
if (selector.indexOf(".") === 0) // 根据类名查找元素
return getByClassName(selector.slice(1), context);
// return context.getElementsByClassName(selector.slice(1));
return context.getElementsByTagName(selector); // 根据元素名查找
}
function animate(element, options, speed, fn) {
// 先取消在 element 元素上之前已有的运动动画计时器
clearInterval(element.timer);

// 求解运动各属性初始值
var start = {}, orgion = {};
for (var attr in options) {
start[attr] = parseFloat(css(element, attr));
orgion[attr] = options[attr] - start[attr];
}


// 记录开始运动前一刻时间毫秒值
var startTime = +new Date(); // Date.now()

// 启动计时器，开始实现运动动画效果
element.timer = setInterval(function(){
// 计算运动经过的时长（毫秒）
var elapsed = Math.min(+new Date() - startTime, speed);
// 为每个运动属性计算当前运动值
for (var attr in options) {
var result = elapsed * orgion[attr] / speed + start[attr];
// 设置元素对应 attr CSS属性值
if(attr === "opacity" || attr === "zIndex"){
element.style[attr] = result;
}else{
element.style[attr] = result + "px";
}
if (attr === "opacity")
element.style.filter = "alpha(opacity="+(result*100)+")";

}
// 判断是否运动结束
if (elapsed === speed){
clearInterval(element.timer);
// 运动执行结束，判断是否有继续要执行的函数，有，则调用执行
fn && fn();
}
}, 1000/60);

}

var _width = $("li")[0].offsetWidth,
_height = $("li")[0].offsetHeight, // 获取图片展示框宽高
len = $("li").length,
arr = [{left:_width,zIndex:999},
{left:0,zIndex:9999},
{left:-_width,zIndex:999},
{left:_width,zIndex:0},
{left:_width,zIndex:0},
{left:_width,zIndex:0}], // 数组保存各图片位置（可写成根据图片张数动态添加位置对象）
curr = 0;

/*设定显示框位置*/
$("ul")[0].style.width = _width + "px";
$("ul")[0].style.height = _height + "px";
$("ul")[0].style.marginLeft = -_width/2 + "px";

/*各图片位置初始化*/
for(var i = 0; i < len; i++){
$("li")[i].style.left = _width + "px";
}
$("li")[2].style.left = 0 + "px";
$("li")[3].style.left = -_width + "px";
$("li")[3].style.zIndex = -999;

/*改变图片位置实现轮播*/
setInterval(function(){
for(var i = 0; i < len; i++){
animate($("li")[i], arr[(curr + i)%len], 1000)

};
curr++;

},3000);
</script>

</body>
</html>

 

欢迎批评指点

posted @ 2017-04-25 15:48  _Clear  阅读(159)  评论(0)    收藏  举报