js如何制作图片轮播

JavaScript018

js如何制作图片轮播,第1张

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和400px,如下图所示

02

然后在HTML页面中布局轮播图的结构,如下图所示,主要包括图片区域,圆形按钮,左右箭头

03

接下来需要给轮播图页面布局声明一些样式,请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能,如下图所示,主要包括前进,后退,自动播放的功能

05

最后运行页面,你就会看到下图所示的轮播图效果,点击圆圈或者左右箭头可以切换轮播图

三个div,最外层id为 parent 的大div内包含了 uls 和 buttons 两个div,div uls 中包含了两个列表 img_ul (图片列表), litCir_ul (小圆点列表),div buttons 里则包含了“左”, “右”两个按钮。

之所用js添加小圆点,是因为小圆点的数量是由图片张数决定的。

默认 li 的 class 为 quiet , 第一张默认为 active 。

首先先理解该轮播图如何滚动,这里是通过控制 img_ul 的 left 值来控制显示某张图片, 为了实现“滚动”的效果,我们需要 逐渐 改变 img_ul 的 left 值,而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数 Roll() 。

试想下面的情况,当图片从最后一张切换到第一张时,这时就不能通过逐渐改变 img_ul 的 left 值来实现滚动的效果,于是 克隆第一张图片至列表尾部,当滚动完最后一张图片时,继续滚动到克隆的第一张,然后将 img_ul 的 left 值置为0。

需要注意的是小圆点和图片列表的 li 数目是不一样的,当滚动到最后一个克隆项时,此时小圆点实际上在第一个位置。

开始自动滚动:

timer = setInterval(autoRun, gap)

给每个小圆点绑定了onmouseover事件,这个方法有个细节,会根据两次小圆点的距离差调整速率为 rate*times ,使切换效果更自然(也就是说每次切换说花的时间基本一致,无论是第一张到第二张,还是第一张到最后一张)。

触及区域,清除定时器,显示按钮。

离开区域,添加定时器,隐藏按钮。

自动播放就是间隔一定时间不断调用函数“下一张”的过程,所以这里的按钮 right 下一张的实现就是上面的 autoRun 函数。

以上就是轮播图各部分的实现原理,如果你有其他的方法,欢迎一起交流!

2019.3.30更新:

用requestAnimationFrame()实现一个轮播图

h5代码:

<div id="wrap">

<ul id="list">

<li>10</li>

<li>9</li>

<li>8</li>

<li>7</li>

<li>6</li>

<li>5</li>

<li>4</li>

<li>3</li>

<li>2</li>

<li>1</li>

</ul>

</div>

css代码:

<style type="text/css">

@-webkit-keyframes move{

0%{left:-500px}

100%{left:0}

}

#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px auto

overflow: hidden}

#list{position:absoluteleft:0top:0padding:0margin:0

-webkit-animation:5s move infinite linearwidth:200%}

#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pink

color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}

#wrap:hover #list{-webkit-animation-play-state:paused}

</style>

扩展资料:

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片,在网页的某一部位进行轮流的呈现,从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式:例如:有5张轮播的图片,每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸,即为:1024×512。之后将这5张图片0px水平相接组成一张宽度为:5120px,高度依然为:512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。