快捷導(dǎo)航

利用JS實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡(jiǎn)單方法

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

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

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

1.HTML頁(yè)面布局如圖所示：

Main（div）

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

bottom

UL （li）<選擇>left

center

right

2.實(shí)現(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>在此插入標(biāo)題</title>
<link rel="stylesheet" type="text/css" href="swap.css"/>
<script type="text/javascript">
<!--
function swap(val){
　　if(val=="left"){
　　　　left.style.display='block';//設(shè)置為顯示
　　　　center.style.display='none';//設(shè)置為隱藏
　　　　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的實(shí)現(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）關(guān)于display和visibility的區(qū)別要清楚。

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

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

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

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

您可能感興趣的文章: