详解JavaScript实现动态的轮播图效果 - CSDN文库

82 浏览量更新于2023-05-04 评论收藏 242KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解JavaScript实现动态的轮播图效果实现动态的轮播图效果

利用javascript能实现常见的动态的网页轮播图效果，如下图1所示：

图1

实现该轮播图有以下几个要点：

(1)在左右两侧各有一个箭头，分别指的是向左和向右切换，即点击相应的位置就会切换到该图片之前(或之后)的一张图片

(2)在图片的下方有一排圆形按钮，每个按钮有各自的单击事件，点击任意一个按钮就切换到对应的图片

(3)不点击图片时，图片会自动播放，即有一个图片轮播效果

首先可以写出大概的HTML代码为代码1：

代码1：

<div id="container">

<div id="list" style="left: -600px;"> //设置图像的父级元素定位为向左600px，即是左移一个图片的宽度

<img src="images/16.jpg" alt="1"> //设置的是5张图片自动轮播，此处会有7张图片，并且红色代码表示的图片和 <img src="images/12.jpg" alt="1"> 蓝色

代码表示的图片是相同的。这是因为每张图片都有向前和向后两种单击

<img src="images/13.jpg" alt="2"> 事件，要使第一张图片向前单击显示第五张图片，就需要在其前方添加第五

<img src="images/14.jpg" alt="3"> 张图片，避免在第一张图片单击向左时显示空白；同理，在第五张图片之

<img src="images/15.jpg" alt="4"> 后也要添加第一张图片，使其实现平稳过渡

<img src="images/16.jpg" alt="5">

<img src="images/12.jpg" alt="5">

</div>

<div id="buttons"> //设置相对应的按钮，并未按钮添加对应的自定义属性 index

<span index="1" class="on"></span>

<span index="2"></span>

<span index="3"></span>

<span index="4"></span>

<span index="5"></span>

</div>

<a href="#" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a> //此处的a表示的是箭头；<(左箭头)，>(右箭头)

<a href="#" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>

</div>

在上例中，图片的宽是600px，高是400px；

然后再设置其CSS样式为代码2：

代码2：

*{margin: 0;padding: 0;text-decoration: none;} //设置所有元素的基本样式

body{padding: 20px;}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38669793

粉丝: 6
资源: 938

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈