投稿
  1. 簡單一點首頁
  2. 編程

js網頁圖片切換,js網頁圖片切換快捷鍵

小藍 • • 編程

本文目錄一覽：

如何用js實現點擊圖片切換另一圖片，再次點擊恢復？

方法如下

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″

title/title

/head

body

script    

window.onload=function(){

var Imgbtn=document.getElementById(‘btn’);

var Img=document.getElementById(‘img’);

Imgbtn.onclick=function(){

if(Img.src==”)            {          

Img.src=”;

}else{

Img.src=”

}

}

}

/script

div id=”bg”

div id=”btn”

div id=”txt”試客小兵/div

img id=”img” src=””

/div

/div

/body

/html

擴展資料

JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。

直譯語言的弱點是安全性較差，而且在JavaScript中，如果一條運行不了，那麼下面的語言也無法運行。而其解決辦法就是於使用try{}catch(){}︰

Javascript被歸類為直譯語言，因為主流的引擎都是每次運行時加載代碼並解譯。V8是將所有代碼解譯後再開始運行，其他引擎則是逐行解譯（SpiderMonkey會將解譯過的指令暫存，以提高性能，稱為實時編譯），但由於V8的核心部份多數用Javascript撰寫（而SpiderMonkey是用C++），因此在不同的測試上，兩者性能互有優劣。

與其相對應的是編譯語言，例如C語言，以編譯語言編寫的程序在運行之前，必須經過編譯，將代碼編譯為機器碼，再加以運行。

參考資料：百度百科 JavaScript編程

用js實現一個頁面可以用鍵盤左右方向鍵控制兩張圖片切換

用js的 event.keyCode來獲取方向鍵。

從網上你可以查到左右方向鍵對應的keyCode值，這樣你就能獲取到左右鍵點擊事件了。

然後當左右鍵點擊的時候，觸發顯示和隱藏對應圖片的功能。

圖片的顯示和隱藏，你可以用js給對應的圖片添加顯示或者隱藏的css。

這樣就能實現你要的效果了

JavaScript 的網頁圖片切換代碼

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″

title網頁特效 首頁圖片切換/title

style type=”text/css”

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body {

background:#fff;

color:#000000;

font:12px/1.6em Helvetica, Arial, sans-serif;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:550px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:550px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

/style

script type=”text/javascript”

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != ‘function’) {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

}

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = “0px”;

}

if (!elem.style.top) {

elem.style.top = “0px”;

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x ypos == final_y) {

return true;

}

if (xpos final_x) {

var dist = Math.ceil((final_x – xpos)/10);

xpos = xpos + dist;

}

if (xpos final_x) {

var dist = Math.ceil((xpos – final_x)/10);

xpos = xpos – dist;

}

if (ypos final_y) {

var dist = Math.ceil((final_y – ypos)/10);

ypos = ypos + dist;

}

if (ypos final_y) {

var dist = Math.ceil((ypos – final_y)/10);

ypos = ypos – dist;

}

elem.style.left = xpos + “px”;

elem.style.top = ypos + “px”;

var repeat = “moveElement(‘”+elementID+”‘,”+final_x+”,”+final_y+”,”+interval+”)”;

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName(‘li’);

var iFocusTxs = $(iFocusTxID).getElementsByTagName(‘li’);

for(var i=0; iiFocusBtns.length; i++) {

iFocusBtns[i].className=’normal’;

iFocusTxs[i].className=’normal’;

}

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName(‘li’);

var iFocusTxs = $(iFocusTxID).getElementsByTagName(‘li’);

iFocusBtns[n].className=’current’;

iFocusTxs[n].className=’current’;

}

function iFocusChange() {

if(!$(‘ifocus’)) return false;

$(‘ifocus’).onmouseover = function(){atuokey = true};

$(‘ifocus’).onmouseout = function(){atuokey = false};

var iFocusBtns = $(‘ifocus_btn’).getElementsByTagName(‘li’);

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement(‘ifocus_piclist’,0,0,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,0);

}

if (listLength=2) {

iFocusBtns[1].onmouseover = function() {

moveElement(‘ifocus_piclist’,0,-225,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,1);

}

}

if (listLength=3) {

iFocusBtns[2].onmouseover = function() {

moveElement(‘ifocus_piclist’,0,-450,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,2);

}

}

if (listLength=4) {

iFocusBtns[3].onmouseover = function() {

moveElement(‘ifocus_piclist’,0,-675,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,3);

}

}

}

setInterval(‘autoiFocus()’,3500);

var atuokey = false;

function autoiFocus() {

if(!$(‘ifocus’)) return false;

if(atuokey) return false;

var focusBtnList = $(‘ifocus_btn’).getElementsByTagName(‘li’);

var listLength = focusBtnList.length;

for(var i=0; ilistLength; i++) {

if (focusBtnList[i].className == ‘current’) var currentNum = i;

}

if (currentNum==0listLength!=1 ){

moveElement(‘ifocus_piclist’,0,-225,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,1);

}

if (currentNum==1listLength!=2 ){

moveElement(‘ifocus_piclist’,0,-450,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,2);

}

if (currentNum==2listLength!=3 ){

moveElement(‘ifocus_piclist’,0,-675,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,3);

}

if (currentNum==3 ){

moveElement(‘ifocus_piclist’,0,0,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,0);

}

if (currentNum==1listLength==2 ){

moveElement(‘ifocus_piclist’,0,0,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,0);

}

if (currentNum==2listLength==3 ){

moveElement(‘ifocus_piclist’,0,0,5);

classNormal(‘ifocus_btn’,’ifocus_tx’);

classCurrent(‘ifocus_btn’,’ifocus_tx’,0);

}

}

addLoadEvent(iFocusChange);

/script

/head

body

br /

div align=”center”

div id=”ifocus”

div id=”ifocus_pic”

div id=”ifocus_piclist” style=”left:0; top:0;”

ul

lia href=”#” target=”_blank”img src=”/edu/img/js/200909/1.jpg” alt=”武林三國” border=”0″ //a/li

lia href=”#” target=”_blank”img src=”/edu/img/js/200909/2.jpg” alt=”武林英雄” border=”0″ //a/li

lia href=”#” target=”_blank”img src=”/edu/img/js/200909/3.jpg” alt=”商業大亨” border=”0″ //a/li

lia href=”#” target=”_blank”img src=”/edu/img/js/200909/4.jpg” alt=”帝國遠征” border=”0″ //a/li

/ul

/div

div id=”ifocus_opdiv”/div

div id=”ifocus_tx”

ul

li class=”current”2008年度排名第一的網頁遊戲/li

li class=”normal”2009年最新的網頁遊戲 /li

li class=”normal”商業大亨，挑戰億萬富翁/li

li class=”normal”一款2009年不得不玩的帝國遠征/li

/ul

/div

/div

div id=”ifocus_btn”

ul

li class=”current”img src=”/edu/img/js/200909/s1.jpg” alt=”” //li

li class=”normal”img src=”/edu/img/js/200909/s2.jpg” alt=”” //li

li class=”normal”img src=”/edu/img/js/200909/s3.jpg” alt=”” //li

li class=”normal”img src=”/edu/img/js/200909/s4.jpg” alt=”” //li

/ul

/div

/div

/div

/body

/html

自己改圖片鏈接和大小~~

js如何點擊左右按鈕切換圖片

這樣：

!DOCTYPE html

html

head

meta charset=”UTF-8″

title動態切換圖片/title

/head

style

ul{

padding:0;margin:0;

}

li{

list-style: none;

}

#pic{

position: relative;

width: 400px;

height: 400px;

background-color:red;

margin:100px auto;

background:url(‘image/1.jpg’) no-repeat center;

}

#pic img{

width: 400px;

height: 400px;

}

#pic ul{

width: 50px;

position: absolute;

top: 0;

right: -70px;

}

li{

width: 40px;

height: 40px;

margin-bottom:10px;

background-color: pink;

float: left;

}

#pic span{

position: absolute;

bottom: 10px;

left: 0;

}

#pic p,#pic span{

width: 400px;

height: 20px;

}

#pic p{

position: absolute;

top: 10px;

left: 0;

}

.active{

background-color: red;

}

/style

body

div id=”pic”

img src=”” alt=””

pqwrwe/p

spanwerwer/span

ul

/ul

/div

script

window.onload=function(){

//存放舊li

var oldLi=null;

var num=0;

var oPic = document.getElementById(‘pic’);

var oImg = oPic.getElementsByTagName(‘img’)[0];

var oUL =  oPic.getElementsByTagName(‘ul’)[0];

var oSpan= oPic.getElementsByTagName(‘span’)[0];

var oP = oPic.getElementsByTagName(‘p’)[0];

var oLi= oUL.getElementsByTagName(‘li’);

var arr=[‘image/1.jpg’,’image/2.jpg’,’image/3.jpg’,’image/4.jpg’];

var aText = [‘圖片1′,’圖片2′,’圖片3′,’圖片4’];

for(var i=0;iarr.length;i++){

//動態添加元素

oUL.innerHTML+=’li/li’;

}

// 舊li就等於當前的

oldLi=oLi[num];

// 初始化

oImg.src=arr[num];

oP.innerHTML=num+1+’/’+arr.length;

oSpan.innerHTML=aText[num];

oLi[num].className=’active’;

for(var i=0;iarr.length;i++){

// 給元素自定義屬性

//

oLi[i].index=i;

oLi[i].onclick=function(){

// 當元素被點擊時圖片文字信息都一起變化

oImg.src=arr[this.index];

oP.innerHTML=1+this.index+’/’+arr.length;

oSpan.innerHTML=aText[this.index];

// 清空上一個 當前添加

oldLi.className=”;

//將上一個給當前

oldLi=this;

this.className=’active’;

}

}

}

/script

/body

/html

擴展資料：

注意事項

1、可以通過JS刪除和添加hidden屬性，改用style.display=”none”和style.display=”inline”來實現隱藏和顯示。

2、button屬性，主要的問題時button樣式的問題，如何才能做一個好看的button，通過查找找到了設置button相關的值。

border:none; 設置按鈕無邊框

outline:none;消除按鈕點擊後出現的表示被點擊的邊框

background：url(…)按鈕背景圖片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字陰影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按鈕陰影

border-radius:15px;按鈕邊框圓角

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/198767.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
0 0
上一篇 2024-12-04 10:26
下一篇 2024-12-04 10:26

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性，它可以代理一個數組，監聽數據變化並進行攔截、處理。在實際開發中，使用Proxy(array)可以方便地實現數據的監…

    CUGEL的頭像 CUGEL
    編程 2025-04-29

  • python強行終止程序快捷鍵

    本文將從多個方面對python強行終止程序快捷鍵進行詳細闡述，並提供相應代碼示例。 一、Ctrl+C快捷鍵 Ctrl+C快捷鍵是在終端中經常用來強行終止運行的程序。當你在終端中運行…

    IEUUG的頭像 IEUUG
    編程 2025-04-29

  • 用Python繪製酷炫圖片

    在本篇文章中，我們將展示如何使用Python繪製酷炫的圖片。 一、安裝Python繪圖庫 在使用Python繪製圖片之前，我們需要先安裝Python繪圖庫。Python有很多繪圖庫…

    APYSJ的頭像 APYSJ
    編程 2025-04-29

  • 使用axios獲取返回圖片

    使用axios獲取返回圖片是Web開發中很常見的需求。本文將介紹如何使用axios獲取返回圖片，並從多個方面進行詳細闡述。 一、安裝axios 使用axios獲取返回圖片前，首先需…

    RHHBQ的頭像 RHHBQ
    編程 2025-04-29

  • Python 圖片轉表格

    本文將詳細介紹如何使用Python將圖片轉為表格。大家平時在處理一些資料的時候難免會遇到圖片轉表格的需求。比如從PDF文檔中提取表格等場景。當然，這個功能也可以通過手動複製、粘貼，…

    IDPDZ的頭像 IDPDZ
    編程 2025-04-29

  • Python緩存圖片的處理方式

    本文將從多個方面詳細闡述Python緩存圖片的處理方式，包括緩存原理、緩存框架、緩存策略、緩存更新和緩存清除等方面。 一、緩存原理 緩存是一種提高應用程序性能的技術，在網絡應用中流…

    WRUDP的頭像 WRUDP
    編程 2025-04-29

  • Python如何抓取圖片數據

    Python是一門強大的編程語言，能夠輕鬆地進行各種數據抓取與處理。抓取圖片數據是一個非常常見的需求。在這篇文章中，我們將從多個方面介紹Python如何抓取圖片數據。 一、使用ur…

    CHWWM的頭像 CHWWM
    編程 2025-04-29

  • 解析js base64並轉成unit

    本文將從多個方面詳細介紹js中如何解析base64編碼並轉成unit格式。 一、base64編碼解析 在JavaScript中解析base64編碼可以使用atob()函數，它會將b…

    KNLLK的頭像 KNLLK
    編程 2025-04-29

  • Node.js使用Body-Parser處理HTTP POST請求時，特殊字符無法返回的解決方法

    本文將解決Node.js使用Body-Parser處理HTTP POST請求時，特殊字符無法返回的問題。同時，給出一些相關示例代碼，以幫助讀者更好的理解並處理這個問題。 一、問題解…

    FEYDS的頭像 FEYDS
    編程 2025-04-29

  • python爬取網頁並生成表格

    本文將從以下幾個方面詳細介紹如何使用Python爬取網頁數據並生成表格： 一、獲取網頁數據 獲取網頁數據的一般思路是通過HTTP請求獲取網頁內容，最常用的方式是使用Python庫r…

    HJUXQ的頭像 HJUXQ
    編程 2025-04-28

發表回復

登錄後才能評論