🌩️ 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👇🏻👇🏻👇🏻