一、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網(wǎng)站并將其轉換為代碼的過程來實踐設計。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239926
(title-E85JP 重慶旅游7頁 帶js 帶輪播)]
?? 截圖演示
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三、?? 作品代碼
??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>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/swiper.css" />
<link rel="stylesheet" href="css/font/iconfont.css" />
</head>
<body>
<div id="page">
<!-- 輪播圖主體 -->
<div class="swipe" id="swipe">
<!-- 模糊背景 -->
<div class="bg" id="swipe_bg"></div>
<!-- 圖片區(qū)域 -->
<section>
<!-- 圖片顯示 -->
<div class="img-box" id="swipe_img_box">
<a href="#" class="link" id="swipe_link">
<img src="images/banner.jpg" alt="" class="img" id="swipe_img" />
</a>
</div>
<!-- 指示點 -->
<div class="select" id="swipe_select"></div>
<!-- 左側翻頁按鈕 -->
<div class="btn left" id="swipe_btn_left">
<!-- 字體圖標：左箭頭 -->
<i class="iconfont icon-zuojiantou" aria-hidden="true"></i>
</div>
<!-- 右側翻頁按鈕 -->
<div class="btn right" id="swipe_btn_right">
<!-- 字體圖標：右箭頭 -->
<i class="iconfont icon-youjiantou" aria-hidden="true"></i>
</div>
</section>
</div>
<div class="nav">
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="index_1.html">美食</a></li>
<li><a href="index_2.html">景點</a></li>
<li><a href="index_3.html">酒店</a></li>
<li><a href="index_1.1.html">攻略</a></li>
</ul>
</div>
<div class="tuce">
<h1>重慶</h1>
<h2>
美食 景點 特產(chǎn) 民族 <span class="yq">友情鏈接:<a target="_blank">重慶市旅游政務網(wǎng)</a></span>
</h2>
<div class="left_in"><img src="images/d1.png" width="410" /><img src="images/d2.jpg" width="410" height="310" /></div>
<div class="right_in">
<h3>院校</h3>
<ul>
<li>
<a href="#"><img src="images/cp_1.jpg" /></a>
<p>
重慶大學<br />
創(chuàng)辦于1929年 <br />
學校占地面積5212畝
</p>
</li>
<li>
<a href="#"><img src="images/cp_2.jpg" /></a>
<p>
重慶醫(yī)科大學 <br />
創(chuàng)建于1956年 <br />
“211”院校
</p>
</li>
<li>
<img src="images/cp_3.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="65,134,124,75,178,52,222,130,136,192,53,181" href="#" />
</map>
<p>
重慶郵電大學 <br />
創(chuàng)辦于1950年3月 <br />
開設有53個本科專業(yè)
</p>
</li>
<li>
<img src="images/cp_4.jpg" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="circle" coords="159,148,96" href="#" /></map>
<p>
重慶工商大學 <br />
始創(chuàng)于1952年 <br />
是入選“小211工程“的高校之一
</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<p>重慶旅游</p>
</div>
</div>
</body>
<script>
// 當前輪播圖編號
let current_index = -1
// 自動輪播定時器
let swipe_timer = null
// 輪播圖的圖片地址與跳轉鏈接
let links = [
{ image: 'images/banner.jpg', target: '#1' },
{ image: 'images/d2.jpg', target: '#2' },
{ image: 'images/s.jpg', target: '#3' }
]
// 需要操作到的元素
let swipe = document.getElementById('swipe')
let swipe_bg = document.getElementById('swipe_bg')
let swipe_img_box = document.getElementById('swipe_img_box')
let swipe_link = document.getElementById('swipe_link')
let swipe_img = document.getElementById('swipe_img')
let swipe_select = document.getElementById('swipe_select')
let swipe_btn_left = document.getElementById('swipe_btn_left')
let swipe_btn_right = document.getElementById('swipe_btn_right')
// 事件
// 切換圖片
let select = (index) => {
// 停止播放
stop()
// 轉數(shù)字
index = Number(index)
// 越界超過最大數(shù)量,直接返回
if (index >= links.length) {
return
}
// 選中當前已選中的,直接返回
if (current_index == index) {
return
}
// 取消當前指示點的選中狀態(tài)
if (current_index > -1) {
swipe_select.children[current_index].classList.remove('checked')
}
// 變更當前輪播圖的編號
current_index = index
// 找到當前元素
let current_link = links[current_index]
// 背景變化
swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')'
// 前景變化
swipe_img.setAttribute('src', current_link.image)
// 鏈接變化
swipe_link.setAttribute('href', current_link.target)
// 增加新的指示點的選中狀態(tài)
swipe_select.children[current_index].classList.add('checked')
}
// 自動切換圖片
let autoSelect = (index) => {
// 轉數(shù)字
index = Number(index)
// 越界超過最大數(shù)量，直接返回
if (index >= links.length) {
return
}
// 選中當前已選中的，直接返回
if (current_index == index) {
return
}
// 取消當前指示點的選中狀態(tài)
swipe_select.children[current_index].classList.remove('checked')
// 變更當前輪播圖的編號
current_index = index
// 找到當前元素
let current_link = links[current_index]
// 前景圖片
// 第一步調整過渡時間
swipe_img.style.transition = 'opacity 0.5s ease-in 0s'
// 第二步調整不透明度為0.2
swipe_img.style.opacity = 0.2
// 第三步延遲變換img圖片，并重新定義透明度以及過渡時間和過渡方式
setTimeout(() => {
// 背景變化
swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')'
// 前景變化
swipe_img.setAttribute('src', current_link.image)
// 鏈接變化
swipe_link.setAttribute('href', current_link.target)
// 不透明度變化
swipe_img.style.transition = 'opacity 0.7s ease-out 0s'
swipe_img.style.opacity = 1
// 增加新的指示點選中狀態(tài)
// 如果已經(jīng)通過手動點擊了，選中則此處不再執(zhí)行
if (!document.querySelector('.swipe .checked')) {
swipe_select.children[current_index].style.transition = 'background-color 0.5s'
swipe_select.children[current_index].classList.add('checked')
}
}, 500)
}
// 播放
let play = () => {
// 3秒切換一次
swipe_timer = setInterval(() => {
// 設置新的index
let index = current_index + 1
// 右翻越界，切到第一張
if (index >= links.length) {
index = 0
}
// 加載新圖片（這里選擇自動，增加切換效果）
autoSelect(index)
}, 3000)
}
// 停止
let stop = () => {
if (swipe_timer) {
clearInterval(swipe_timer)
swipe_timer = null
}
}
// 初始化
let init = () => {
for (let i = 0; i < links.length; i++) {
// 創(chuàng)建a元素
let item = document.createElement('a')
// 修改屬性
item.setAttribute('class', 'item')
item.setAttribute('href', '#')
item.setAttribute('data-index', i)
// 追加元素
swipe_select.appendChild(item)
}
// 默認第一張
select(0)
// 綁定各個事件并開始輪播
bind()
play()
}
// 綁定
let bind = () => {
// 左翻事件監(jiān)聽
swipe_btn_left.addEventListener('click', () => {
// 設置新的index
let index = current_index - 1
// 左翻越界，切到最后一張
if (index < 0) {
index = links.length - 1
}
// 加載新圖片
select(index)
play()
})
// 右翻事件監(jiān)聽
swipe_btn_right.addEventListener('click', () => {
// 設置新的index
let index = current_index + 1
// 右翻越界，切到第一張
if (index >= links.length) {
index = 0
}
// 加載新圖片
select(index)
play()
})
// 循環(huán)綁定指示器點擊事件
for (const key in swipe_select.children) {
if (swipe_select.children.hasOwnProperty(key)) {
const element = swipe_select.children[key]
element.addEventListener('click', (e) => {
// 取消默認點擊跳轉
e.preventDefault()
// 跳轉到當前指示點中data-index所指定的圖片
select(e.target.dataset.index)
})
}
}
}
// 頁面加載完畢，執(zhí)行初始化
window.addEventListener('load', () => {
init()
})
</script>
</html>
??CSS代碼
@charset "utf-8";
/* CSS Document */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body { font-family: "微軟雅黑";font-size: 14px;color:#000000;line-height: 20px;text-align:left; background:url(../images/bej.jpg);}
td,th {font-family: "微軟雅黑";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
ul,li{list-style-type:none;}
.clearit{clear:both;}
#page{width:980px; margin:0 auto; background: rgba(255,255,255, 0.5 )}
.nav{width:980px; height:40px; line-height:40px; text-align:center; background:#56b2e5;}
.nav ul li{width:120px; float:left; margin-left:40px; display:inline; font-size:14px;}
.nav ul li a{color:#FFFFFF; font-size: 16px}
.nav ul li A:hover {color:#2059a6}
.zuo{width:400px; float:left;}
.you{width:540px; float:right; font-size:14px; font-family:"微軟雅黑"; line-height:26px; padding:0 10px;}
.jieshao{width:960px; padding:10px; background:#FFFFFF;}
.tuce h2{font-size:14px; line-height:24px; color: #000; font-weight:bold; text-align:left; border-bottom:2px solid #CCC; margin-bottom:20px;}
.tuce{ width:960px; padding:0 10px; overflow:hidden;}
.tuce p{padding-top:5px; font-size:14px; line-height:30px;}
.left_in{ width:410px; float:left; overflow:hidden; margin-right:15px;}
.left_in img {margin-top:10px;}
.right_in{ width:530px; float:right}
.right_in ul li{ width:240px; margin:10px; background:#FFFFFF; float:left; }
.right_in ul li img{ width:240px; border-bottom:1px solid #CCC; }
.right_in ul li p{ padding:10px; color:#666;}
.footer{background:#56b2e5; margin-top:10px;}
.footer p{text-align:center;padding:20px 0; color:#FFFFFF;}
.xinxi{width:960px; padding:10px; background:#FFFFFF;}
.center_in{ width:980px; margin:0 auto;}
.center_in ul li{ width:220px; margin:10px; background:#FFFFFF; float:left; }
.center_in ul li img{ width:220px; border-bottom:1px solid #CCC; }
.center_in ul li p{ padding:10px; color:#666;}
.center_left{ width:500px; float:left;}
.center_right{ width:450px; float:right; line-height:30px;}
.yq{ float:right; color:#666}
h1{ font-family:"微軟雅黑"; line-height:80px;}
.ao { margin-right:30px; line-height:40px; }
四、??更多源碼
【干貨分享】自學編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎、計算機基礎到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術文章 + 資源分享）
