js如何制作图片轮播

JavaScript057

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

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

05

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

一、思路:页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变。

二、提示:

1、 index不能一直无限制的递增下去,需做判断

2、调用切换图片函数时需将递增之后的index作为参数传过去

<body>

 <div class="wrap" id='wrap'>

 <ul id="pic">

 <li><img src="1.jpg" alt=""></li>

 <li><img src="2.jpg" alt=""></li>

 <li><img src="3.jpg" alt=""></li>

 <li><img src="4.jpg" alt=""></li>

 <li><img src="5.jpg" alt=""></li> 

 </ul>

 <ol id="list">

 <li class="on">1</li>

 <li>2</li>

 <li>3</li>

 <li>4</li>

 <li>5</li>

 </ol>

 <input value="上一张" onclick="" type="button"/>

 <input value="下一张" onclick="" type="button"/>

 </div>

<script type="text/javascript">

 var wrap=document.getElementById('wrap'),

 pic=document.getElementById('pic').getElementsByTagName("li"),

 list=document.getElementById('list').getElementsByTagName('li'),

 index=0

 function autoPlay (type) {//type==0--上一张type==1--下一张

 if(type==0)index--

 else if(type==1)index++

 

 if (index >= pic.length) index = 0//如果Index大于照片数量就从第一张开始

     changePic(index)

 }

 

 // 定义图片切换函数

 function changePic (curIndex) {

 for (var i = 0 i < pic.length ++i) {

 pic[i].style.display = "none"

 list[i].className = ""

 }

 pic[curIndex].style.display = "block"

 list[curIndex].className = "on"

 }

 </script> 

</body>

我只是大致写的一个例子,你自己调试。

html使用&符号要进行转义。

请使用“&amp” 代替“&”

参考:

HTML字符实体(Character Entities),转义字符串(Escape Sequence)为什么要用转义字符串?

HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用。这些符号是不显示在我们最终看到的网页里的,那如果我们希望在网页中显示这些符号,该怎么办呢?

这就要说到HTML转义字符串(Escape Sequence)了。

转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中,定义转义字符串的原因有两个:第一个原因是像“<”和“>”这类符号已经用来表示HTML标签,因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号,就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时,要严格遵守字母大小写的规则。第二个原因是,有些字符在ASCII字符集中没有定义,因此需要使用转义字符串来表示。

转义字符串的组成

转义字符串(Escape Sequence),即字符实体(Character Entity)分成三部分:第一部分是一个&符号,英文叫ampersand;第二部分是实体(Entity)名字或者是#加上实体(Entity)编号;第三部分是一个分号。

比如,要显示小于号(<),就可以写 &lt或者 &#60。

用实体(Entity)名字的好处是比较好理解,一看lt,大概就猜出是less than的意思,但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号,各种浏览器都能处理。

提示:实体名称(Entity)是区分大小写的。

备注:同一个符号,可以用“实体名称”和“实体编号”两种方式引用,“实体名称”的优势在于便于记忆,但不能保证所有的浏览器都能顺利识别它,而“实体编号”则没有这种担忧,但它实在不方便记忆。

如何显示空格?

通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。为了在网页中增加空格,你可以使用 表示空格。