在做网页开发时, 我们经常会使用到图片轮播的功能, 下面本篇文章给大家介绍一下使用 jQuery 如何做图片轮播. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
用 jQuery 做图片轮播的方法步骤
1,jQuery 有很多功能强大的插件, 图片轮播的插件当然也是有的, 百度搜索'lightslider', 然后下载插件代码回来.
2, 然后实现图片轮播. 当然我们需要先引入 jQuery 的脚本文件.
3, 然后引入 lightslider 的脚本文件, 对应的样式文件也是需要的.
4,html 部分就很简单了, 一个 ul,li 的标签就行了, 要注意的是 li 标签里有一个 data-thumb 的属性, 属性值就是图片的路径.
5, 在 JS 脚本里, 通过传入 ul 标签的 id, 调用 lightSlider 方法, 来初始化一个实例. 里面的参数可以参考文档.
6, 运行页面, 我们就可以看到一个漂亮的图片轮播插件了.
7, 除了会自动播放后, 我们点击下方的一张图片, 大图里也会相应显示这张图片的.
更多 jQuery 的相关知识, 可访问: web 前端课程!!
来源: http://www.css88.com/qa/jquery/17945.html