幻灯片自动播放源码 web

最新推荐文章于 2021-05-31 18:24:13 发布

都市桃源

最新推荐文章于 2021-05-31 18:24:13 发布

阅读量1.9k

点赞数

分类专栏： web web js 文章标签： web开发 js 框架 javascript

本文链接：https://blog.csdn.net/do_bset_yourself/article/details/45269693

版权

web 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

web js

6 篇文章 0 订阅

订阅专栏

布局源码：

<!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>
body{
background:#000;
}
*{
border:none;
margin:0;
padding:0;
}
#play{
position:relative;
width:470px;
height:150px;
margin:150px auto;
background:#090;
overflow:hidden;
}
#play #img{
width:470px;
height:600px;
list-style:none;
position:absolute;
top:0;
}
#play #img li{
height:150px;
}
#but{
z-index:30000;
width:138px;
height:20px;
background:#FFF;
position:relative;
top:110px;
left:320px;
}
#but ul{
width:138px;
height:20px;
}
#but ul li{
cursor:pointer;
width:20px;
height:20px;
list-style:none;
float:left;
background:#0C6;
margin-left:5px;
text-align:center;
line-height:20px;
}
#but ul li.active{
background:#FF0;
font-size:larger;
}
</style>
<script src="完美运动框架.js"></script>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('play');
var oBt=document.getElementById('but').getElementsByTagName('li');
var oUl=document.getElementById('img');
var aLi=oUl.getElementsByTagName('li');
var now=0;
for(var i=0;i<oBt.length;i++){
oBt[i].index=i;
oBt[i].οnclick=function(){
now=this.index;
qie();
};
}
function qie(){
for(var j=0;j<oBt.length;j++){
oBt[j].className='';
}
oBt[now].className='active';
startMove(oUl,{top:-150*now});
}
var timer;
function auto(){
timer=setInterval(function(){
now++;
if(now==5)
now=0;
qie();
},1000);
}
oDiv.οnmοuseοut=function(){
auto();
}
oDiv.οnmοuseοver=function(){
clearInterval(timer);
}
}
</script>
</head>
<body>
<div id="play">
<div id="but">
<ul id="ol">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<ul id="img">
<li><img src="images/1.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/1.jpg" /></li>
</ul>
</div>
</body>
</html>

运动框架源码：

// JavaScript Document
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,json,fun){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bstop=true;
for(var attr in json){
var beginning=0;
if(attr=='opacity'){
beginning=Math.round(parseFloat(getStyle(obj, attr))*100);
}else{
beginning=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-beginning)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(beginning!=json[attr])
bstop=false;
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(beginning+speed)+')';
obj.style.opacity=(beginning+speed)/100;
}
else
{
obj.style[attr]=beginning+speed+'px';
}

}
if(bstop){
clearInterval(obj.timer);
if(fun)fun();
}

},30)

}