JavaScript实现左右点击切换图片具体代码

3403771864 发布于2022-10-27 21:26 / 238人阅读

　　项目中要求实现左右点击切换图片，先看看想要展示效果：

　　效果：

　　HTML

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="utf-8">
　　<title>xxx——空间相册</title>
　　<link rel="stylesheet" type="text/css" href="./css/Photo_album.css"/>
　　</head>
　　<body>
　　<!-- 相册 -->
　　<div id="imgmax">
　　<ul>
　　<li><img src="./img/brtx.jpeg" ></li>
　　<li><img src="./img/1.jpeg" ></li>
　　<li><img src="./img/2.jpeg" ></li>
　　<li><img src="./img/3.jpeg" ></li>
　　<li><img src="./img/brtx.jpeg" ></li>
　　<li><img src="./img/brtx.jpeg" ></li>
　　</ul>
　　</div>
　　</body>
　　<script src="js/Photo_album.js" type="text/javascript" charset="utf-8"></script>
　　</html>

　　CSS:　

　/* 相册 */
　　#imgmax{
　　width: 600px;
　　height: 600px;
　　position: relative;
　　margin: 20px auto;
　　}
　　img{
　　width: 100%;
　　height: 100%;
　　}
　　ui,li{
　　margin: 0;
　　padding: 0;
　　list-style: none;
　　float: left;
　　width: 150px;
　　height: 150px;
　　margin-left: 10px;
　　}
　　.newdiv{
　　width: 600px;
　　height: 600px;
　　background: #fff;
　　opacity: 0.5;
　　}
　　.newimg{
　　width: 300px;
　　height: 300px;
　　position: absolute;
　　left: 150px;
　　top: 50px;
　　}
　　.newspan{
　　position: absolute;
　　width: 20px;
　　height: 20px;
　　left: 450px;
　　top: 50px;
　　background: #fff;
　　text-align: center;
　　}
　　.newspanzuo{
　　position: absolute;
　　width: 20px;
　　height: 20px;
　　left: 100px;
　　top: 150px;
　　background: #fff;
　　text-align: center;
　　}
　　.newspanyou{
　　position: absolute;
　　width: 20px;
　　height: 20px;
　　left: 480px;
　　top: 150px;
　　background: #fff;
　　text-align: center;
　　}

　　JavaScript：　

　/*
　　说明：根据<1i>标签、得到当前网页所有的<1i>元素返回值：返回的是数组，存储所有的<1i>元素
　　作用：
　　1.可用于监听点击事件
　　2.可根据当前<1i>元素得到内部存储的图片路径
　　3.可根据图片的路劲，做一个大图展示
　　*/
　　var lis = document.getElementsByTagName("li"); //获取li标签
　　/*
　　说明：根据id，得到imgmax元素
　　返回值：返回的是最大的盒子元素
　　作用：
　　可像此盒子内【追用】预览图片时所需的所有【元素】
　　1.追加盒子元素（用于遮盖当前所有图片）
　　2.追加图片元素（用于展示【预览图】）
　　3.追加span文字（用于展示“X”,退出预览）
　　*/
　　var box = document.getElementById("imgmax"); //获取相册盒子
　　var index = 0;
　　//循环遍历li标签
　　//迭代所有的【li】，用于监听【li】的点击事件
　　for (let i = 0; i < lis.length; i++) {
　　/*
　　当监听成功，绑定【匿名函数】，用于编写具体的逻辑
　　1.得到当前点击<li>元素的图片路径
　　2.创建：div元素，用于遮盖当前所有图片
　　3.创建：img元素，用于展示【预览图】
　　4.创建 span元素（用于展示“X”,退出预览）
　　*/
　　lis[i].onclick = function() {
　　//弹出当前li标签中图片路径
　　//alert(this.getElementsByTagName("img")[0].src)
　　//2.创建：div元素，用于遮盖当前所有图片
　　// box.appendChild()
　　var j = i;
　　var newDiv = document.createElement('div');
　　newDiv.className = "newdiv";
　　box.appendChild(newDiv)
　　//3.创建：img元素，用于展示【预览图】
　　var newImg = document.createElement("img");
　　newImg.className = "newimg"
　　newImg.src=this.getElementsByTagName("img")[0].src
　　box.appendChild(newImg);
　　//创建 span元素（用于展示“X”,退出预览）
　　var newSpan = document.createElement("span");
　　newSpan.innerHTML = "X";
　　newSpan.className = "newspan";
　　box.appendChild(newSpan);
　　newSpan.onclick = function(){
　　box.removeChild(newDiv);
　　box.removeChild(newImg);
　　box.removeChild(Spanz);
　　box.removeChild(Spany);
　　box.removeChild(newSpan);
　　}
　　// 左边
　　var Spanz = document.createElement("span");
　　Spanz.innerHTML = "<";
　　Spanz.className = "newspanzuo";
　　box.appendChild(Spanz);
　　Spanz.onclick = function(){
　　if (j-->=0) {
　　newImg.src=document.getElementsByTagName("img")[j].src
　　} else{
　　alert("已经是第一张了！！")
　　}
　　}
　　// 右边
　　var Spany = document.createElement("span");
　　Spany.innerHTML = ">";
　　Spany.className = "newspanyou";
　　box.appendChild(Spany);
　　Spany.onclick = function(){
　　if (j++<lis.length-1) {
　　newImg.src=document.getElementsByTagName("img")[j].src
　　} else{
　　alert("已经是第最后一张了！！")
　　}
　　}
　　}
　　}

　　展示效果和代码都已叙述，希望大家多多学习！

服务器托管专线服务 js菜单左右切换代码 asp图片左右代码 php点击图片切换 javascript图片切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128222.html

授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Zack 2019-08-29 16:58 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

SKYZACK 2019-08-02 11:42 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Pink 2019-08-23 12:22 评论0 收藏0
用javascript实现图片轮播简单版示例

　　这篇文章简而言之就是说用javascript实现图片轮播简单效果的具体代码，直接放代码：　　这里是css样式　　*{ 　　margin:0; 　　padding:0; 　　} 　　ul, 　　li{ 　　list-style:none; 　　} 　　img{ 　　display:block; 　　/*vertical-align:middle;*/ 　　} 　　a{ 　　text-decora...

3403771864 2022-10-24 22:04 评论0 收藏0
javascript简单轮播图

摘要：轮播图实现原理通过多张图片平铺，用只显示一张图片其他的隐藏，无缝滚动用定时器改变元素的值让图片呈现左右滚动的效果。 **轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

lk20150415 2019-08-02 15:58 评论0 收藏0