如何使用js实现电影海报画廊特效？

最新推荐文章于 2023-04-06 16:08:55 发布

莫修

最新推荐文章于 2023-04-06 16:08:55 发布

阅读量1.6k

点赞数 1

分类专栏： javaScript 文章标签： js实现电影海报画廊

本文链接：https://blog.csdn.net/luojiandecsdn/article/details/50773192

版权

本文介绍如何利用JavaScript创建电影海报画廊特效，包括页面加载时自动播放、向前向后按钮切换及底部圆点导航。主要涉及setInterval()、offsetWidth、三目运算符、for循环、CSS样式设置等相关技术。

摘要由CSDN通过智能技术生成

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=