Dreamweaver之簡單實現網站佈局、圖片漂浮、區域跳轉、登陸註冊及圖片檢視器

Eastmount發表於2018-11-22

這篇文章是作者《中小型網站開發及web設計》課程給同學們分享的網頁設計線上知識，主要涉及Dreamweaver實現網站佈局、簡單站點開發、區域跳轉、註冊登入介面、圖片檢視器等內容，課程前期已經詳細講解了TXT撰寫HTML基礎程式碼，後期準備結合軟體加深下。非常基礎的文章，希望對初學者有所幫助。

1.Dreamweaver建立站點及註冊頁面
2.DW實現網頁區域跳轉
3.圖片廣告漂浮及Spry選單欄
4.網站簡單佈局及樣式設定
5.JS登陸介面實現
6.圖片瀏覽器

程式碼下載地址：https://download.csdn.net/download/eastmount/10801407

PS：2019年1~2月作者參加了CSDN2018年部落格評選，希望您能投出寶貴的一票。我是59號，Eastmount，楊秀璋。投票地址：https://bss.csdn.net/m/topic/blog_star2018/index

Dreamweaver之簡單實現網站佈局、圖片漂浮、區域跳轉、登陸註冊及圖片檢視器

五年來寫了314篇部落格，12個專欄，是真的熱愛分享，熱愛CSDN這個平臺，也想幫助更多的人，專欄包括Python、資料探勘、網路爬蟲、影象處理、C#、Android等。現在也當了兩年老師，更是覺得有義務教好每一個學生，讓貴州學子好好寫點程式碼，學點技術，"師者，傳到授業解惑也"，提前祝大家新年快樂。2019我們攜手共進，為愛而生。

一. 建立站點及註冊頁面

首先，建立站點。點選“站點”=>“新建站點”。

建立的站點比如位於桌面“eastmount”資料夾中，整個網站相關的內容都存放在該資料夾中。

選中站點，右鍵新建HTML檔案及資料夾。

在站點中建立一個“register.html”檔案，如下所示：

插入的程式碼如下圖所示：

register.html

<html>
<head>
<style type="text/css">
	/* 這個連結改變顏色 */
	a.one:link {color: #ff0000}
	a.one:visited {color: #0000ff}
	a.one:hover {color: #ffcc00}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用者註冊</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
 
<body>
<form id="form1" name="form1" method="post">
  <table width="570" border="0" align="center">
    <tr>
      <td colspan="2" align=center><H2>學生使用者註冊</H2></td>
    </tr>
    <tr>
      <td colspan="2" align=right><A href="index.php" class="one">返回</A></td>
    </tr>
    <tr>
      <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
    </tr>
    <tr>
      <td  width="217"><div align="right">學號:<span class="STYLE1">*</span></div></td>
      <td width="343"><input type="text" name="number" id="number" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">姓名:<span class="STYLE1">*</span></div></td>
      <td><input type="text" name="name" id="name" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">插入檔案:<span class="STYLE1">*</span></div></td>
      <td><input type="file" name="wj" id="wj" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">性別:<span class="STYLE1">*</span></div></td>
      <td>男<input type="radio" value="男" name="sex"> 
	女<input type="radio" value="女" name="sex"> 
      </td>
    </tr>
    <tr>
      <td><div align="right">興趣:<span class="STYLE1">*</span></div></td>
      <td>吃飯<input type="checkbox" value="吃飯" name="interest1"> 
	睡覺<input type="checkbox" value="睡覺" name="interest2"> 
	寫程式碼<input type="checkbox" value="睡覺" name="interest3"> 
      </td>
    </tr>
    <tr>
      <td><div align="right">Email郵件:<span class="STYLE1">*</span></div></td>
      <td><input type="text" name="email" id="email" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">密碼:<span class="STYLE1">*</span></div></td>
      <td><input type="password" name="pwd" id="pwd" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">確認密碼:<span class="STYLE1">*</span></div></td>
      <td><input type="password" name="pwd2" id="pwd2" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
    </tr>
    <tr>
      <td><div align="right">學院:</div></td>
      <td><select name="zy" id="zy" value="" style=width:165pt; maxlength="50">
        <option value="軟體學院">軟體學院</option>
        <option value="計算機學院">計算機學院</option>
        <option value="自動化學院">自動化學院</option>
        <option value="光電學院">光電學院</option>
        <option value="車輛學院">車輛學院</option>
        <option value="資訊與電子學院">資訊與電子學院</option>
        <option value="機電學院">機電學院</option>
        <option value="基礎教育學院">基礎教育學院</option>
        <option value="其他">其他</option>
      	</select>      
      </td>
    </tr>
    <tr>
      <td><div align="right">出生日期:<span class="STYLE1">*</span></div></td>
      <td><input type="date" name="birth" id="birth" value="" 
      	style=width:165pt; maxlength="50" ></td>
    </tr>
    <tr>
      <td><div align="right">喜歡顏色:<span class="STYLE1">*</span></div></td>
      <td><input type="color" name="col" id="col" value="" 
      	style=width:165pt; maxlength="50" ></td>
    </tr>
    <tr>
      <td><p align="right">專業:</p>
      <p align="right">（單選）</p></td>
      <td><select name="subject" size="4" id="subject" value="" style=width:165pt; maxlength="50">
        <option value="軟體工程">軟體工程</option>
        <option value="數字媒體">數字媒體</option>
        <option value="資訊保安">資訊保安</option>
        <option value="數字模擬">數字模擬</option>
        <option value="移動應用開發">移動應用開發</option>
      </select></td>
    </tr>
		<tr>
      <td><div align="right">入學年月:</div></td>
      <td><select name="year" id="year" value="" style=width:165pt; maxlength="50">
        <option value="2010年">2010年</option>
        <option value="2011年">2011年</option>
        <option value="2012年">2012年</option>
        <option value="2013年">2013年</option>
        <option value="2014年">2014年</option>
        <option value="2015年">2015年</option>
        <option value="2016年">2016年</option>
        <option value="2017年">2017年</option>
        <option value="2018年">2018年</option>
      	</select>      
      </td>
    </tr>
    <tr>
      <td><div align="right"></div></td>
      <td><select name="month" id="month" value="" style=width:165pt; maxlength="50">
        <option value="1月">01月</option>
        <option value="2月">02月</option>
        <option value="3月">03月</option>
        <option value="4月">04月</option>
        <option value="5月">05月</option>
        <option value="6月">06月</option>
        <option value="7月">07月</option>
        <option value="8月">08月</option>
        <option value="9月">09月</option>
        <option value="10月">10月</option>
        <option value="11月">11月</option>
        <option value="12月">12月</option>
      	</select>      
      </td>
    </tr>
    <tr>
      <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
    </tr>
    <tr>
      <td><div align="right">
        <input type="submit" style='font-size:15px' name="Submit" value="提交"/>
      </div></td>
      <td><div align="center">
      	<input type="reset" name="button2" style='font-size:15px' id="button2" value="重置" />
      	</div></td>
    </tr>
  </table>
</form>
</body>
</html>

執行結果如下所示：

二. DW實現網頁區域跳轉

接下來講解網頁區域跳轉，首先建立新的網頁 main1.html。

然後插入一張圖片，如下所示：

通過div設定圖片居中，該圖片建議學生採用PS技術構建自己的網頁主介面。接在在Dreamweaver中點選圖片，在左下角中可以插入熱點區域。

可以選擇矩形、圓形或多邊形。

選中之後可以勾線我們的“個人簡介”等字樣，當滑鼠點選這些區域時能夠進行跳轉。底部可以新增要跳轉的網址，比如百度或本地的HTML網頁。

其實熱點區域跳轉對應的HTML標籤是MAP，如下：

main1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>

<body>
	<div align="center">
		<img src="images/bg.png" width="900" height="486" usemap="#Map" border="0" />
        <map name="Map" id="Map">
          <area shape="rect" coords="51,115,172,156" href="http://www.baidu.com" />
          <area shape="rect" coords="203,82,268,127" href="#" />
          <area shape="rect" coords="286,146,400,194" href="#" />
          <area shape="rect" coords="432,176,531,214" href="#" />
          <area shape="rect" coords="555,112,660,156" href="#" />
          <area shape="rect" coords="715,117,810,155" />
        </map>
    </div>
</body>
</html>

跳轉過程如下所示，點選個人簡介跳轉至百度主頁。

三. 圖片廣告漂浮及Spry選單欄

接著建立一個 pic.html檔案，並新增相應程式碼。其中images資料夾中插入一張 test.jpg 圖片。

對應的程式碼如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style type="text/css">
        #demo {
            width: 100px;
            height: 100px;
            position:absolute;
            border-radius:50px;
        }
    </style>
 
    <script type="text/javascript">
        window.onload = function(){
            var demo = document.getElementById('demo');
            var sx = sy = 10;
            var x = y = 0;
 
            function move(){
                if(document.documentElement.clientWidth - demo.offsetWidth-10 < x || x < 0){
                    sx = -sx;
                }
 
                if(document.documentElement.clientHeight - demo.offsetHeight-10 < y || y < 0){
                    sy = -sy;
                }
 
                x = demo.offsetLeft + sx;
                y = demo.offsetTop + sy;
 
                demo.style.left = x + 'px';
                demo.style.top = y + 'px';
            }
 
            var timer = setInterval(move, 100);
 
            demo.onmouseover = function(){
                clearInterval(timer);
            }
 
            demo.onmouseout = function(){
                timer = setInterval(move, 100);
            }
        }
    </script>
 
    <img src="images/test.jpg" id="demo" />
    
</body>
</html>

注意：該檔案將JavaScript程式碼切入其中，沒有格外的JS檔案。
執行結果如下圖所示：

接著講解網站導航欄，可以通過Dreamweaver插入Spry選單欄實現。

選擇水平選單欄。

最終結果如下圖所示，更多知識希望同學們結合TABEL或DIV+CSS佈局進行設計。

四. 網站簡單佈局及樣式設定

下面補充一個簡單的介面佈局，程式碼如下：
main2.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style type="text/css">
	.1{
		position:absolute;
		margin-top:20px;
		width:1200px;
		text-align:center;
	}
	.toubu {
		position:absolute;
		font-size: 36px;
		color:#333;
		margin-top:10px;
		margin-left:230px;
		width:100px;
	}
	.diyi{
		position:absolute;
		height:40px;
		width:600px;
		border-radius:25px;
		background-color:#0C9;
		margin-left:550px;
		margin-top:0px;
		font-size:36px;
		padding-left:15px;
		padding-top:6px;
		padding-bottom:6px;
	}
	a{
		text-decoration:none;
	}
	.dier{
		position:absolute;
		margin-top:60px;
		margin-left:80px;
				
	}
	
	p {
		font-weight: 400;
	}
						
	h2 {
		color: #9FF;
	}
</style>
</head>

<body >
    <header>
      <div class="1">
            <div class="toubu">
              <span>秀璋</span >
            </div>
    
            <span class="diyi">
              <span ><marquee height="140px">歡迎訪問Eastmount的主頁</marquee></span>
          </span>
      <div>
          
      <div>          
      </div>
    </header>
     <div class="dier">
     <img  height="300px" width="1200px" src="images/bg02.jpg"  />
    </div>
</body>
</html>

插入圖片bg02.jpg，顯示結果如下所示：

五. JS簡單登陸介面實現

下面簡單講解一個登陸介面實現，該介面採用JS、CSS等檔案。同學們在製作網站過程中，可以從開源網站下載一些比較好的程式碼，然後結合PS等技術修改為自己的成果。

如下圖所示，在站點中插入已下載的圖片、CSS、JS等檔案。

然後建立 login.html 並新增對應的程式碼，程式碼中含有簡單的輸入使用者名稱、密碼判斷。

執行結果如下所示：

login.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系統登入</title>
<link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
<link href="css/demo.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
<script>
	$(function(){
		$(".i-text").focus(function(){
			$(this).addClass('h-light');
		});
	
		$(".i-text").focusout(function(){
			$(this).removeClass('h-light');
		});
	
		$("#username").focus(function(){
			var username = $(this).val();
			if(username=='輸入賬號'){
				$(this).val('');
			}
		});
		
		$("#username").focusout(function(){
			var username = $(this).val();
			if(username==''){
			$(this).val('輸入賬號');
			}
		});
		
		$("#password").focus(function(){
			 var username = $(this).val();
			 if(username=='輸入密碼'){
				 $(this).val('');
			}
		});
		
		$("#yzm").focus(function(){
			 var username = $(this).val();
			 if(username=='輸入驗證碼'){
			 $(this).val('');
			}
		});
		
		$("#yzm").focusout(function(){
			 var username = $(this).val();
			 if(username==''){
				$(this).val('輸入驗證碼');
			 }
		});
	
		$(".registerform").Validform({
			tiptype:function(msg,o,cssctl){
				var objtip=$(".error-box");
				cssctl(objtip,o.type);
				objtip.text(msg);
			},
			ajaxPost:true
		});
	
	});

</script>
</head>
<body>

<div class="header">
  <h1 class="headerLogo"><a title="後臺管理系統" target="_blank" href="http://www.jq22.com"><img alt="logo" src="images/logo.gif"></a></h1>
	<div class="headerNav">
		<a target="_blank" href="http://www.jq22.com">華軟官網</a>
		<a target="_blank" href="http://www.jq22.com">關於華軟</a>
		<a target="_blank" href="http://www.jq22.com">開發團隊</a>
		<a target="_blank" href="http://www.jq22.com">意見反饋</a>
		<a target="_blank" href="http://www.jq22.com">幫助</a>	
	</div>
</div>

<div class="banner">
<div class="login-aside">
  <div id="o-box-up"></div>
  <div id="o-box-down"  style="table-layout:fixed;">
  <div class="error-box"></div>
  <form class="registerform"action="demo/ajax_post.jsp">
   <div class="fm-item">
	   <label for="logonId" class="form-label">MISS系統登陸：</label>
	   <input type="text" value="輸入賬號" maxlength="100" id="username" class="i-text" ajaxurl="demo/valid.jsp"  datatype="s6-18" errormsg="使用者名稱至少6個字元,最多18個字元！"  >    
       <div class="ui-form-explain"></div>
  </div>

  <div class="fm-item">
	   <label for="logonId" class="form-label">登陸密碼：</label>
	   <input type="password" value="" maxlength="100" id="password" class="i-text" datatype="*6-16" nullmsg="請設定密碼！" errormsg="密碼範圍在6~16位之間！">    
       <div class="ui-form-explain"></div>
  </div>

  <div class="fm-item pos-r">
	   <label for="logonId" class="form-label">驗證碼</label>
	   <input type="text" value="輸入驗證碼" maxlength="100" id="yzm" class="i-text yzm" nullmsg="請輸入驗證碼！" >    
       <div class="ui-form-explain"><img src="images/yzm.jpg" class="yzm-img" /></div>
  </div>

  <div class="fm-item">
	   <label for="logonId" class="form-label"></label>
	   <input type="submit" value="" tabindex="4" id="send-btn" class="btn-login"> 
       <div class="ui-form-explain"></div>
  </div>
  </form>
  </div>
</div>

	<div class="bd">
		<ul>
			<li style="background:url(themes/theme-pic11.jpg) #CCE1F3 center 0 no-repeat;"><a target="_blank" href="http://www.jq22.com"></a></li>
			<li style="background:url(themes/theme-pic21.jpg) #BCE0FF center 0 no-repeat;"><a target="_blank" href="http://www.jq22.com"></a></li>
		</ul>
	</div>
	<div class="hd"><ul></ul></div>
</div>
<script type="text/javascript">jQuery(".banner").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"click" });</script>
<div class="banner-shadow"></div>
</body>
</html>

六. 圖片瀏覽器

就個人而言，我非常推崇同學們學習別人的程式碼進行重構，再製作屬於自己的作品，但需要註明出處。比如下面這是來自 HTML5 Tricks 網站的圖片檢視器。
官網地址：https://www.html5tricks.com/jquery-hor-thumb-slider.html
下載地址：https://download.csdn.net/download/eastmount/10801407

程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>帶縮圖水平切換的jQuery焦點圖外掛DEMO演示</title>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{background:url(img/bg.gif);}
a,img{border:none;}

.zx_slider{position:relative;margin:40px auto 0 auto;width:1002px;height:350px;overflow:hidden;border-radius:5px;}
.zx_slider .imgbox{width:3750px;height:310px;position:absolute;left:5px;top:4px;}
.zx_slider .imgbox img{float:left;width:750px;height:310px;}
.zx_slider .png{width:1002px;height:350px;left:0px;top:0px;position:absolute;background:url(img/slider_bg.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/slider_bg.png");}
.zx_slider .lbtn{cursor:pointer;width:45px;height:55px;position:absolute;left:0px;bottom:-3px;background:url(img/slider_l_btn.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/slider_l_btn.png");}
.zx_slider .rbtn{cursor:pointer;width:45px;height:55px;position:absolute;left:718px;bottom:-3px;background:url(img/slider_r_btn.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/slider_r_btn.png");}
.zx_slider .btnbox{width:750px;height:60px;position:absolute;left:30px;bottom:0px;}
.zx_slider .btnbox a{cursor:pointer;display:inline-block;float:left;width:126px;height:54px;margin:0 0 0 10px;}
.zx_slider .btnbox a img{position:relative;display:inline;width:120px;height:48px;float:left;border:3px solid #392101;border-radius:2px;}
.zx_slider .btnbox a .img_hover{border:3px solid #e4471f;border-radius:2px;}
.zx_slider .slider_p{overflow:hidden;width:220px;height:290px;position:absolute;right:15px;top:15px;}
.zx_slider .slider_p h3{margin:20px 0 10px 0;font-size:20px;text-align:center;color:#faa629;}
.zx_slider .slider_p p{line-height:26px;font-size:14px;color:#faa629;}
.hi_btn{width:740px;height:330px;position:absolute;left:0px;top:0px;display:block;}
</style>

</head>

<body>

<div class="zx_slider">

    <div class="imgbox">
        <img alt="Danx" src="img/danx1.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx2.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx3.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx4.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx5.jpg" width="750" height="310" />
    </div>
	
    <div class="png"></div>
	
    <a href="#" id="hi_btn0" class="hi_btn"></a>
    <a href="#" id="hi_btn1" class="hi_btn"></a>
    <a href="#" id="hi_btn2" class="hi_btn"></a>
    <a href="#" id="hi_btn3" class="hi_btn"></a>
    <a href="#" id="hi_btn4" class="hi_btn"></a>
	
    <div class="btnbox">
        <a onmouseover="btn_m_over(0)"><img alt="Danx" id="btn_img0" class="thumb img_hover" src="img/danx1.jpg" /></a>
        <a onmouseover="btn_m_over(1)"><img alt="Danx" id="btn_img1" class="thumb" src="img/danx2.jpg" /></a>
        <a onmouseover="btn_m_over(2)"><img alt="Danx" id="btn_img2" class="thumb" src="img/danx3.jpg" /></a>
        <a onmouseover="btn_m_over(3)"><img alt="Danx" id="btn_img3" class="thumb" src="img/danx4.jpg" /></a>
        <a onmouseover="btn_m_over(4)"><img alt="Danx" id="btn_img4" class="thumb" src="img/danx5.jpg" /></a>
    </div>
	
    <div class="lbtn"></div>
    <div class="rbtn"></div>
	
    <div class="slider_p">
	
        <div id="slider_p0" class="slider_p_div">
			<h3>標題1</h3>
			<p>百度（Nasdaq簡稱：BIDU）是全球最大的中文搜尋引擎，2000年1月由李彥巨集、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的資訊獲取方式。“百度”二字源於中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾裡尋他千百度”，象徵著百度對中文資訊檢索技術的執著追求。</p>
        </div>
		
        <div id="slider_p1" class="slider_p_div">
			<h3>標題2</h3>
			<p>2000年1月由李彥巨集、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的資訊獲取方式。“百度”二字源於中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾裡尋他千百度”，象徵著百度對中文資訊檢索技術的執著追求。</p>
        </div>
		
        <div id="slider_p2" class="slider_p_div">
			<h3>標題3</h3>
			<p>致力於向人們提供“簡單，可依賴”的資訊獲取方式。“百度”二字源於中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾裡尋他千百度”，象徵著百度對中文資訊檢索技術的</p>
        </div>
		
        <div id="slider_p3" class="slider_p_div">
			<h3>標題4</h3>
			<p>您到卡上黑暗聖經卡薩丁</p>
        </div>
		
        <div id="slider_p4" class="slider_p_div">
			<h3>標題5</h3>
			<p>打考勤卡和飯來欺騙卡號發</p>
        </div>
		
    </div>
	
</div><!--zx_slider end-->


<script type="text/javascript">
var slider_count=4;
$(".slider_p_div").hide();
$("#slider_p0").show();
$(".hi_btn").hide();
$("#hi_btn0").show();
$(".img_hover").animate({bottom:'10px'});
var slider_i=1;
var m_over=true;

function zx_slider(){
	if(m_over){
		if(slider_i<0){slider_i=slider_count;}
		//p
		$(".slider_p_div").hide();
		$("#slider_p"+slider_i).show();
		//p end
		//hi_btn
		$(".hi_btn").hide();
		$("#hi_btn"+slider_i).show();
		//hi_btn end
		//btn
		$(".btnbox img").stop(true,true);
		$(".btnbox img").removeClass("img_hover");
		$(".btnbox img").animate({bottom:'0px'},200);
		$("#btn_img"+slider_i).addClass("img_hover");
		$("#btn_img"+slider_i).animate({bottom:'10px'},200);
		//btn end
		$(".imgbox").stop();
		$(".imgbox").animate({left:'-750'*slider_i+'px'});
		if(slider_i<slider_count){
			slider_i++;	
		}else{
			slider_i=0;
		}
	}
}

$(".lbtn").click(function(){
	m_over=true;
	if(slider_i==0){slider_i=slider_count-1}else{slider_i=slider_i-2;}
	zx_slider();
	m_over=false;
});

$(".rbtn").click(function(){
	m_over=true;
	zx_slider();
	m_over=false;
});

function btn_m_over(btn_i){
	if(slider_i-1!=btn_i){
		m_over=true;
		slider_i=btn_i;
		zx_slider();
		m_over=false;
	}
}

zx_timer=setInterval("zx_slider();",5000); 
$(".zx_slider").mouseover(function(){
	m_over=false;
});
$(".zx_slider").mouseout(function(){
	m_over=true;
});
</script>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>

希望文章對大家有所幫助，如果有錯誤或不足之處，還請原諒。浮躁了兩天，又開始迴歸正規，致深夜程式設計奮鬥的青春少年，一起加油。分享一首喜歡的詩:
一生百年凡塵苦，
風華燃盡指尖輸。
人間歲月盡虛度，
崎嶇坎坷走迷途。
梅傲寒霜香如故，
旭日依舊東方出。
回首前世無為路，
三十餘載形神孤。
晚安，娜璋同在同樂[小狗]

程式碼下載地址：https://download.csdn.net/download/eastmount/10801407
（By：Eastmount 2018-11-22 下午5點 https://blog.csdn.net/Eastmount/）

原生JS實現類似《掘金》網站的圖片檢視器
2018-05-15
JS網站
實現簡單的輪播圖（單張圖片、多張圖片）
2020-02-11
使用 PyQt5 實現圖片檢視器
2020-04-20
QT
基於Python PIL實現簡單圖片格式轉化器
2020-12-18
Python
原生js實現圖片瀑布流佈局，註釋超詳細
2020-06-08
JS
[譯] 使用 CSS 網格佈局實現響應式圖片
2019-03-31
CSS
CSS 來佈局圖片
2020-01-02
CSS
SpringBoot之網站的登陸註冊邏輯
2021-10-12
Spring Boot網站
php 實現一個簡單的圖片邊緣檢測
2021-06-11
PHP
Photo Mechanic Plus 圖片檢視器
2022-04-12
UIbutton 上下圖片文字佈局
2018-07-05
UI
【圖片版】學習CSS網格佈局
2021-09-09
CSS
視覺化學習：實現Canvas圖片區域性放大鏡
2024-03-28
視覺化Canvas
圖形影像處理之簡單圖片
2020-05-02
iOS 中使用 FlexBox 佈局實現圖片九宮格
2019-05-13
iOSFlex
修改網站裡面的圖片，網站圖片更新教程
2024-11-16
網站
php實現pdf轉圖片
2022-06-07
PHP
php實現圖片旋轉
2022-06-13
PHP
FFmpeg程式碼實現視訊轉jpg圖片
2018-12-14
【圖片版】CSS網格佈局（Grid）完全教程
2019-03-01
CSS
jquery實現的讓圖片在網頁的可視區域裡四處漂浮的效果
2018-06-05
jQuery網頁
使用jpeg圖片庫，顯示圖片並簡單實現LCD的觸屏功能
2024-05-14
簡單實現登陸註冊gui介面以及打包成exe檔案
2021-10-14
GUI
win10沒有圖片檢視器怎麼辦 win10找回圖片檢視器的方法
2022-04-12
Win10
002.09 簡單 PNG 圖片編輯器
2020-01-04
Python實現簡單網頁圖片抓取完整程式碼例項
2020-05-27
Python網頁
cdr怎麼檢視圖片縮圖win10_cdr如何檢視圖片縮圖win10
2020-03-12
Win10
python批量ppt轉圖片，pdf轉圖片，word轉圖片指令碼
2021-11-29
Python指令碼
React Native 圖片檢視元件
2019-03-01
React Native元件
windows10圖片檢視器無法開啟圖片怎麼解決
2021-06-16
Windows
NodeJs 建立一個簡單的登陸註冊
2019-02-16
NodeJS
網站後臺修改圖片新聞？公司網站圖片怎麼修改？
2024-10-16
網站
php怎麼實現登陸後跳轉網頁
2021-09-11
PHP網頁
windows10圖片檢視器怎麼開啟照片_win10圖片檢視器開啟照片的方法
2019-12-02
WindowsWin10
windows10圖片檢視器被刪了怎麼辦_windows10圖片檢視器找不到如何找回
2020-07-17
Windows
Mac圖片區域性擦除工具
2020-10-15
Mac
圖片區域點選處理
2024-10-27
Android 載入網路圖片以及實現圓角圖片效果
2020-12-05
Android