js-图片轮播(极简)

最新推荐文章于 2022-08-29 17:05:32 发布

AsaZyf

最新推荐文章于 2022-08-29 17:05:32 发布

阅读量331

点赞数

分类专栏： js 实用 js基础

本文链接：https://blog.csdn.net/AsaZyf/article/details/80794713

版权

实用同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

js基础

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>图片轮播</title>
*{
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
body{
font-family:"Microsoft YaHei";
}

.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}

.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-img{
background: no-repeat;
width:1200px;
height:460px;
}
.img1{
background-image:url(img/1.jpg);
}
.img2{
background-image:url(img/2.jpg);
}
.img3{
background-image:url(img/3.jpg);
}
.img4{
background-image:url(img/4.jpg);
}

.info{
width:1200px;
}
span{
display: inline-block;
width: 296px;
height:50px;
background:#fff;
text-align: center;
line-height: 50px;
font-size: 22px;
}
.active{
background: #FFCC00;
color: #666;
}
</head>

<body>
<div class="main" id="main">

<div class="info" id="info">
<span class="active">首页</span>
<span>点击看看</span>
<span>会自动的</span>
<span>我的网站</span>
</div>

<div class="banner" id="banner">
<a href="">
<div class="banner-img img1"></div>
</a>
<a href="">
<div class="banner-img img2"></div>
</a>
<a href="">
<div class="banner-img img3"></div>
</a>
<a href="">
<div class="banner-img img4"></div>
</a>
</div>
</div>
var timer = null,
index = 0,
oMain = document.getElementById("main"),
oImg=document.getElementById("banner").getElementsByTagName("div"),
oSpan=document.getElementById("info").getElementsByTagName("span"),
len=oImg.length;

//移出页面，图片自动轮播
oMain.οnmοuseοut=function(){
clearInterval(timer)
timer=setInterval(function(){
index++
if(index>len-1){
index=0
}
autoimg()
},1000)
}
//调用移出函数，打开页面就自动轮播
oMain.onmouseout()

//移入页面，清除定时器，轮播停止
oMain.οnmοuseοver=function(){
clearInterval(timer)
}

function autoimg(){
for (var i=0;i<len;i++) {
oImg[i].style.display="none"
oSpan[i].className=""
}
oImg[index].style.display="block"
oSpan[index].className="active"
}

for (var i = 0; i <len; i++) {
oSpan[i].index=i; //将每个i的值赋值给oSpan[i].index
oSpan[i].οnclick=function(){
index=this.index //设置index等于当前点击的oSpan
autoimg()
}
}
</body>

</html>

AsaZyf

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js-图片轮播(极简)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片轮播&lt;/title&gt; *{ margin:0; padding: 0; }a{ text-decoration: none;}body{ font-fam
复制链接

扫一扫

专栏目录