javascript实现点击图片切换功能
更新时间：2022年07月21日 09:48:25 作者：_洋
这篇文章主要为大家详细介绍了javascript实现点击图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现点击图片切换的具体代码，供大家参考，具体内容如下
实现效果：图片点击切换
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../reset.css">
<style>
.img-list{
width: 480px;
height: 850px;
margin: 0 auto;
/* 为a提供参照 */
position:relative;
}
img{
width: 480px;
height: 850px;
object-fit: cover;
}
.img-list li{
/* 开启绝对定位使之可以设置 z-index */
position: absolute;
}
.img-list li:nth-child(3){
z-index: 1;
}
.pointer{
/* 开启绝对定位放在上面 */
position: absolute;
z-index: 999;
bottom: 40px;
margin-left: 140px;
}
.pointer a{
/* display: block; */
/* 横向排列 */
float: left;
width: 20px;
height: 20px;
background-color: salmon;
margin-left: 20px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
/*默认情况下background-color的颜色是会延伸到边框下面的，如果我们不想要延申，需要设置 */
background-clip: content-box;
border:2px solid transparent;
}
.pointer a.active,
.pointer a:hover
{
background-color: #fff;
border:3px solid rgba(0, 0, 0, 0.3);
}
</style>
<script>
window.onload =function(){
var imgArray = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.png","./img/5.jpg"];
var allA = document.getElementsByTagName("a");
var img = document.getElementsByTagName("img")[0];
for(var i =0 ;i<allA.length;i++){
allA[i].num = i;
allA[i].onclick=function(){
// 使用this.name,！！不能使用allA[i].name,因为i此时已经等于5了。
var index = this.num;
img.src=imgArray[index];
for(var j =0 ;j<allA.length;j++){
allA[j].className="";
}
this.className = "active";
}
}
}
</script>
</head>
<body>
<ul class="img-list">
<li><img src="./img/1.jpg" alt=""></li>
<!-- <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/4.png" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li> -->
<div class="pointer">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Extjs表单输入框异步校验的插件实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
本文给大家汇总介绍了几种使用javascript和CSS实现禁止复制页面内容的方法，非常的实用，有需要的小伙伴可以参考下。2015-12-12
这篇文章主要介绍了利用JavaScript实现双向链表以及它的封装和常用操作，文中的示例代码讲解详细，对日常的学习和工作都有一定的价值，快来和小编一起学习吧2021-12-12
这篇文章主要介绍了bootstrap响应式工具使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
下面小编就为大家带来一篇JS模态窗口返回值兼容问题的完美解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章给大家介绍了bootstrap table支持高度百分比的实例代码，通过更改BootstrapTable.prototype.resetView 方法，以支持高度百分比定义，适应不同高度屏幕，感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
工作中做了几款自动化测试工具都是跟日志读取相关，日志格式又大多数都是JSON，所以这里把常用的JS操作JSON的方法做了总结2017-04-04
这篇文章主要为大家详细介绍了js实现商品抛物线加入购物车特效的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了js正则表达式惰性匹配和贪婪匹配用法,结合实例形式详细分析了正则表达式的基本概念以及惰性匹配和贪婪匹配的使用方法,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JavaScript引入方式案例,结合实例形式分析了JavaScript引入方式特性与相关操作技巧,需要的朋友可以参考下2022-07-07
最新评论