JSを使用してボタンをクリックした後に画像を自動的に切り替える簡単な方法-H5 チュートリアル-php.cn

JSを使用してボタンをクリックした後に画像を自動的に切り替える簡単な方法

高洛峰

リリース： 2016-12-09 11:41:20

オリジナル

4747 人が閲覧しました

ウェブサイトのメインインターフェースの写真を自由に切り替えられるのをよく見かけますが、それはどのように実現されているのでしょうか?

1. HTML ページのレイアウトは次の図のようになります。

JSを使用してボタンをクリックした後に画像を自動的に切り替える簡単な方法

2. 上記のレイアウトを実装します

swap.html

   
<!DOCTYPE html PUBLIC &#39;-//W3C//DTD HTML 4.01 Strict//EN&#39; &#39;http://www.w3.org/TR/html4/strict.dtd&#39;>
<html>
<head>
<meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=UTF-8&#39;>
<title>在此插入标题</title>
<link rel="stylesheet" type="text/css" href="swap.css"/>
<script type="text/javascript">
<!--
function swap(val){
　　if(val=="left"){
　　　　left.style.display=&#39;block&#39;;//设置为显示
　　　　center.style.display=&#39;none&#39;;//设置为隐藏
　　　　right.style.display=&#39;none&#39;;
　　}else if(val=="center"){
　　　　left.style.display=&#39;none&#39;;
　　　　center.style.display=&#39;block&#39;;
　　　　right.style.display=&#39;none&#39;;
　　}else if(val=="right"){
　　　　left.style.display=&#39;none&#39;;
　　　　center.style.display=&#39;none&#39;;
　　　　right.style.display=&#39;block&#39;;
　　}
　　}
-->
</script>
</head>
<body>
　　<div class="main">
　　<div class="top">
　　<div class="left" id="left"><img  src="images/left.jpg"/ alt="JSを使用してボタンをクリックした後に画像を自動的に切り替える簡単な方法" ></div>
　　<div class="center" id="center"><img  src="images/center.jpg"/ alt="JSを使用してボタンをクリックした後に画像を自動的に切り替える簡単な方法" ></div>
　　<div class="right" id="right"><img  src="images/right.jpg"/ alt="JSを使用してボタンをクリックした後に画像を自動的に切り替える簡単な方法" ></div>
　　</div>
　　<div class="bottom">
　　<ul>
　　<li onmouseover="swap(&#39;left&#39;)"></li>
　　<li onmouseover="swap(&#39;center&#39;)"></li>
　　<li onmouseover="swap(&#39;right&#39;)"></li>
　　</ul>　　
　　</div>
　　</div>
　　</body>
　　</html>

ログイン後にコピー

3.css 実装

swap.css

4. 注意すべきこと

(1) 表示と視認性の違いを明確にする。

display: none を設定すると、コンテンツが非表示になるだけでなく、要素がページ上の位置を占めなくなります。非表示にすることは、この要素をページから一時的に削除することと同じであり、現在のページには影響しません。

可視性: 非表示に設定すると、コンテンツは表示されなくなりますが、その要素は引き続き機能します。これは、表示されるコンテンツを非表示にすることと同じですが、コンテンツは引き続き存在します。ことわざにあるように、「穴に立つことは問題ではない」です;

(2) 画像をクリックするか、マウスを指定した位置に移動すると、画像が変化しますか?もちろん使用する関数は異なりますが、ここではテーブルを指定領域に移動すると絵が切り替わるのでonmouseover()を使用しています。

🎜