1.功能介绍
(1)使用 HTML/CSS完成页面布局
(2)分别使用原生Js/jQuery/vue 完成轮播功能
2.评分标准
(1)页面布局
首页
1)水平垂直居中(10)
2)每个入口鼠标 hover动画(10)
功能页
整体布局(10)
3)右上方返回首页按钮(10)
4)外层框水平垂直居中(5)
5)名称垂直居中,左侧有一定边距,hover时显示箭头(5)
3.页面功能(50)
右侧方框轮播(20)
鼠标 hover 左侧名字停止轮播(10)
鼠标移开左侧名字继续轮播(10)
代码逻辑(10)
global.css文件我放在后面了
首页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
<SCript>
function gotoPage(url) {
window.location.href = url;
}
</SCript>
</head>
<body>
<div class="mock">
<button class="mock1" onclick="gotoPage('JS.html')"><span>原生JS</span></button>
<button class="mock2" onclick="gotoPage('JQuery.html')">JQuery</button>
<button class="mock3" onclick="gotoPage('Vue.html')">Vue</button >
</div>
</body>
<style>
.mock {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mock1,
.mock2,
.mock3 {
width: 100px;
height: 50px;
border-radius: 5px;
margin: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: all .5s;
}
.mock1 {
background-color: rgb(232, 199, 53);
}
.mock2 {
background-color: rgb(114, 159, 247);
}
.mock3 {
background-color: rgb(127, 193, 136);
}
.mock1:hover,.mock2:hover,.mock3:hover {
width: 105px;
height: 55px;
}
</style>
</html>
功能页
1.利用vue实现
<template>
<div class="box">
<div class="leftMenu">
<ul>
<li v-for="(item, index) in menuList" :key="index" @mouseenter="stopUpdate(index)" @mouseleave="updateContent()">{{ item.name }} </li>
</ul>
</div>
<div class="content">
<span>{{ currenContent.name }}</span>
<div class="footer"><span class="num" v-for="(item, index) in menuList" :key="index" @mouseenter="stopUpdate(index)" @mouseleave="updateContent()" :class="{'active':currentIndex===index}">{{ item.id }}</span></div>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
let timer:any;
let currentIndex=ref(0)
let spanColor=ref('blue')
const menuList = [
{ id: 1, name: 'sam' },
{ id: 2, name: 'monika' },
{ id: 3, name: 'lucy' },
{ id: 4, name: 'xx' },
]
let currenContent=ref(menuList[currentIndex.value])
const autoIndex=()=>{
currentIndex.value=(currentIndex.value + 1)%menuList.length
}
const updateContent=()=>{
timer=setInterval(()=>{
autoIndex()
currenContent.value=menuList[currentIndex.value]
},1000)
}
const stopUpdate=(index:number)=>{
//调用 clearInterval 停止轮播
clearInterval(timer);
currentIndex.value=index
currenContent.value=menuList[currentIndex.value]
}
const changbk=()=>{
}
updateContent()
</script>
</style>
2.利用js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS</title>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="app">
<h1 style="font-size: 20px;">原生 JS 实现方法</h1>
<div class="slideShow">
<div class="asideMenu">
<ul type="none" id="menuList">
<li>Sam<span class="arrow">></span></li>
<li>Monika<span class="arrow">></span></li>
<li>Jack<span class="arrow">></span></li>
<li>Rose<span class="arrow">></span></li>
</ul>
</div>
<div class="content">
<span id="slideshowName"></span>
</div>
</div>
<button class="back" onclick="toHome()">
<span class="leftA"><</span><span class="msg">返回首页</span>
</button>
</div>
</body>
<script>
let currentIndex=0;
let timer
const arrows = document.querySelectorAll('.arrow');
const menuItems=document.getElementsByTagName('li');
const slideshowNameElement=document.getElementById('slideshowName')
arrows.forEach(arrow => arrow.style.display = 'none');
function renderMenuList(){
for(let i=0;i<menuItems.length;i++){
menuItems[i].addEventListener('mouseenter',function(){
stopslideshow(i)
arrows[i].style.display = 'inline';
})
menuItems[i].addEventListener('mouseleave',function(){
beginSlideShow()
arrows[i].style.display = 'none';
})
}
}
function updateIndex(){
currentIndex=(currentIndex+1)%menuItems.length
}
function beginSlideShow(){
timer=setInterval(() => {
updateIndex()
slideshowNameElement.innerHTML=menuItems[currentIndex].innerHTML
}, 1000);
}
function stopslideshow(index){
clearInterval(timer)
currentIndex=index
slideshowNameElement.innerHTML=menuItems[currentIndex].innerHTML
}
renderMenuList()
beginSlideShow()
</script>
<style>
.arrow {
display: none;
}
</style>
</html>
//global.css
* {
padding: 0px;
margin: 0px;
border: none;
}
.back {
color: white;
background-color: rgb(127, 193, 136);
border-radius: 10px 0px 0px 10px;
height: 30px;
overflow: hidden;
display: flex;
align-items: center;
position: fixed;
right: 0px;
top: 50px;
}
.leftA {
margin: 0px 10px;
}
.msg {
display: none;
}
.back:hover {
width: 100px;
}
.back:hover .msg {
display: block;
}
.slideShow,
.asideMenu,
.content {
border: 1px solid rgb(157, 155, 155);
}
.asideMenu,
.content {
margin: 30px;
}
.slideShow {
width: 800px;
height: 500px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.asideMenu {
width: 200px;
height: 400px;
position: relative;
}
.asideMenu ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
.asideMenu li {
display: block;
height: 30px;
width: 200px;
margin: 40px 0px;
position: relative;
transition: all 0.3s;
}
.asideMenu li>span {
position: absolute;
left: 100px
}
.asideMenu li:hover {
font-size: 20px;
font-weight: bold;
}
.asideMenu li::after {
content: "";
height: 1px;
width: 125px;
background-color: #8b8987;
display: block;
position: absolute;
bottom: -15px;
}
.content {
width: 500px;
height: 400px;
position: relative;
}
.content span {
font-size: 100px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}