<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link href="css/homepage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 头部 -->
<div class="top">
<div>
<a>
<img src="./images/logo.png">
</a>
</div>
<div>
<a class="phone">
<span><img src="./images/icon1.png"></span>电话：400 1111 0000 <span><img src="./images/icon3.png"></span>邮箱：MIU CAFE@126.com
</a>
</div>
<div>
<a>
<p class="yishuzi">欢迎来到MIU</p>
</a>
</div>
</div>
<div class="videobox">
<nav>
<ul>
<li class="left">
<a class="one" href="#">
<img src="images/sanxian.png" alt="">
<span>MIU家的宝藏</span>
<img src="images/sanjiao.png" alt="">
</a>
<aside>
<span></span>
<ol class="zuo">
<li class="con">奶茶</li>
<li>>芋泥啵啵</li>
<li>>多肉葡萄</li>
<li>>芋圆锡兰红茶</li>
<li>>麻薯椰椰</li>
<li class="con">咖啡</li>
<li>>拿铁</li>
<li>>摩卡</li>
<li>>卡布奇诺</li>
<li>>玛奇朵</li>
<li class="con">冰淇淋</li>
<li>>抹茶红豆</li>
<li>>千层抹茶</li>
<li>>闪电泡芙</li>
<li>>哈根达斯</li>
</ol>
<ol class="you">
<li class="con">DYL专区</li>
<li>>葡萄酸奶蜜</li>
<li>>西瓜啵啵</li>
<li>>雪顶多肉葡萄</li>
<li>>柠檬红茶</li>
<li>>一杯百香果</li>
<li>>多肉西柚</li>
<li>>千层蛋糕</li>
<li class="con">热门搜索</li>
<li>>玛奇朵</li>
<li>>天空之城</li>
<li>>白日梦</li>
<li>>女神蛋糕</li>
</ol>
</aside>
</li>
<li class="center">
<form>
<input type="text" value="请输入商品名称">
</form>
</li>
</ul>
</nav>
</div>
<h1>来挑选一杯想要的奶茶趴</h1>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<a href="#" target="_blank"><img alt="啊呜找不到了" title="奶茶" src="./images/奶茶7.png"></a>
</li>
<li class="slider-panel">
<a href="#" target="_blank"><img alt="啊呜找不到了" title="奶茶" src="./images/奶茶5.png"></a>
</li>
<li class="slider-panel">
<a href="#" target="_blank"><img alt="啊呜找不到了" title="奶茶" src="./images/奶茶3.jfif"></a>
</li>
<li class="slider-panel">
<a href="#" target="_blank"><img alt="啊呜找不到了" title="奶茶" src="./images/奶茶6.jpg"></a>
</li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:;;"><</a>
<a class="slider-next" href="javascript:;;">></a>
</div>
</div>
</div>
<embed src="./music/mmexport1623914211016.mp3" hidden="true" ></embed>
</body>
</html>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
</script>
web网页设计课程结课作业
需积分: 48 34 浏览量
2021-07-19
10:39:20
上传
评论 10
收藏 14.36MB 7Z 举报
马嘉腾 19300137.7z （48个子文件） 
马嘉腾 19300137 
《网页设计》结课论文.doc 5.64MB 网页设计结课 
index.html 2KB homepage.html 7KB 字体 
bb1519.TTF 2.72MB images 
奶茶7.png 462KB
pinkcloud.jpg 187KB 奶茶6.jfif 251KB shizhuang.jpg 49KB jia.png 2KB bg.png 1KB home.jpg 753KB green.jpg 376KB area.jpg 737KB icon3.png 2KB 奶茶5.png 1.19MB icon1.png 2KB 奶茶6.jpg 44KB 奶茶2.jfif 113KB 奶茶1.png 353KB runrise.jpg 219KB sanjiao.png 3KB 奶茶4.jfif 291KB
icon6.gif 52B music.png 2KB search.png 3KB 11.png 4KB 奶茶3.png 236KB 奶茶1.jfif 142KB 奶茶3.jfif 88KB sanxian.png 3KB icon2.png 2KB logo.png 17KB land.png 2KB liebiao.png 3KB 奶茶2.png 199KB 奶茶5.jfif 119KB scripts jquery.min.js 85KB area.html 5KB music mmexport1623914211016.mp3 13KB mmexport1623914455144.mp3 26KB 1582356405071-MusMus-BGM-007.mp3 1.74MB login.html 988B aboutmiu.html 3KB css area.css 851B aboutmiu.css 1KB login.css 2KB homepage.css 4KB style.css 2KB
评论0