旋转木马轮播图
旋转木马轮播：是通过调整每个图片的层级，位置大小，透明度来实现效果。
html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图title>
<link rel="stylesheet" href="css/css.css"/>
<script type="text/javascript" src="js/animate.js">script>
<script type="text/javascript" src="js/my.js">script>
head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/>a>li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/>a>li>
ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft">a>
<a href="javascript:;" class="next" id="arrRight">a>
div>
div>
div>
body>
html>css
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}animate.js
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;//true表示可以清理
for (var k in json) {
//k:v
//k:json[k]
//属性名:属性目标值
if (k == "opacity") {
var leader = getStyle(obj, k) * 100;
//虽然getStyle获取到的是字符串类型 但是参与运算后会自动转换
var target = json[k] * 100;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[k] = (leader + step) / 100;
} else if (k == "zIndex") {
obj.style[k] = json[k];
} else {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[k] = leader + step + "px";
}
if (leader != target) {
flag = false;//告诉标记 我这个值还没达到不要清理
}
}
//遍历完成之后再检查
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 15)
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
}
}
my.js
window.onload = function () {
//找人
var wrap = document.getElementById("wrap");
var slide = document.getElementById("slide");
var ul = slide.children[0];
var lis = ul.children;
var arrow = document.getElementById("arrow");
var arrRight = document.getElementById("arrRight");
var arrLeft = document.getElementById("arrLeft");
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];//其实就是一个配置单 规定了每张图片的大小位置层级透明度
wrap.onmouseover = function () {
animate(arrow, {"opacity": 1});
}
wrap.onmouseout = function () {
animate(arrow, {"opacity": 0});
}
//节流阀
var flag = true;
function assign() {
for (var i = 0; i < lis.length; i++) {
animate(lis[i], config[i], function () {
flag = true;
});
}
}
assign();
arrRight.onclick = function () {
if (flag) {
flag = false;
config.push(config.shift());
assign();
}
}
arrLeft.onclick = function () {
if (flag) {
flag = false;
config.unshift(config.pop());
assign();
}
}
}