多图片自动和点击轮播
来源：互联网 发布：mac pptp vpn 设置 编辑：程序博客网 时间：2024/05/29 10:05
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/banner1.css">
<script>
//兼容IE/chrome,ff
function move(obj,json,funEnd){
clearInterval(obj.timer);
obj.timer= setInterval(function(){
var flag=true;//设置一个初始值假设全部的属性都已经执行了完了
for(var attr in json){
var currentAttr=0;
if(attr=="opacity"){
currentAttr=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else {
currentAttr=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-currentAttr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=currentAttr)//如果没有到达目标值
{
flag=false;
}
// if(json[attr]==currentAttr){
// clearInterval(obj.timer);
// if(funEnd)funEnd();
// // if(funEnd){
// // funEnd();
// // }
// }
// else {
if(attr=="opacity"){
// currentAttr+=speed;
obj.style.opacity=(currentAttr+speed)/100;
obj.style.filter='alpha(opacity:'+(currentAttr+speed)+')';
}
else {
obj.style[attr]=currentAttr+speed+"px";
}
// }
}
if(flag){//全部的属性已经执行
clearInterval(obj.timer);
if(funEnd)funEnd();
}
},30)
}
//js轮播代码
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj,false)[name];
}
}
function getClass(oParent,className){
var ele=oParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<ele.length;i++){
if(ele[i].className==className){
arr.push(ele[i]);
}
}
return arr;
}
var oBanner=document.getElementById("banner");
var oLi=oBanner.getElementsByTagName("ol")[0].getElementsByTagName("li");
var oUl=oBanner.getElementsByTagName("ul")[0];
var now=0;
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;//给个编号给每个li
oLi[i].onclick=function(){
if(this.index==now)return;
now=this.index;
tab();
}
}
function tab(){
for(var i=0;i<oLi.length;i++){
oLi[i].className="";
}
oLi[now].className="active";
//move(oUl,{"top":-350*now});//上下切换图片轮播
move(oUl,{"left":-500*now});//左右切换图片轮播
}
function next(){
now++;
if(now==oLi.length){
now=0;
}
tab();
}
var timer=setInterval(next,2000);
oBanner.onmouseover=function(){
clearInterval(timer);
}
oBanner.onmouseout=function(){
timer=setInterval(next,2000);
}
}
</script>
<style>
* {
margin:0;
padding: 0;
list-style: none;
}
#banner {
width:500px;
height: 350px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
ol {
position: absolute;
right: 5px;
bottom: 5px;
z-index:2;
}
ol li {
border-radius: 50px;
float: left;
margin-right: 3px;
display: inline;
cursor: pointer;
background: #fcf2cf;
border: 1px solid #f47500;
padding: 2px 6px;
color: #d94b01;
}
.active {
padding: 3px 8px;
font-weight: bold;
color: #ffffff;
background: #ffb442;
position: relative;
bottom: 2px; }
ul {
/*给ul设置一个宽度，若没有宽度，则每张图片都有延迟空白bug*/
width: 2500px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul li {
width: 500px;
height: 350px;
float: left;
}
ul img {
float: left;
width: 500px;
height: 350px;
}
</style>
</head><body>
<!-- div#banner>(ol>li*5)(ul>li*5>img[src="images/zjk$.jpg"]) -->
<div id="banner">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpeg" alt=""></li>
</ul>
</div>
</body>
</html>
