js-图片轮播

最新推荐文章于 2019-01-08 21:37:53 发布

AsaZyf

最新推荐文章于 2019-01-08 21:37:53 发布

阅读量166

点赞数

分类专栏： js 文章标签：图片轮播函数传参

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

版权

js 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

函数传参

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
.pic { width:400px; height:500px; position:relative; margin:0 auto;}
.pic img { width:400px; height:500px; }
.pic ul { width:40px; position:absolute; top:0; right:-50px; }
.pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
.pic .active { background:#FC3; }
.pic span { top:0; }
.pic p { bottom:0; margin:0; }
.pic p,.pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
.btn{
width: 24px;
height: 24px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 250px;
text-align: center;
line-height: 24px;
text-decoration: none;
color: #fff;
}
.pic .next{
right: 0;
}
</style>

</head>

<body>

<div id="pic" class="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
<a href="javascript:;" class="btn next">></a>
<a href="javascript:;" class="btn prev"><</a>
</div>

<script>

var oPic = document.getElementById("pic")

var oImg = oPic.getElementsByTagName("img")[0]
var oSpan = oPic.getElementsByTagName("span")[0]
var oP = oPic.getElementsByTagName("p")[0]
var oUl = oPic.getElementsByTagName("ul")[0]
var oA = oPic.getElementsByTagName("a")
var oLi = oUl.getElementsByTagName("li")
var num = 0
var arrUrl = ["img/1.png","img/2.png","img/3.png","img/4.png"]
var arrText = ["1","2","3","4"]

function tab(){

oSpan.innerHTML = num+1+"/"+arrUrl.length
oP.innerHTML = arrText[num]
oImg.src = arrUrl[num]
}
tab()

for (var i=0;i<arrUrl.length;i++) {
oUl.innerHTML += "<li></li>"
}

oLi[0].className = "active"

for (var i=0;i<oLi.length;i++) {
oLi[i].index = i
oLi[i].onclick = function(){
num = this.index
for (var i=0;i<oLi.length;i++) {
oLi[i].className = ""
}

oLi[num].className = 'active'
tab()
}
}

oA[0].onclick = function(){

num++

if(num>arrUrl.length-1){
num = 0
}

for (var i=0;i<oLi.length;i++) {
oLi[i].className = ""
}
oLi[num].className = 'active'
tab()

}

oA[1].onclick = function(){

num--

if(num<0){
num = arrUrl.length-1
}

for (var i=0;i<oLi.length;i++) {
oLi[i].className = ""
}
oLi[num].className = 'active'
tab()

}

</script>

</body>
</html>

AsaZyf

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;style&gt;ul { padding:0; m
复制链接

扫一扫

专栏目录