버튼을 클릭하면 JS를 사용하여 이미지를 자동으로 전환하는 간단한 방법-H5 튜토리얼-php.cn

버튼을 클릭하면 JS를 사용하여 이미지를 자동으로 전환하는 간단한 방법

高洛峰

풀어 주다： 2016-12-09 11:41:20

원래의

4771명이 탐색했습니다.

웹사이트 메인 인터페이스의 사진을 자유롭게 전환할 수 있는 경우를 흔히 볼 수 있는데, 이를 어떻게 구현하나요?

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

@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;//初始状态不显示
}
.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) 디스플레이와 가시성의 차이를 명확히 하세요.

표시: 없음을 설정하면 콘텐츠가 숨겨질 뿐만 아니라 요소가 페이지에서 위치를 차지하지 않습니다. 숨기기는 페이지에서 요소가 일시적으로 삭제되는 것과 동일하며 아무 것도 표시되지 않습니다. 현재 페이지에 영향을 미칩니다.

가시성: 숨김으로 설정하면 콘텐츠가 표시되지 않더라도 해당 요소는 계속 작동합니다. 이는 표시할 콘텐츠를 숨기는 것과 같지만 항목은 여전히 존재합니다. "구덩이에 서 있어도 문제없다"는 속담처럼

(2) 그림을 클릭하면 그림이 바뀌길 원하시나요? 아니면 마우스를 특정 위치로 이동하면 그림이 바뀌기를 원하시나요? 물론 사용하는 함수는 다릅니다. 여기서 테이블이 지정된 영역으로 이동하면 그림이 전환되므로 onmouseover()를 사용합니다.