js实现电影海报画廊特效
特效需求:
- 加载页面依次自动播放下一张海报
- 点击向前按钮,移动到钱一张海报
- 点击向后按钮,移动到后一张海报
- 点击底部圆点按钮,移动到对应的海报
所用重点函数/方法/语句(部分)
- setInterval(),间歇调用
- offsetWidth
- 三目运算符
- for循环
- e.style.left
- getAttribute()
- setAtribute()
以下是详细代码:
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="default.css">
</head>
<body>
<div id="pasterMovieGrid" >
<div id="paster">
<div id="paster_list">
<ul>
<li id="image_1"><a href="#" title="港囧"><img src="images/0510000056B4B9F167BC3D47E003E7A2.jpg"></a></li>
<li id="image_2"><a href="#" title="神探夏洛克"><img src="images/0510000056B5AE3067BC3D303301CC6D.jpg"></a></li>
<li id="image_3"><a href="#" title="寻龙决" ><img src="images/0510000056B094DB67BC3D5DC801A0AD.jpg"></a></li>
<li id="image_4"><a href="#" title="我是证人"><img src="images/0510000056BD439667BC3D0EDA041950.jpg"></a></li>
<li id="image_5"><a href="#" title="唐人街探案"><img src="images/0510000056BFD9E367BC3D1FC100EC07.jpg"></a></li>
<li id=