<!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>
仿豆瓣电影.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资源评论
温轻舟
- 粉丝: 2696
- 资源: 6
最新资源
- (源码)基于C++的简易操作系统模拟器.zip
- (源码)基于ROS和PCL的激光与UWB定位仿真系统.zip
- (源码)基于Arduino的iBeacon发送系统.zip
- (源码)基于C语言和汇编语言的简单操作系统内核.zip
- (源码)基于Spring Boot框架的AntOA后台管理系统.zip
- (源码)基于Arduino的红外遥控和灯光控制系统.zip
- (源码)基于STM32的简易音乐键盘系统.zip
- (源码)基于Spring Boot和Vue的管理系统.zip
- (源码)基于Spring Boot框架的报表管理系统.zip
- (源码)基于树莓派和TensorFlow Lite的智能厨具环境监测系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
