效果图：
首页（页面1）：
页面2：
页面3：
海洋保护主题网站设计与实现摘要：
本文介绍了我设计的海洋保护主题网站，该网站旨在提高公众对海洋保护的意识。通过简洁的界面设计和直观的用户体验，网站有效地传达了海洋保护的重要性，并提供了相关的保护行动信息。正文：海洋保护是全球性的议题，它不仅关系到地球生态的平衡，也直接影响到人类的生存环境。为此，我设计了一个海洋保护主题的网站，通过视觉和内容的结合，向公众传达保护海洋的紧迫性。网站结构清晰，包含首页、海洋保护习俗、海洋保护行动等多个栏目。首页通过轮播图展示海洋的美丽和当前面临的威胁，而海洋保护习俗和行动栏目则提供了具体的保护措施和行动指南。在技术实现上，网站采用了HTML、CSS和jQuery，实现了响应式布局，确保在不同设备上都能提供良好的浏览体验。特色功能如轮播图和下拉菜单，增强了用户的互动性和网站的易用性。
首页代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-3.6.0.js"></script>
<title>海洋保护</title>
</head>
<body>
<ul class="top1 auto clearfix">
<li><a href="./index.html">首页</a></li>
<li class="oli">
<a href="./list2.html">海洋保护习俗</a>
<ul class="cul">
<li><a href="">海滩清洁</a></li>
<li><a href="">海洋生物保护</a></li>
</ul>
</li>
<li><a href="./list3.html">海洋保护行动</a></li>
<li><a href="">海洋保护意识</a></li>
</ul>
<div class="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="./images/1.jpg">
</div>
<div class="item">
<img src="./images/11.jpg">
</div>
<div class="item">
<img src="./images/12.jpg">
</div>
<div class="item">
<img src="./images/13.jpg">
</div>
<div class="item">
<img src="./images/14.jpg">
</div>
</div>
<ul class="carousel-sort">
<li class="item active"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<div class="carousel-left"></div>
<div class="carousel-right"></div>
</div>
<div class="main1 auto clearfix">
<div class="main1-l">
<h1>
海洋保护的重要性
</h1>
<h4>海洋保护</h4>
<div class="con1">
<img src="./images/2.jpg" alt="">
<p>
海洋是地球上最大的生态系统，覆盖了地球表面的71%，对全球气候、生物多样性和人类生活有着至关重要的影响。海洋保护是指通过各种措施保护海洋环境，防止海洋污染，保护海洋生物多样性，维护海洋生态平衡。海洋保护的内容包括减少塑料垃圾、保护珊瑚礁、禁止过度捕捞等。……
</p>
</div>
</div>
<div class="main1-r">
<h3>海洋保护简介</h3>
<p>
海洋保护是一个全球性的问题，涉及到环境保护、经济发展和社会进步等多个方面。海洋保护的目的是保护和恢复海洋生态系统的健康，确保海洋资源的可持续利用。海洋保护行动包括提高公众意识、制定和执行相关法律法规、开展科学研究和监测、以及推动国际合作等。……
</p>
<ul>
<li>→海洋保护</li>
<li>→海洋生物保护</li>
<li>→海滩清洁</li>
<li>→海洋污染治理</li>
<li>→全球海洋保护行动</li>
</ul>
</div>
</div>
<div class="footer auto">
Copyright © 2022 海洋保护 版权所有
</div>
</body>
<script>
$(function () {
function carousel(stop_time) {
var $carousel = $('.carousel > .carousel-inner > .item');
var length = $carousel.length - 1;
var next = 0;
var prev = 0;
var $sort = $('.carousel > .carousel-sort > .item');
function current_active() {
for (var i = 0; i < $carousel.length; i++) {
if ($($carousel[i]).hasClass('active')) {
return i
}
}
}
function add_active(next) {
$($carousel[next]).addClass('active');
$($sort[next]).addClass('active');
}
function remove_active(prev) {
$($carousel[prev]).removeClass('active');
$($sort[prev]).removeClass('active');
}
function run_next(num) {
next += num;
if (next > length) {
next = 0;
}
return next
}
function run_prev(num) {
prev = next - num;
if (prev < 0) {
prev = length
}
return prev
}
function run_carousel() {
add_active(run_next(1));
remove_active(run_prev(1));
}
var interval = null;
function run_interval() {
interval = setInterval(run_carousel, stop_time)
}
function stop_interval() {
clearInterval(interval)
}
run_interval();
$($sort).click(function () {
stop_interval();
remove_active(current_active());
add_active($(this).index());
run_interval()
});
var mouse_tar = $($carousel).parent();
$(mouse_tar).mouseenter(function () {
stop_interval()
});
$(mouse_tar).mouseleave(function () {
run_interval()
});
$('.carousel-left').click(function () {
stop_interval();
remove_active(current_active());
var prev = run_prev(1);
add_active(prev);
next = prev;
run_interval()
});
$('.carousel-right').click(function () {
stop_interval();
remove_active(current_active());
add_active(run_next(1));
run_interval()
})
}
carousel(3000)
$(".oli").hover(function () {
$(this).children(".cul").slideToggle(50);
})
})
</script>
</html>
以下是实现轮播图功能的关键JavaScript代码片段：
<script>
$(function () {
function carousel(stop_time) {
var $carousel = $('.carousel > .carousel-inner > .item');
var length = $carousel.length - 1;
var next = 0;
var prev = 0;
var $sort = $('.carousel > .carousel-sort > .item');
function current_active() {
for (var i = 0; i < $carousel.length; i++) {
if ($($carousel[i]).hasClass('active')) {
return i
}
}
}
function add_active(next) {
$($carousel[next]).addClass('active');
$($sort[next]).addClass('active');
}
function remove_active(prev) {
$($carousel[prev]).removeClass('active');
$($sort[prev]).removeClass('active');
}
function run_next(num) {
next += num;
if (next > length) {
next = 0;
}
return next
}
function run_prev(num) {
prev = next - num;
if (prev < 0) {
prev = length
}
return prev
}
function run_carousel() {
add_active(run_next(1));
remove_active(run_prev(1));
}
var interval = null;
function run_interval() {
interval = setInterval(run_carousel, stop_time)
}
function stop_interval() {
clearInterval(interval)
}
run_interval();
$($sort).click(function () {
stop_interval();
remove_active(current_active());
add_active($(this).index());
run_interval()
});
var mouse_tar = $($carousel).parent();
$(mouse_tar).mouseenter(function () {
stop_interval()
});
$(mouse_tar).mouseleave(function () {
run_interval()
});
$('.carousel-left').click(function () {
stop_interval();
remove_active(current_active());
var prev = run_prev(1);
add_active(prev);
next = prev;
run_interval()
});
$('.carousel-right').click(function () {
stop_interval();
remove_active(current_active());
add_active(run_next(1));
run_interval()
})
}
carousel(3000)
$(".oli").hover(function () {
$(this).children(".cul").slideToggle(50);
})
})
</script>
