![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jquery
梵海pp
乐于编程,享受生活
展开
-
jQuery实现轮播图(一)
轮播概念图 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图,循环滚动(还有变换透明度来实现轮播的)轮播图的原理很简单:设置一个div(box),给其相对定位并且overflow:hidden超出box的范围隐藏,里面包含一个ul,给其绝对定位,ul里面有多个li(li里面存放着轮播的图片,给li左浮动实现左右轮播效果)。每隔一段时间让ul向左移动一个li的width距离,这样图片就一张一张原创 2017-07-24 13:53:50 · 26183 阅读 · 5 评论 -
jQuery实现轮播图(二)
这里的轮播为轮播增添了一个效果,前一张图片整体碎成小块块然后上移消失,而下一张图片显示出 原理为:事先创建一堆浮动的div(宽高一样,布满整个背景box,这里的box包含着图片)然后为每一个div添加背景图片,使用background-position可以为每一个div取出同一张图片的对应位置的图样作为背景,然后就可以分别控制各div的运动来达到效果这里也改变了一下轮播点击按钮的运动样式 点击圆原创 2017-07-25 22:50:07 · 512 阅读 · 0 评论