成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript實(shí)現(xiàn)左右點(diǎn)擊切換圖片具體代碼

3403771864 / 452人閱讀

　　項(xiàng)目中要求實(shí)現(xiàn)左右點(diǎn)擊切換圖片，先看看想要展示效果：

　　效果：

　　HTML

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="utf-8">
　　<title>xxx——空間相冊(cè)</title>
　　<link rel="stylesheet" type="text/css" href="./css/Photo_album.css"/>
　　</head>
　　<body>
　　<!-- 相冊(cè) -->
　　<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:　

　

　/* 相冊(cè) */
　　#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：　

　/*
　　說明：根據(jù)<1i>標(biāo)簽、得到當(dāng)前網(wǎng)頁所有的<1i>元素返回值：返回的是數(shù)組，存儲(chǔ)所有的<1i>元素
　　作用：
　　1.可用于監(jiān)聽點(diǎn)擊事件
　　2.可根據(jù)當(dāng)前<1i>元素得到內(nèi)部存儲(chǔ)的圖片路徑
　　3.可根據(jù)圖片的路勁，做一個(gè)大圖展示
　　*/
　　var lis = document.getElementsByTagName("li"); //獲取li標(biāo)簽
　　/*
　　說明：根據(jù)id，得到imgmax元素
　　返回值：返回的是最大的盒子元素
　　作用：
　　可像此盒子內(nèi)【追用】預(yù)覽圖片時(shí)所需的所有【元素】
　　1.追加盒子元素（用于遮蓋當(dāng)前所有圖片）
　　2.追加圖片元素（用于展示【預(yù)覽圖】）
　　3.追加span文字（用于展示“X”,退出預(yù)覽）
　　*/
　　var box = document.getElementById("imgmax"); //獲取相冊(cè)盒子
　　var index = 0;
　　//循環(huán)遍歷li標(biāo)簽
　　//迭代所有的【li】，用于監(jiān)聽【li】的點(diǎn)擊事件
　　for (let i = 0; i < lis.length; i++) {
　　/*
　　當(dāng)監(jiān)聽成功，綁定【匿名函數(shù)】，用于編寫具體的邏輯
　　1.得到當(dāng)前點(diǎn)擊<li>元素的圖片路徑
　　2.創(chuàng)建：div元素，用于遮蓋當(dāng)前所有圖片
　　3.創(chuàng)建：img元素，用于展示【預(yù)覽圖】
　　4.創(chuàng)建 span元素（用于展示“X”,退出預(yù)覽）
　　*/
　　lis[i].onclick = function() {
　　//彈出當(dāng)前l(fā)i標(biāo)簽中圖片路徑
　　//alert(this.getElementsByTagName("img")[0].src)
　　//2.創(chuàng)建：div元素，用于遮蓋當(dāng)前所有圖片
　　// box.appendChild()
　　var j = i;
　　var newDiv = document.createElement('div');
　　newDiv.className = "newdiv";
　　box.appendChild(newDiv)
　　//3.創(chuàng)建：img元素，用于展示【預(yù)覽圖】
　　var newImg = document.createElement("img");
　　newImg.className = "newimg"
　　newImg.src=this.getElementsByTagName("img")[0].src
　　box.appendChild(newImg);
　　//創(chuàng)建 span元素（用于展示“X”,退出預(yù)覽）
　　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("已經(jīng)是第一張了??！")
　　}
　　}
　　// 右邊
　　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("已經(jīng)是第最后一張了??！")
　　}
　　}
　　}
　　}

　　展示效果和代碼都已敘述，希望大家多多學(xué)習(xí)！


文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/128222.html

相關(guān)文章

  • 授人以漁式解析原生JS寫輪播圖

    摘要：鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來，鼠標(biāo)移開時(shí)左右箭頭隱藏掉并且自動(dòng)輪播。核心原理清除定時(shí)器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動(dòng)輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動(dòng)輪播五張圖，按左右箭頭可以手動(dòng)切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來，...

    Zack 評(píng)論0 收藏0

  • 授人以漁式解析原生JS寫輪播圖

    摘要：鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來，鼠標(biāo)移開時(shí)左右箭頭隱藏掉并且自動(dòng)輪播。核心原理清除定時(shí)器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動(dòng)輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動(dòng)輪播五張圖，按左右箭頭可以手動(dòng)切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來，...

    SKYZACK 評(píng)論0 收藏0

  • 授人以漁式解析原生JS寫輪播圖

    摘要：鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來，鼠標(biāo)移開時(shí)左右箭頭隱藏掉并且自動(dòng)輪播。核心原理清除定時(shí)器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動(dòng)輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動(dòng)輪播五張圖，按左右箭頭可以手動(dòng)切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來，...

    Pink 評(píng)論0 收藏0

  • 用javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單版示例

    　　這篇文章簡(jiǎn)而言之就是說用javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單效果的具體代碼，直接放代碼：　　這里是css樣式　　*{ 　　margin:0; 　　padding:0; 　　} 　　ul, 　　li{ 　　list-style:none; 　　} 　　img{ 　　display:block; 　　/*vertical-align:middle;*/ 　　} 　　a{ 　　text-decora...

    3403771864 評(píng)論0 收藏0

  • javascript簡(jiǎn)單輪播圖

    摘要：輪播圖實(shí)現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐闹底寛D片呈現(xiàn)左右滾動(dòng)的效果。 **輪播圖實(shí)現(xiàn)原理： 通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐膌eft值讓圖片呈現(xiàn)左右滾動(dòng)的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

    lk20150415 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<