当前位置：首页 > news >正文

Web前端期末大作业-重庆旅游景区网页设计（HTML+CSS+JS）

news 来源：原创 2024/5/10 22:53:38

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

前端javascripthtmlcssweb

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保

网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

E85JP 重庆旅游7页带js 带轮播

🧩 2.图片演示

![在这里插入图片描述](https://img-blog.csdnimg.cn/60fc827d19f746ad9b8ddf06992fc931.png#pic_c
web前端
html5期末大作业
HTML静态网页作业
enter)

四、💒 网站代码

🧱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>
        <!-- 图片区域 -->
        <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>
          美食　 景点 特产 民族 <span class="yq">友情链接:<a href="http://www.cqta.gov.cn/" target="_blank">重庆市旅游政务网</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 />
                创办于1929年 <br />
                学校占地面积5212亩
              </p>
            </li>
            <li>
              <a href="#"><img src="images/cp_2.jpg" /></a>
              <p>
                重庆医科大学 <br />
                创建于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 />
                创办于1950年3月 <br />
                开设有53个本科专业
              </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 />
                始创于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()
      // 转数字
      index = Number(index)
      // 越界超过最大数量,直接返回
      if (index >= links.length) {
        return
      }
      // 选中当前已选中的,直接返回
      if (current_index == index) {
        return
      }
      // 取消当前指示点的选中状态
      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)
      // 增加新的指示点的选中状态
      swipe_select.children[current_index].classList.add('checked')
    }
    // 自动切换图片
    let autoSelect = (index) => {
      // 转数字
      index = Number(index)
      // 越界超过最大数量，直接返回
      if (index >= links.length) {
        return
      }
      // 选中当前已选中的，直接返回
      if (current_index == index) {
        return
      }
      // 取消当前指示点的选中状态
      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
        // 增加新的指示点选中状态
        // 如果已经通过手动点击了，选中则此处不再执行
        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++) {
        // 创建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 = () => {
      // 左翻事件监听
      swipe_btn_left.addEventListener('click', () => {
        // 设置新的index
        let index = current_index - 1
        // 左翻越界，切到最后一张
        if (index < 0) {
          index = links.length - 1
        }
        // 加载新图片
        select(index)
        play()
      })
      // 右翻事件监听
      swipe_btn_right.addEventListener('click', () => {
        // 设置新的index
        let index = current_index + 1
        // 右翻越界，切到第一张
        if (index >= links.length) {
          index = 0
        }
        // 加载新图片
        select(index)
        play()
      })
      // 循环绑定指示器点击事件
      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)
          })
        }
      }
    }
    // 页面加载完毕，执行初始化
    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; }