滑动轮播图实现最后一张图片无缝衔接第一张图片

最新推荐文章于 2023-12-26 20:44:38 发布

weixin_34102807

最新推荐文章于 2023-12-26 20:44:38 发布

阅读量1.6k

点赞数

文章标签： javascript 前端 ViewUI

本文介绍如何利用JavaScript实现滑动轮播图，让最后一张图片无缝衔接第一张，通过insertBefore和insertAfter调整图片顺序。已在Firefox、Chrome和IE11上测试正常。尽管目前每次播放都进行元素调整，但可以通过优化减少操作次数。文章包含HTML结构、CSS样式和jQuery轮播插件的实现细节。

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

原理：使用insertBefore和insertAfter方法调整图片顺序。

测试：firefox/chrome/IE11正常

已知不足：每次播放均使用了一次insertBefore和insertAfter，可考虑在最后一张图的时候将前几张图片整体后移。以后有空再优化。

1、HTML结构

alt的值将作为图片的描述信息出现在infobox里。

<div class="outerbox">
    <div>
        <a href="http://www.baidu.com"><img src="img/img1.jpg" alt="JavaScript高级程序设计"></a>
        <a href="http://www.w3school.com.cn/"><img src="img/img2.jpg" alt="油藏工程原理与方法"></a>
        <a href="http://www.cnblogs.com/zczhangcui/"><img src="img/img3.jpg" alt="高等数学第六版上册"></a>
        <a href="http://cn.bing.com/"><img src="img/img4.jpg" alt="银河帝国2：基地与帝国"></a>
        <a href="http://cn.bing.com/academic/?FORM=Z9LH2"><img src="img/img5.jpg" alt="三体"></a>
        <a href="http://cn.bing.com/dict/?FORM=HDRSC6"><img src="img/img6.jpg" alt="计算机科学导论"></a>
    </