运动的一些案例

最新推荐文章于 2022-02-15 18:09:08 发布

qq_38068491

最新推荐文章于 2022-02-15 18:09:08 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83270703

版权

一、两侧广告跟随

<!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>

qq_38068491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动的一些案例

一、两侧广告跟随&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; img{ position: absol
复制链接

扫一扫