JavaScript實現左右點擊切換圖片具體代碼

3403771864 發布于2022-10-27 21:26 / 417人閱讀

　　項目中要求實現左右點擊切換圖片，先看看想要展示效果：

　　效果：

　　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("已經是第最后一張了！！")
　　}
　　}
　　}
　　}

　　展示效果和代碼都已敘述，希望大家多多學習！

GPU云服務器云服務器 js菜單左右切換代碼 asp圖片左右代碼 php點擊圖片切換 javascript圖片切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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