用原生JS实现图片轮播切换功能

最新推荐文章于 2024-06-17 15:29:34 发布

Lurkers.

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量812

点赞数 2

分类专栏： Javascript 文章标签： Javascript

本文链接：https://blog.csdn.net/this_name_true/article/details/80601166

版权

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用原生JavaScript创建一个图片轮播切换功能。通过DOM操作和事件监听，实现了点击按钮或列表项来切换图片显示，并更新相关提示信息。示例代码详细展示了整个实现过程。

摘要由CSDN通过智能技术生成

效果如图：

代码如下：

<!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;
background: url(img/loader_ico.gif) no-repeat center #fff;
}

.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 oDiv=document.getElementById("pic")
var oImg=oDiv.getElementsByTagName("img")[0]
var oSpan=oDiv.getElementsByTagName("span")[0]
var oP=oDiv.getElementsByTagName("p")[0]
var oUl=oDiv.getElementsByTagName("ul")[0]
var oLi=oUl.getElementsByTagName("li")
var oA=oDiv.getElementsByTagName("a")

/*定义数组begin*/
var num=0
var arrImg=["img/1.png","img/2.png","img/3.png","img/4.png"]
var arrTex=["图片1","图片2","图片3","图片4"]
/*定义数组end*/

/*初始化展示begin*/
oImg.src=arrImg[0]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[0]
/*初始化展示end*/

/*点击下一张切换begin*/
oA[0].οnclick=function(){
num++
if(num>arrImg.length-1){
num=0
}
oImg.src=arrImg[num]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[num]
for (var i=0;i<oLi.length;i++) {
oLi[i].className=""
}
oLi[num].className="active"

}
/*点击下一张切换end*/

/*点击上一张切换begin*/
oA[1].οnclick=function(){
num--
if(num<0){
num=arrImg.length-1
}
oImg.src=arrImg[num]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[num]
for (var i=0;i<oLi.length;i++) {
oLi[i].className=""
}
oLi[num].className="active"

}
/*点击下一张切换end*/

/*for循环拼接生成li begin*/
for ( var i=0;i<arrImg.length;i++) {
oUl.innerHTML+="<li></li>"
}
/*for循环拼接生成li end*/

oLi[0].className="active"

/*点击当前li关联图片下标 begin*/
for ( var i=0;i<oLi.length;i++) {
oLi[i].index=i
oLi[i].οnclick=function(){
for ( var i=0;i<oLi.length;i++) {

oLi[i].className=""
}

this.className="active"
num=this.index
oImg.src=arrImg[num]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[num]

}

}
/*点击当前li关联图片下标 begin*/

</script>
</body>

</html>

Lurkers.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
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;
复制链接

扫一扫