一、两侧广告跟随
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
position: absolute;
left: 0;
top: 50px;
}
#demo{
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="images/aside.jpg" id="pic" alt=""/>
<div id="demo">
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
</div>
</body>
</html>
<script type="text/javascript" src="animate7.0.js">
</script>
<script type="text/javascript">
var pic=document.getElementById("pic");
window.onscroll=function(){
var top =document.documentElement.scrollTop||document.body.scrollTop;
animate(pic,top+100,"top",20);
}
</script>
二、筋斗云效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
width: 800px;
height: 42px;
background:url("images/rss.png") no-repeat right center #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.cloud {
width: 83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: url(images/cloud.gif) no-repeat;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
}
.nav li {
float: left;
width: 88px;
height: 42px;
line-height: 42px;
text-align: center;
color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav" id="nav">
<span class="cloud" id="cloud"></span>
<ul id="box">
<li>首页新闻</li>
<li>千锋师资</li>
<li>千锋活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="animate7.0.js">
</script>
<script type="text/javascript">
var box=document.getElementById("box");
var cloud=document.getElementById("cloud");
var liArr=box.children;
box.onmousemove=function(e){
var e=e||event;
var target=e.target||e.srcElement;
if(target.nodeName.toLowerCase()=="li"){
animate(cloud,target.offsetLeft,"left",20);
}
}
box.onmouseout=function(e){
var e=e||event;
var target=e.target||e.srcElement;
if(target.nodeName.toLowerCase()=="li"){
animate(cloud,clickindex,"left",20);
}
}
var clickindex=0;
box.onclick=function(e){
var e=e||event;
var target=e.target||e.srcElement;
if(target.nodeName.toLowerCase()=="li"){
clickindex=target.offsetLeft;
}
}
</script>
三、简单轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
img {
display: block;
/* 清除图片底册 3像素缝隙*/
}
.slider {
width: 490px;
height: 170px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
/* margin-left: -80px;*/
bottom: 10px;
}
.slider ol li {
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul id="box">
<li><a href="#"><img id="img" src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
<li><a href="#"><img id="img" src="images/01.jpg" alt=""/></a></li>
</ul>
</div>
<ol id="bt">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script type="text/javascript" src="animate7.0.js">
</script>
<script type="text/javascript">
var box=document.getElementById("box");
var bt=document.getElementById("bt");
var btArr=bt.children;
setInterval(autoplay,1000);
var index=0;
function autoplay(){
if(index==btArr.length){
box.style.left=0;
index=1;
}else{
index++;
}
animate(box,-index*490,"left");
for (var i = 0; i < btArr.length; i++) {
btArr[i].className="";
}
btArr[index==btArr.length?0:index].className="current";
}
</script>
四、iphone解锁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#iphone {
position: relative;
width: 426px;
height: 640px;
margin: 10px auto;
background: url(images/iphone.jpg) no-repeat;
}
#lock {
position: absolute;
left: 50%;
bottom: 33px;
width: 358px;
height: 62px;
margin-left: -179px;
}
#lock span {
position: absolute;
width: 93px;
height: 62px;
cursor: pointer;
background: url(images/unlock_btn.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="iphone">
<div id="lock"><span id="btn"></span></div>
</div>
</body>
</html>
<script type="text/javascript" src="animate7.0.js">
</script>
<script type="text/javascript">
var iphone=document.getElementById("iphone");
var lock=document.getElementById("lock");
var btn=document.getElementById("btn");
btn.onmousedown=function(e){
var e=e||event;
var x=e.offsetX;
document.onmousemove=function(e){
var e=e||event;
l=e.pageX-x-iphone.offsetLeft-lock.offsetLeft;//l是全局变量
maxL=lock.offsetWidth-btn.offsetWidth;//maxL是全局变量
l=l<0?0:(l>maxL?maxL:l);
btn.style.left=l+"px";
return false;
}
document.onmouseup=function(){
document.onmousemove=null;
if(l<maxL/2){
animate(btn,0,"left");
}else{
animate(btn,maxL,"left");
}
}
}
</script>
五、圆形导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0}
ul{list-style:none;position:relative;margin:50px;}
ul li{width:200px;height:200px;border-radius:50%;position:absolute;border:5px solid #ccc;text-align:center;line-height:200px;font-size:50px}
#li1{background:#0ff;}
#li2{background:#FF0000;left:150px;}
#li3{background:#f0f;left:300px;}
#li4{background:#ff3;left:450px;}
#li5{background:#0f0;left:600px;}
</style>
</head>
<body>
<ul>
<li id="li1">Home</li>
<li id="li2">WIFI</li>
<li id="li3">Phone</li>
<li id="li4">setting</li>
<li id="li5">Twiffer</li>
</ul>
</body>
</html>
<script type="text/javascript" src="animate10.0.js">
</script>
<script type="text/javascript">
var liArr=document.getElementsByTagName("li");
for(var i=0;i<liArr.length;i++){
liArr[i].onmousemove=function(){
animate(this,{
top:-20,
width:250,
zIndex:10
})
}
liArr[i].onmouseout=function(){
animate(this,{
top:0,
width:200,
zIndex:0
})
}
}
</script>
六、土豆右下角菜单悬浮效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font: 12px/1.25 tahoma, arial, 宋体, sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
body {
width: 100%;
height: 100%;
background: #000;
_position: relative;
overflow: hidden;
}
.page {
position: fixed;
_position: absolute;
right: 0;
bottom: 0;
}
#nav {
height: 22px;
margin: 5px 0 0 43px;
width: 125px;
}
#nav li {
float: left;
width: 25px;
}
#nav li a {
display: block;
height: 22px;
width: 25px;
}
#nav li .show,
#nav li a:hover {
background: url(minibar.png) no-repeat 0 -51px;
}
#nav .li_1 .show,
#nav .li_1 a:hover {
background-position: -25px -51px
}
#nav .li_2 .show,
#nav .li_2 a:hover {
background-position: -50px -51px
}
#nav .li_3 .show,
#nav .li_3 a:hover {
background-position: -75px -51px
}
#nav .li_4 .show,
#nav .li_4 a:hover {
background-position: -100px -51px
}
.qf {
color: #FFFFFF;
height: 16px;
margin: 4px 0 0 8px;
overflow: hidden;
width: 160px;
}
#but {
bottom: 0;
display: block;
height: 50px;
position: absolute;
right: 0;
width: 33px;
z-index: 20002;
}
.but_hide {
background: url(minibar.png) no-repeat -170px 0;
}
.but_hide:hover {
background-position: -203px 0;
}
.but_show {
background: url(minibar.png) no-repeat -236px 0;
}
.but_show:hover {
background-position: -269px 0;
}
#qf_bottom {
width: 203px;
height: 50px;
background: url(minibar.png) no-repeat 0 0;
position: absolute;
right: -165px;
bottom: 0;
z-index: 20001;
}
#qf_box {
bottom: -315px;
display: none;
height: 315px;
padding: 0 0 48px;
position: absolute;
right: 1px;
width: 200px;
z-index: 20000;
}
.bg {
background: url(mini_jpgs.jpg) no-repeat 0 0;
height: 315px;
opacity: 0.9;
position: absolute;
right: 0;
top: 0;
width: 200px;
}
.nav2_bg {
bottom: 48px;
height: 176px;
left: 0;
position: absolute;
width: 34px;
background: url(mini_jpgs.jpg) no-repeat 0 -139px;
}
#list_nav {
background: url(minibar.png) no-repeat scroll 0 -255px transparent;
height: 139px;
left: 0;
position: absolute;
top: 2px;
width: 34px;
}
#list_nav a {
color: #FFFFFF;
display: block;
height: 27px;
line-height: 25px;
text-align: center;
text-decoration: none;
}
#list_nav .show {
color: #FF9900;
}
#list_nav a:hover {
color: #FFFF00;
}
.clos {
background: url(images/minibar.png) no-repeat 0 -76px;
cursor: pointer;
height: 9px;
position: absolute;
right: 10px;
top: 14px;
width: 9px;
}
.box_right {
color: #FFFFFF;
height: 285px;
overflow: hidden;
position: absolute;
right: 6px;
top: 28px;
width: 150px;
}
</style>
</head>
<body>
<div class="page">
<div id="qf_bottom">
<ul id='nav'>
<li><a href="###"></a></li>
<li class='li_1'><a href="###"></a></li>
<li class='li_2'><a href="###"></a></li>
<li class='li_3'><a href="###"></a></li>
<li class='li_4'><a href="###"></a></li>
</ul>
<h2 class="qf">千锋JQ</h2>
</div>
<a class="but_show" id="but" href="###"></a>
<div id="qf_box">
<div class="bg"></div>
<div class="nav2_bg"></div>
<ul id="list_nav">
<li><a class="show" href="#" target="_blank">天气</a></li>
<li class="tab2"><a href="#" target="_blank">星座</a></li>
<li class="tab3"><a href="#" target="_blank">排行</a></li>
<li class="tab4"><a href="#" target="_blank">热点</a></li>
<li class="tab5"><a href="#" target="_blank">直播</a></li>
</ul>
<a class='clos' id="btn_close"></a>
<div class="box_right">
<div>北京</div>
<div>
<div>
<strong><em>今天</em> (周二)</strong>
<img title="晴" src="images/01.gif" class="pic">
</div>
<span>-1~10C°</span>
<span>晴</span>
<span>微风小于3级</span>
</div>
<div >
<div>
<strong><em>明天</em> (周三)</strong>
<img title="多云" src="images/02.gif" class="pic">
</div>
<span>0~11C°</span>
<span>多云</span>
<span>北风3-4级</span>
</div>
<div>
<div>
<strong><em>后天</em> (周四)</strong>
<img title="晴" src="images/01.gif" class="pic">
</div>
<span>-1~12C°</span>
<span>晴</span>
<span>北风3-4级 转 微风小于3级</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="public.js"></script>
<script src="animate7.0.js"></script>
<script type="text/javascript">
//right: -165px; qf_bottom
// display: none; bottom: -315px; qf_box
//but_show btn_close
$id("but").onclick = function(){
//$id("qf_bottom").style.right = 0;
animate($id("qf_bottom"),0,"right",20,function(){
$id("qf_box").style.display = "block";
animate($id("qf_box"),0,"bottom");
});
}
$id("btn_close").onclick = function(){
//$id("qf_bottom").style.right = 0;
animate($id("qf_box"),-315,"bottom",20,function(){
$id("qf_box").style.display = "none";
animate($id("qf_bottom"),-165,"right");
});
}
</script>
七、旋转木马轮播图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
</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="prev"></a>
<a href="javascript:void(0);" class="next" id="next"></a>
</div>
</div>
</div>
</body>
</html>
<script src="../public.js"></script>
<script src="../animate10.0.js"></script>
<script>
var imgInfo = [
{ // 1
"width":400,
"top":20,
"left":50,
"opacity":20,
"zIndex":2
},
{ // 2
"width":600,
"top":70,
"left":0,
"opacity":80,
"zIndex":3
},
{ // 3
"width":800,
"top":100,
"left":200,
"opacity":100,
"zIndex":4
},
{ // 4
"width":600,
"top":70,
"left":600,
"opacity":80,
"zIndex":3
},
{ //5
"width":400,
"top":20,
"left":750,
"opacity":20,
"zIndex":2
}
]
var liArr=document.getElementsByTagName("li");
showImg();
var flag = true;
function showImg(){
for(var i=0;i<liArr.length;i++){
animate(liArr[i],imgInfo[i],function(){
flag=true;
});
}
}
var slide=document.getElementById("slide");
slide.onmousemove=function(){
animate($id("arrow"),{opacity:100})
}
slide.onmouseout=function(){
animate($id("arrow"),{opacity:0})
}
$id("prev").onclick=function(){
if(flag){
imgInfo.unshift(imgInfo.pop());
showImg();
flag=false;
}
}
$id("next").onclick=function(){
if(flag){
imgInfo.push(imgInfo.shift());
showImg();
flag=false;
}
}
</script>
八、手风琴效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none}
*{margin:0; padding:0;}
div{
width: 1160px;
height: 400px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="../animate10.0.js">
</script>
<script type="text/javascript">
var ul=document.getElementById("ul");
var ulArr=ul.children;
for(var i=0;i<ulArr.length;i++){
ulArr[i].index=i;
ulArr[i].onmouseover=function(){
for(var i=0;i<ulArr.length;i++){
animate(ulArr[i],{width:40});
}
animate(ulArr[this.index],{width:1000});
}
ulArr[i].onmouseout=function(){
for(var i=0;i<ulArr.length;i++){
animate(ulArr[i],{width:232});
}
}
}
</script>
九、轮播图淡入淡出
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
#wrapper{
width: 670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul{
position:relative;
}
ul li{
position:absolute;
top:0;
left:0;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="box">
<li style="z-index: 6;"><img class="img" src="images/1.jpg" alt=""/></li>
<li style="z-index: 5;"><img class="img" src="images/2.jpg" alt=""/></li>
<li style="z-index: 4;"><img class="img" src="images/3.jpg" alt=""/></li>
<li style="z-index: 3;"><img class="img" src="images/4.jpg" alt=""/></li>
<li style="z-index: 2;"><img class="img" src="images/5.jpg" alt=""/></li>
<li style="z-index: 1;"><img class="img" src="images/6.jpg" alt=""/></li>
</ul>
<ol style="z-index: 10;" id="uu">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
<script type="text/javascript" src="../animate10.0.js"></script>
<script type="text/javascript" src="../public.js"></script>
<script type="text/javascript">
var box=$id("box");
var boxArr=box.children;
var ol=$id("uu");
var olArr=ol.children;
var wrapper=document.getElementById("wrapper");
//选项卡
for(var i=0;i<olArr.length;i++){
olArr[i].index=i;
olArr[i].onmouseover=function(){
for(var i=0;i<olArr.length;i++){
olArr[i].className="";
animate(boxArr[i],{opacity:0});
}
this.className="current";
animate(boxArr[this.index],{opacity:100});
}
}
//鼠标移入暂停
wrapper.onmouseover=function(){
clearInterval(timer);
}
//鼠标移出开始
wrapper.onmouseout=function(){
timer=setInterval(autoplay,1000);
}
//自动淡入淡出
var num=0;
var timer=setInterval(autoplay,1000);
function autoplay(){
if(num==boxArr.length-1){
num=0;
animate(boxArr[num],{opacity:100});
}else{
num++;
animate(boxArr[num-1],{opacity:0});
animate(boxArr[num],{opacity:100});
}
for(var i=0;i<olArr.length;i++){
olArr[i].className=""
}
olArr[num==olArr.length?0:num].className="current";
}
</script>
十、左右焦点图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,
ul,
ol,
li,
img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img {
width: 490px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/1.jpg" /></li>
</ul>
</div>
<div id="arr"><span id="left">〈</span><span id="right">〉</span></div>
</div>
</body>
</html>
<script src="../animate10.0.js"></script>
<script type="text/javascript">
var arr=document.getElementById("arr");
var box=document.getElementById("box");
var imgs=document.getElementById("imgs");
var imgArr=imgs.children;
var left=document.getElementById("left");
var right=document.getElementById("right");
var num=0;
//自动轮播
var timer=setInterval(autoplay,1000);
function autoplay(){
if(num==imgArr.length-1){
num=1;
imgs.style.left=0;
}else{
num++;
}
animate(imgs,{left:-490*num});
}
//鼠标移入显示和停止轮播
box.onmouseover=function(){
arr.style.display="block";
clearInterval(timer);
}
//鼠标移出隐藏和开始轮播
box.onmouseout=function(){
arr.style.display="none";
timer=setInterval(autoplay,1000);
}
//点击左边
left.onclick=function(){
if(num==0){
num=imgArr.length-2;
imgs.style.left=-(imgArr.length-1)*490+"px";
}else{
num--;
}
animate(imgs,{left:-490*num});
}
//点击右边
right.onclick=function(){
if(num==imgArr.length-1){
num=0;
imgs.style.left=0;
}else{
num++;
}
animate(imgs,{left:-num*490});
}
</script>