<!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>Document</title>
<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/3</span>
<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.2</span>
</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.7</span>
</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.9</span>
</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.4</span>
</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.0</span>
</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">超人总动员2</a></p>
<div class="rating">
<span class="starrating"><span class="star40"></span></span>
<span class="score">8.1</span>
</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.3</span>
</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.5</span>
</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.2</span>
</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.3</span>
</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.1</span>
</div>
<a href="javascript:;" class="goupiao">选座购票</a>
</li>
<li>
<a href="detail/fczlm.html"><img src="images/12.jpg" alt="" /></a>
web前端项目-豆瓣电影
需积分: 5 115 浏览量
2023-12-28
18:53:09
上传
评论 1
收藏 555KB ZIP 举报
仿豆瓣电影.zip （45个子文件） 
仿豆瓣电影 detail 
hxjy.html 10KB fczlm.html 10KB mtyj.html 10KB crzdy2.html 10KB dmkj.html 10KB thwj.html 10KB jcs.html 10KB mnyys.html 10KB fwhyj.html 11KB tqyj.html 10KB fkdwc.html 10KB yhhwd.html 10KB jqrzdy.html 10KB cmdsj.html 10KB jtmdt.html 10KB js 
score.js 7KB jquery-3.3.1.min.js 85KB css score.css 8KB index.css 5KB index.html 14KB images 
2.jpg 20KB 10.jpg 22KB 13.jpg 16KB 侏罗纪世界2.jpg 18KB 14.jpg 17KB 6.jpg 24KB 星际穿越.jpg 18KB 15.jpg 13KB 泰坦尼克号.jpg 18KB 1.jpg 20KB
starrating.gif 1KB 12.jpg 25KB 5.jpg 23KB banner1.jpg 38KB
slide_swithc_2.png 1KB 8.jpg 20KB 11.jpg 23KB 血战钢锯岭.jpg 19KB starrating1.gif 2KB 肖申克的救赎.jpg 16KB 3.jpg 39KB 7.jpg 18KB banner2.jpg 30KB 9.jpg 25KB 4.jpg 20KB资源评论
