利用JS實現(xiàn)點擊按鈕后圖片自動切換的簡單方法

更新時間：2016年10月24日 09:08:49 投稿：jingxian

下面小編就為大家?guī)硪黄肑S實現(xiàn)點擊按鈕后圖片自動切換的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

我么常?？吹揭粋€網站的主界面的圖片可以切換自如，那么又是如何實現(xiàn)的呢？

1.HTML頁面布局如圖所示：

Main（div）

top(div)（顯示需要顯示的圖片）

bottom

UL （li）<選擇>left

center

right

2.實現(xiàn)上述布局

swap.html

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>在此插入標題</title>
<link rel="stylesheet" type="text/css" href="swap.css"/>
<script type="text/javascript">
<!--
function swap(val){
　　if(val=="left"){
　　　　left.style.display='block';//設置為顯示
　　　　center.style.display='none';//設置為隱藏
　　　　right.style.display='none';
　　}else if(val=="center"){
　　　　left.style.display='none';
　　　　center.style.display='block';
　　　　right.style.display='none';
　　}else if(val=="right"){
　　　　left.style.display='none';
　　　　center.style.display='none';
　　　　right.style.display='block';
　　}
　　}
-->
</script>
</head>
<body>
　　<div class="main">
　　<div class="top">
　　<div class="left" id="left"><img src="images/left.jpg"/></div>
　　<div class="center" id="center"><img src="images/center.jpg"/></div>
　　<div class="right" id="right"><img src="images/right.jpg"/></div>
　　</div>
　　<div class="bottom">
　　<ul>
　　<li onmouseover="swap('left')"></li>
　　<li onmouseover="swap('center')"></li>
　　<li onmouseover="swap('right')"></li>
　　</ul>　　
　　</div>
　　</div>
　　</body>
　　</html>

3.css的實現(xiàn)

swap.css

@CHARSET "UTF-8";
.main{
　　width:1320px;
　　height:334px;
　　border:1px solid red;
　　background-color:silver;
}

.top{
　　width:1300px;
　　height:304px;
　　margin-top: 5px;
　　margin-left: 10px;
　　background-color: green;
}

.top .left{
　　display: block;//讓left.jpg作為第一張圖片顯示
}
.top .center{
　　display: none;//初始狀態(tài)不顯示
}
.top .right{
　　display: none;//不顯示
}

.bottom{
　　width:1300px;
　　height:15px;
　　margin-top: 5px;
　　margin-left: 10px;
　　background-color: gray;
}
.bottom ul{
　　margin: 0px;
　　margin-left:500px;
　　padding: 0px;
　　width:260px;
　　height:50px; 
}
.bottom ul li{
　　width:80px;
　　height:10px;
　　margin-top:3px;
　　margin-right:3px;
　　background-color:yellow;
　　list-style-type: none;
　　float:left;
}

4.注意的地方

（1）關于display和visibility的區(qū)別要清楚。

display:在設置none的時候不僅內容會隱藏，而且元素不會在頁面占據(jù)位置，隱藏相當于此元素暫時從頁面刪除了，不對現(xiàn)在頁面起任何作用。

visibility：在設置hidden的時候，雖然內容不會顯示但是，其元素任然會起作用，相當于只是把要顯示的內容用隱藏了，然而東西依然存在。用俗話就是“站著茅坑不xx”;

(2)你是想要點擊還是鼠標移動到指定位置圖片就會變換？所使用的函數(shù)當然不一樣，此處是如表移動到指定區(qū)域就會實現(xiàn)圖片切換，所以使用的是onmouseover()。

以上就是小編為大家?guī)淼睦肑S實現(xiàn)點擊按鈕后圖片自動切換的簡單方法全部內容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

用方法封裝javascript的new操作符(一)
雖然js是基于對象的，但在很多時候會使用到new這個操作符。
2010-12-12
js H5 canvas投籃小游戲
這篇文章主要為大家詳細介紹了JavaScript結合H5 canvas實現(xiàn)投籃小游戲的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
js中數(shù)組Array的一些常用方法總結
Array()是我們在js中常常寫到的代碼，今天就總結哈Array的對象具有哪些方法，感興趣的朋友可以了解下
2013-08-08
Alova.js現(xiàn)代化請求庫使用指南
alova.js 是一個基于 Promise 的輕量級 HTTP 請求庫,它提供了簡單而強大的 API 來處理前端的 HTTP 請求,它的設計目標是簡化開發(fā)者在前端進行 HTTP 請求的過程,提供更好的開發(fā)體驗和更高的效率,本文給大家詳細介紹了Alova.js現(xiàn)代化請求庫的使用,需要的朋友可以參考下
2025-03-03
JavaScript ECMA-262-3 深入解析.第三章.this
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關的更多細節(jié)。討論的主題就是this關鍵字
2011-09-09
用js生成a標簽下載文件并攜帶請求頭的兩種方法
這篇文章主要給大家介紹了關于用js生成a標簽下載文件并攜帶請求頭的兩種方法, 這種下載文件方式在前端項目中非常常見,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-03-03
純JS實現(xiàn)的讀取excel文件內容功能示例【支持所有瀏覽器】
這篇文章主要介紹了純JS實現(xiàn)的讀取excel文件內容功能,結合實例形式分析了基于js相關插件進行Excel文件讀取的相關操作技巧,需要的朋友可以參考下
2018-06-06
數(shù)組Array的排序sort方法
下面小編就為大家?guī)硪黄獢?shù)組Array的排序sort方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
require導入module.exports 或 exports導出的使用方法
module.exports用于導出整個模塊的內容,可以通過賦值給 module.exports 導出一個對象、函數(shù)或值,導出的內容可以被其他模塊通過require 導入,本文給大家介紹require導入module.exports 或 exports導出的使用,感興趣的朋友一起看看吧
2023-11-11
JS 9個Promise面試題
這篇文章主要介紹了JS 9個Promise面試題，對異步Promise感興趣的同學，可以參考下
2021-05-05