web前端项目-豆瓣电影【附源码】
web前端项目-豆瓣电影【附源码】
本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网，通过该网站的设计和制作过程，可以帮助网站开发人员和熟悉网站前台页面的制作流程，并在开发过程中熟练应用HTML；CSS；JavaScript 和 jQuery 技术
运行效果：
HTML源码：
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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Documenttitle>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
var screenAmount = $(".container ul li").length / 5;//计算屏幕数量
$(".container ul li:lt(5)").clone().appendTo(".container ul");//复制前5个元素
var nowScreen = 0; //屏幕号
$(".rightBtn").click(function(){
if(nowScreen < screenAmount - 1){
nowScreen ++ ;//屏幕号加1
$(".container").animate({"left" : -775 * nowScreen} , 800);//定义动画
}else{
nowScreen = 0;
$(".container").animate({"left" : -775 * screenAmount} , 800 , function(){
$(this).css("left",0);//元素回到初始位置
});
}
$(".hd .right span").html(nowScreen + 1 + "/" + screenAmount);//显示屏幕号
});
$(".leftBtn").click(function(){
if(nowScreen > 0){
nowScreen -- ;//屏幕号减1
$(".container").animate({"left" : -775 * nowScreen} , 800);//定义动画
}else{
nowScreen = screenAmount - 1;
$(".container").css("left" , -775 * screenAmount).animate({"left" : -775 * (screenAmount - 1)},800);//移动到复制的5个元素并执行动画
}
$(".hd .right span").html(nowScreen + 1 + "/" + screenAmount);//显示屏幕号
});
//每隔5秒钟自动触发元素的click事件
var timer = setInterval(function(){$(".rightBtn").trigger("click")}, 5000);
//鼠标进入元素停止移动
$(".is-on").mouseenter(function() {
clearInterval(timer);
});
//鼠标离开元素恢复移动
$(".is-on").mouseleave(function() {
timer = setInterval(function(){$(".rightBtn").trigger("click")}, 5000);
});
});
$(document).ready(function() {
var len = $(".banner").find("a");//获取广告图片
var pos = 0;//定义变量值为0
setInterval(function(){
len.eq(pos).hide();//隐藏元素
pos++;//变量值加1
if(pos == len.length) pos=0;//变量值重新定义为0
len.eq(pos).show();//显示元素
},3000);//每隔3秒钟切换元素
});
$(document).ready(function() {
$(".hot-film-main div").hide(); //隐藏热门电影和最新电影
$(".hot-film ul li a:first").addClass("active"); //为第一个标签添加样式
$(".hot-film-list").show(); //显示热门电影
$(".hot-film ul li a").click(function() { //鼠标单击某标签
//为当前的标签添加样式并移除另一标签样式
$(this).addClass("active").parent().siblings().find("a").removeClass("active");
var index = $(this).parent().index();//获取当前标签索引
$(".hot-film-main div").eq(index).show().siblings().hide();//控制热门电影和最新电影的显示或隐藏
});
});
script>
head>
<body>
<div id="nav">
<div class="nav-logo"><a href="index.html">仿豆瓣电影a>div>
<div class="nav-items">
<ul>
<li><a href="javascript:;">影讯 & 购票a>li>
<li><a href="javascript:;">选电影a>li>
<li><a href="javascript:;">电视剧a>li>
<li><a href="javascript:;">排行榜a>li>
<li><a href="javascript:;">分类a>li>
<li><a href="javascript:;">影评a>li>
<li><a href="javascript:;">2018年度榜单a>li>
ul>
div>
div>
<div id="main">
<div id="left">
<div class="is-on">
<div class="hd">
<h2>正在热映h2>
<div class="right">
<span>1/3span>
<a class="leftBtn" href="javascript:;">a>
<a class="rightBtn" href="javascript:;">a>
div>
div>
<div class="bd">
<div class="container">
<ul>
<li>
<a href="detail/mnyys.html"><img src="images/1.jpg" alt="" />a>
<p><a href="detail/mnyys.html">美女与野兽a>p>
<div class="rating">
<span class="starrating"><span class="star40">span>span>
<span class="score">7.2span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/thwj.html"><img src="images/2.jpg" alt="" />a>
<p><a href="detail/thwj.html">头号玩家a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">8.7span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" />a>
<p><a href="detail/fwhyj.html">飞屋环游记a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">8.9span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/mtyj.html"><img src="images/4.jpg" alt="" />a>
<p><a href="detail/mtyj.html">摩天营救a>p>
<div class="rating">
<span class="starrating"><span class="star35">span>span>
<span class="score">6.4span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" />a>
<p><a href="detail/yhhwd.html">银河护卫队a>p>
<div class="rating">
<span class="starrating"><span class="star40">span>span>
<span class="score">8.0span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/crzdy2.html"><img src="images/6.jpg" alt="" />a>
<p><a href="detail/crzdy2.html">超人总动员2a>p>
<div class="rating">
<span class="starrating"><span class="star40">span>span>
<span class="score">8.1span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/jqrzdy.html"><img src="images/7.jpg" alt="" />a>
<p><a href="detail/jqrzdy.html">机器人总动员a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">9.3span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/jtmdt.html"><img src="images/8.jpg" alt="" />a>
<p><a href="detail/jtmdt.html">惊天魔盗团a>p>
<div class="rating">
<span class="starrating"><span class="star40">span>span>
<span class="score">7.5span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/cmdsj.html"><img src="images/9.jpg" alt="" />a>
<p><a href="detail/cmdsj.html">楚门的世界a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">9.2span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/dmkj.html"><img src="images/10.jpg" alt="" />a>
<p><a href="detail/dmkj.html">盗梦空间a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">9.3span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/fkdwc.html"><img src="images/11.jpg" alt="" />a>
<p><a href="detail/fkdwc.html">疯狂动物城a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">9.1span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/fczlm.html"><img src="images/12.jpg" alt="" />a>
<p><a href="detail/fczlm.html">复仇者联盟a>p>
<div class="rating">
<span class="starrating"><span class="star40">span>span>
<span class="score">8.1span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/hxjy.html"><img src="images/13.jpg" alt="" />a>
<p><a href="detail/hxjy.html">火星救援a>p>
<div class="rating">
<span class="starrating"><span class="star45">span>span>
<span class="score">8.4span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/jcs.html"><img src="images/14.jpg" alt="" />a>
<p><a href="detail/jcs.html">巨齿鲨a>p>
<div class="rating">
<span class="starrating"><span class="star30">span>span>
<span class="score">5.9span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
<li>
<a href="detail/tqyj.html"><img src="images/15.jpg" alt="" />a>
<p><a href="detail/tqyj.html">通勤营救a>p>
<div class="rating">
<span class="starrating"><span class="star35">span>span>
<span class="score">6.6span>
div>
<a href="javascript:;" class="goupiao">选座购票a>
li>
ul>
div>
div>
div>
<div class="banner">
<a href="javascript:;"><img src="images/banner1.jpg" />a>
<a href="javascript:;"><img src="images/banner2.jpg" />a>
div>
<div class="hot-film">
<div class="hot-film-top">
<h2>最近热门的电影h2>
<ul>
<li><a>热门a>li>
<li><a>最新a>li>
ul>
div>
<div class="hot-film-main">
<div class="hot-film-list">
<ul>
<li>
<a href="detail/thwj.html">
<img src="images/2.jpg" alt="" />
a>
<p><a href="detail/thwj.html">头号玩家a>
<span class="score">8.7span>p>
li>
<li>
<a href="detail/fwhyj.html">
<img src="images/3.jpg" alt="" />
a>
<p><a href="detail/fwhyj.html">飞屋环游记a>
<span class="score">8.9span>p>
li>
<li>
<a href="detail/yhhwd.html">
<img src="images/5.jpg" alt="" />
a>
<p><a href="detail/yhhwd.html">银河护卫队a>
<span class="score">8.0span>p>
li>
<li>
<a href="detail/crzdy2.html">
<img src="images/6.jpg" alt="" />
a>
<p><a href="detail/crzdy2.html">超人总动员2a>
<span class="score">8.1span>p>
li>
<li>
<a href="detail/jtmdt.html">
<img src="images/8.jpg" alt="" />
a>
<p><a href="detail/jtmdt.html">惊天魔盗团a>
<span class="score">7.5span>p>
li>
ul>
div>
<div class="new-film-list">
<ul>
<li>
<a href="detail/cmdsj.html">
<img src="images/9.jpg" alt="" />
a>
<p><a href="detail/cmdsj.html">楚门的世界a>
<span class="score">9.2span>p>
li>
<li>
<a href="detail/dmkj.html">
<img src="images/10.jpg" alt="" />
a>
<p><a href="detail/dmkj.html">盗梦空间a>
<span class="score">9.3span>p>
li>
<li>
<a href="detail/fkdwc.html">
<img src="images/11.jpg" alt="" />
a>
<p><a href="detail/fkdwc.html">疯狂动物城a>
<span class="score">9.1span>p>
li>
<li>
<a href="detail/fczlm.html">
<img src="images/12.jpg" alt="" />
a>
<p><a href="detail/fczlm.html">复仇者联盟a>
<span class="score">8.1span>p>
li>
<li>
<a href="detail/hxjy.html">
<img src="images/13.jpg" alt="" />
a>
<p><a href="detail/hxjy.html">火星救援a>
<span class="score">8.4span>p>
li>
ul>
div>
div>
div>
div>
<div id="aside">
<div class="billboard">
<div class="billboard-title"><h2>一周口碑榜h2>div>
<div class="billboard-content">
<ul>
<li><span class="order">1span><span class="title"><a href="detail/fczlm.html">复仇者联盟a>span>