图片轮播

小博老师演示常用JQuery效果 ——图片轮播

二次信任 提交于 2019-12-10 07:56:11
[ 理论知识 ] 我们在实际开发应用程序的过程中,经常会遇到 图片轮播 的效果需求,本文小博老师就为大家演示一下,如何使用 JQuery 框架实现 图片轮播 的效果。 [ 步骤解读一 ] 界面布局 首先我们创建一个HTML页面,核心代码如下: <body> <div align="center" id="div_document"> <div align="center" id="div_document_content"> <!-- 图片轮播整体布局 --> <div align="center" id="div_imgPlayer"> <!-- 轮播图片显示部分 --> <div align="center" id="div_imgPlayer_img"> <!-- 前景显示图片 --> <img src="images/teamsh2.jpg" width="100%" id="img_foreground" /> <!-- /前景显示图片 --> <!-- 背景预加载图片 --> <img src="images/teamsz2.jpg" width="100%" id="img_background" /> <!-- /背景预加载图片 --> </div> <!-- /轮播图片显示部分 --> <!-- 轮播控件部分 --> <table id="table

图片轮播之:静若处子,动若脱兔(为什么我不来写一篇关于图片轮播的博客呢?)

我们两清 提交于 2019-11-30 00:33:23
一、闲聊: 图片轮播,一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学习过来的,发现自己写的很多轮播的思路都不一样了。这次写出的下一次也许就写不出来了,或者说是用更好的方式来实现了。下面一起来总结下都有什么样的需求。 二、需求: 1) 首先是要能循环显示出来(不考虑循环效果)。 2)鼠标移到图片上时停止切换,移开之后又自动开始循环。 3)带有图片标记,两个作用(1、可以 给用户提示一共多少张,2、可以知道当前展示得到是第几张 )。 4)带有切换按钮,当用按钮点击的时候就取消自动循环。让用户自由操作(切换按钮需要以上后出现,移开消失)。 三、思路: 以前再最开始的时候做轮播是直接改变的图片 url 地址,但是现在不能这样做了。为什么?因为没当变化一下url地址浏览器就会发送一个请求道服务器区拉取这个图片,这样对于性能来说是很不好的。所以不能这样做。Now 那就通过移动图片吧。我的思路(也是在借鉴的基础上)将所有的图片联合成一副大的图片,这样只需要移动一副大的图片就可以实现轮播了。下面一起来看看怎样实现吧! 四、实现步骤: HTML: <!--picture-loop-wrapper--> <div class="picture-loop-wrapper"> /