如今各种网站都很常见的旋转木马效果
目标知识点 :
- 学习js数组的增删方法:(
pop()、push()、shift()、unshift()) - 练习json遍历传参
- 练习缓动动画
- 练习定位布局
封装工具myFunc.js:
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
/**
* 获取css的样式值
* @param {object}obj
* @param attr
* @returns {*}
*/
function getCSSAttrValue(obj, attr) {
if(obj.currentStyle){ // IE 和 opera
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
}
/**
* 缓动动画
* @param obj
* @param json
* @param fn
*/
function buffer(obj, json, fn) {
// 1.1 清除定时器
clearInterval(obj.timer);
// 1.2 设置定时器
var begin = 0, target = 0, speed = 0;
obj.timer = setInterval(function () {
// 1.3.0 旗帜
var flag = true;
for(var k in json){
// 1.3 获取初始值
if("opacity" === k){ // 透明度
begin = parseInt( parseFloat(getCSSAttrValue(obj, k)) * 100);
target = parseInt(parseFloat(json[k]) * 100);
}else if("scrollTop" === k){
begin = Math.ceil(obj.scrollTop);
target = parseInt(json[k]);
}else { // 其他情况
begin = parseInt(getCSSAttrValue(obj, k)) || 0;
target = parseInt(json[k]);
}
// 1.4 求出步长
speed = (target - begin) * 0.2;
// 1.5 判断是否向上取整
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
// 1.6 动起来
if("opacity" === k){ // 透明度
// w3c的浏览器
obj.style.opacity = (begin + speed) / 100;
// ie 浏览器
obj.style.filter = 'alpha(opacity:' + (begin + speed) +')';
}else if("scrollTop" === k){
obj.scrollTop = begin + speed;
}else if("zIndex" === k){
obj.style[k] = json[k];
}else {
obj.style[k] = begin + speed + "px";
}
// 1.5 判断
if(begin !== target){
flag = false;
}
}
// 1.3 清除定时器
if(flag){
clearInterval(obj.timer);
// 判断有没有回调函数
if(fn){
fn();
}
}
}, 20);
}
主体index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border:none;
list-style: none;
}
img{
vertical-align: top;
}
body{
background-color: #000;
}
#slider{
width: 1200px;
height: 460px;
margin: 100px auto;
position: relative;
/*background-color: red;*/
}
#slider li{
position: absolute;
left: 200px;
top:0;
}
#slider li img{
width: 100%;
height: 100%;
}
.slider_ctl_prev, .slider_ctl_next{
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
z-index: 99;
}
#slider_ctl{
opacity: 0;
}
.slider_ctl_prev{
background: url("images/prev.png") no-repeat;
left: 0;
}
.slider_ctl_next{
background: url("images/next.png") no-repeat;
right: 0;
}
</style>
</head>
<body>
<div id="slider">
<ul id="slider_main">
<li><img src="images/slidepic1.jpg" alt=""></li>
<li><img src="images/slidepic2.jpg" alt=""></li>
<li><img src="images/slidepic3.jpg" alt=""></li>
<li><img src="images/slidepic4.jpg" alt=""></li>
<li><img src="images/slidepic5.jpg" alt=""></li>
</ul>
<div id="slider_ctl">
<span class="slider_ctl_prev"></span>
<span class="slider_ctl_next"></span>
</div>
</div>
<script src="js/myFunc.js"></script>
<script>
window.onload = function () {
// 1. 获取需要的标签
var slider = $("slider");
var slider_main = $("slider_main");
var allLis = slider_main.children;
var slider_ctl = $("slider_ctl");
var flag = true;
// 2. 设置指示器的显示和隐藏
slider.onmouseover = function () {
buffer(slider_ctl, {"opacity": 1});
};
slider.onmouseout = function () {
buffer(slider_ctl, {"opacity": 0});
};
// 3. 定位
var json = [
{ // 1
width:400,
top:20,
left:50,
opacity:0.2,
zIndex:2
},
{ // 2
width:600,
top:70,
left:0,
opacity:0.8,
zIndex:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{ // 4
width:600,
top:70,
left:600,
opacity:0.8,
zIndex:3
},
{ //5
width:400,
top:20,
left:750,
opacity:0.2,
zIndex:2
}
];
for(var i=0; i<json.length; i++){
buffer(allLis[i], json[i]);
}
//4. 监听点击
for(var j=0; j<slider_ctl.children.length; j++){
var item = slider_ctl.children[j];
item.onmousedown = function () {
if(this.className === "slider_ctl_prev"){ // 左边
json.push(json.shift());
}else { // 右边
json.unshift(json.pop());
}
// 重新布局
for(var i=0; i<json.length; i++){
buffer(allLis[i], json[i]);
}
}
}
}
</script>
</body>
</html>
网友评论