🌩️ Wonderful column recommendation👇🏻👇🏻👇🏻
💂 Author homepage: [Enter the homepage—🚀Get more source code]
🎓 web front-end final homework: [📚HTML5 webpage final assignment (1000 sets) ]
🧡 Interesting confessions for programmers: [💌HTML Tanabata Valentine's Day Confession Web Page Production (110 Sets) ]
2. 📚 website introduction
📔 Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has a stable display effect.
📓Website programming: It is planned to use the latest web programming language HTML5+CSS3+JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market, and the effect of seeing the website immediately after opening it has been achieved.
📘Website materials: We plan to collect good-looking picture materials from various platforms, and carefully select pictures that are suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.
📒Website files: The types of website system files include: html web page structure file, css web page style file, js web page special effect file, images web page picture file;
📙Web page editing: The code of web works is simple, and you can use any HTML editing software (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other html editing software to run, modify, edit, etc.).
in:
(1) The 📜html file contains: index.html is the home page, and other html are secondary pages;
(2) 📑 css files include: css all page styles, text scrolling, image enlargement, etc.;
(3) 📄 js files include: js implements dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
3. 🔗 website effect
▶️1. Video demonstration
E85JP Chongqing Tourism 7 pages with js and carousel
🧩 2. Picture demo
4. 💒 website code
🧱HTML structure code
<!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>Chongqing Tourism</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"> <!-- carousel body --> <div class="swipe" id="swipe"> <!-- blurred background --> <div class="bg" id="swipe_bg"></div> <!-- picture area --> <section> <!-- picture display --> <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> <!-- Indication point --> <div class="select" id="swipe_select"></div> <!-- Left page button --> <div class="btn left" id="swipe_btn_left"> <!-- Font Icon: Left Arrow --> <i class="iconfont icon-zuojiantou" aria-hidden="true"></i> </div> <!-- right page button --> <div class="btn right" id="swipe_btn_right"> <!-- Font Icon: Right Arrow --> <i class="iconfont icon-youjiantou" aria-hidden="true"></i> </div> </section> </div> <div class="nav"> <ul> <li><a href="index.html">front page</a></li> <li><a href="index_1.html">Food</a></li> <li><a href="index_2.html">Attractions</a></li> <li><a href="index_3.html">hotel</a></li> <li><a href="index_1.1.html">Raiders</a></li> </ul> </div> <div class="tuce"> <h1>chongqing</h1> <h2> Food attractions specialty ethnic <span class="yq">Links:<a href="http://www.cqta.gov.cn/" target="_blank">Chongqing Tourism Administration Network</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>colleges</h3> <ul> <li> <a href="#"><img src="images/cp_1.jpg" /></a> <p> Chongqing University<br /> Founded in 1929 <br /> The school covers an area of 5212 acres </p> </li> <li> <a href="#"><img src="images/cp_2.jpg" /></a> <p> Chongqing Medical University <br /> Created in 1956 <br /> "211"colleges </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> Chongqing University of Posts and Telecommunications <br /> Founded in March 1950 <br /> 53 undergraduate majors are offered </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> Chongqing Technology and Business University <br /> Founded in 1952 <br /> It is one of the universities selected for the "Small 211 Project" </p> </li> </ul> </div> </div> <div class="footer"> <p>Chongqing Tourism</p> </div> </div> </body> <script> // Current carousel number let current_index = -1 // Automatic carousel timer let swipe_timer = null // The image address and jump link of the carousel let links = [ { image: 'images/banner.jpg', target: '#1' }, { image: 'images/d2.jpg', target: '#2' }, { image: 'images/s.jpg', target: '#3' } ] // element to be manipulated 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') // event // switch pictures let select = (index) => { // Stop play stop() // turn digital index = Number(index) // Out of bounds exceeds the maximum number, return directly if (index >= links.length) { return } // Select the currently selected, return directly if (current_index == index) { return } // Cancel the selection of the current cue point if (current_index > -1) { swipe_select.children[current_index].classList.remove('checked') } // Change the number of the current carousel current_index = index // find the current element let current_link = links[current_index] // background change swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')' // Outlook changes swipe_img.setAttribute('src', current_link.image) // link change swipe_link.setAttribute('href', current_link.target) // Add the selected state of a new indicator point swipe_select.children[current_index].classList.add('checked') } // Automatically switch pictures let autoSelect = (index) => { // turn digital index = Number(index) // Out of bounds exceeds the maximum number, return directly if (index >= links.length) { return } // Select the currently selected, return directly if (current_index == index) { return } // Cancel the selection of the current cue point swipe_select.children[current_index].classList.remove('checked') // Change the number of the current carousel current_index = index // find the current element let current_link = links[current_index] // Foreground picture // The first step is to adjust the transition time swipe_img.style.transition = 'opacity 0.5s ease-in 0s' // The second step is to adjust the opacity to 0.2 swipe_img.style.opacity = 0.2 // The third step delays the transformation of the img image, and redefines the transparency, transition time and transition method setTimeout(() => { // background change swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')' // Outlook changes swipe_img.setAttribute('src', current_link.image) // link change swipe_link.setAttribute('href', current_link.target) // Opacity change swipe_img.style.transition = 'opacity 0.7s ease-out 0s' swipe_img.style.opacity = 1 // Add a new indicator point selected state // If it has been manually clicked, if it is selected, it will no longer be executed here. 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) } // play let play = () => { // Switch every 3 seconds swipe_timer = setInterval(() => { // set new index let index = current_index + 1 // Flip right out of bounds and cut to the first frame if (index >= links.length) { index = 0 } // Load a new image (select automatic here to increase the switching effect) autoSelect(index) }, 3000) } // stop let stop = () => { if (swipe_timer) { clearInterval(swipe_timer) swipe_timer = null } } // initialization let init = () => { for (let i = 0; i < links.length; i++) { // create a element let item = document.createElement('a') // Modify properties item.setAttribute('class', 'item') item.setAttribute('href', '#') item.setAttribute('data-index', i) // append element swipe_select.appendChild(item) } // Default first select(0) // Bind each event and start the rotation bind() play() } // bind let bind = () => { // Left flip event listener swipe_btn_left.addEventListener('click', () => { // set new index let index = current_index - 1 // Flip left and cross the border, cut to the last one if (index < 0) { index = links.length - 1 } // load new image select(index) play() }) // Right flip event listener swipe_btn_right.addEventListener('click', () => { // set new index let index = current_index + 1 // Flip right out of bounds and cut to the first frame if (index >= links.length) { index = 0 } // load new image select(index) play() }) // Loop binding indicator click event for (const key in swipe_select.children) { if (swipe_select.children.hasOwnProperty(key)) { const element = swipe_select.children[key] element.addEventListener('click', (e) => { // Cancel the default click to jump e.preventDefault() // Jump to the picture specified by data-index in the current pointer select(e.target.dataset.index) }) } } } // After the page is loaded, perform initialization window.addEventListener('load', () => { init() }) </script> </html>
🏠CSS style code
@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: "Microsoft Yahei";font-size: 14px;color:#000000;line-height: 20px;text-align:left; background:url(../images/bej.jpg);} td,th {font-family: "Microsoft Yahei";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:"Microsoft Yahei"; 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:"Microsoft Yahei"; line-height:80px;} .ao { margin-right:30px; line-height:40px; }
5. 🎁More source code
1. If my blog is helpful to you, please "👍Like" "✍️Comment" "💙Favorite" one click and three links!
2. 💗[👇🏻👇🏻👇🏻🉑Follow me | Get more source code] Take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, and website templates, college graduate HTML templates, etc.!
📣Technical issues related to the above content💌Welcome to exchange and learn together👇🏻👇🏻👇🏻