基于JavaScript无缝效果轮播图的设计与实现

齐彩霞

摘要：在一个网站的首页，通常会留有一片位置来凸显网站的动态。例如：新闻网站的头条热点等。这片区域采用多张图片来实现图片的位置切换，而基于JavaScript无缝效果轮播图是最常用的方法之一。本文主要介绍了网页中基于JavaScript无缝效果轮播图的实现过程，主要通过iQuery的事件和动画来实现无缝效果轮播图。

关键词：轮播图iQuery动画效果

引言

在网页实现的过程中，无缝效果輪播图是比较常见的实现效果之一，但是设计者在使用JavaScript语言来实现无缝效果轮播图的设计时，经常会遇到各种问题。 本文针对设计者在设计无缝效果轮播图中出现的问题，详细介绍设计的原理及其实现过程中应该注意的事项，从而实现JavaScript无缝效果轮播图的效果。

1轮播图设计思路

通过JavaScript实现一个完整的无缝轮播图方案，可以把此部分分为以下几个功能：主页、无缝轮播、圆点切换和左右箭头切换。在网页实现的过程中，把图片放在一组li标签中，目前只定义5组，后续可以根据需求来增加或者减少，也可以通过js实现动态添加图片数量，从而实现完整的无缝轮播效果，无缝轮播的效果关键是处理最后一张图片和第一张图片的关系，从而实现无缝切换，同时，设置一个定时时间来定时自动切换图片。

2代码实现

2.1实现主页页面，ImageList标签用于存放轮播的图片，Imagedot标签用于放底部的小圆点，Imagearrow标签用于放左右箭头。并且在标签中引入用于实现轮播的JS文件l.js。

2.2实现无缝切换，其实现方式是：复制列表中的第一张图片，追加到列表最后，设置ul的宽度为图片张数*图片宽度，实现代码具体如下。

2.3实现自动切换，使用setlnterval（）设置一定时间自动切换到下一张。

实现ImageSelect函数实现图像的自动轮播，代码中i用于保存当前显示图片的索引，代码如下：

function ImageSelect（）{

++i;

isCrack（）;

dotChange（）;

}

isCrack函数实现自动切换，speed保存动画切换的速度，其最后一张图片就是第一张图片，这样可以保证无缝切换，因此，轮播结束后i的值为1，让其直接显示第2张图片，同时将ul的样式Ieft值设置O。

var speed = 300;

function isCrack（）{

if（i一一$（.ImageList li）.length）{

l—1：

$（.ImageList）.css（{left：

0}）;

}

$（.ImageList）.stop（）.animate“left： i}width}，speed）;

}

接下来实现dotChange函数，完成图片自动切换，具体实现如下：

function dotChange（）{

if（i一一$（.ImageList lil）.length - l）{

$（.lmagedot

li）.eq（0）. addClass（10n）. siblings（）.removeClass（10n1）;

} else{

$（1.Imagedot li`）.eq（i）. addClass（'on'）.siblings（）.removeClass（10n1）;

}

}

为了实现轮播，最后一张图片就是第一张图片。在设置当前圆点样式时，通过第2行代码进行判断，若遇到是最后一张图片时，则通过上面第3行代码设置对应的第1个圆点，而其他情况则通过第5行代码即可完成设置。

在实现图片的自动无缝轮播后，还需要设置一个事件来完成图片切换的暂停，以及移除后继续切换的效果，代码如下：

2.4鼠标滑过圆点显示对应的图片，实现代码如下：

2.5实现箭头的左右切换

3总结

部分初级设计者在设计无缝轮播时，可能会遇到一些问题，尤其是在实现的过程中总会出现一些问题，本文设计的方案为设计者提供了一个完整的思路，可以作为参考，即使后续需要实现较为复杂的方案，也可以利用此方案加入数据库和后台API实现完整的功能，比如，首页的新闻头条预览，关键信息的展示，广告位展示等，所以，本文具有很好的参考价值和使用价值。

参考文献

[1]周芷仪，陈婷.浅谈网页中实现图片轮播图效果的方法[J].软件.2018（3）.

[2]王晓华，运用css和JavaScript技术设计网页轮播图[J].科技视界.2018（1）

[3]陈月，秦福建.Web前端开发技术以及优化方向探究[J].信息与电脑（理论版），2016（04）：35+37.

[4]荣艳冬.以岗位需求为导向的Javascript课程构建[J].软件，2015，36（06）： 18-20.

[5]李轶，基于JavaScript的面向对象程序设计研究[J].江汉大学学报（自然科学版），2010，38（03）：52-56.