多图片自动和点击轮播

最新推荐文章于 2022-11-12 16:48:15 发布

Freezezeling

最新推荐文章于 2022-11-12 16:48:15 发布

阅读量1.7k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Freezezeling/article/details/78886970

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/banner1.css">

//兼容IE/chrome,ff

window.οnlοad=function(){
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].οnclick=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.οnmοuseοver=function(){
clearInterval(timer);
}
oBanner.οnmοuseοut=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 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>

Freezezeling

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多图片自动和点击轮播

Document//兼容IE/chrome,ff function move(obj,json,funEnd){ clearInterval(obj.timer); obj.timer= setInterval(function(){ var flag=true;//设置一个初始值假设全部的属性都已经执行了完了 for(var attr
复制链接

扫一扫