带圆点的图片切换,包括手动和自动切换,一次展示多个滚动,缩略图等
可以设置手动或者自动切换,有无显示缩略图,每次显示个数与滚动个数
XML/HTML Code
- <!-- BEGIN .wmuSlider -->
- <div class="wmuSlider example1">
- <div class="wmuSliderWrapper">
- <article> <img src="../dalian.jpg" /> </article>
- <article> <img src="../mohe.png" /> </article>
- <article> <img src="../sanya.jpg" /> </article>
- <article> <img src="../zhoushan.jpg" /> </article>
- <article> <img src="../xianggang.jpg" /> </article>
- <article> <img src="../zhoushan.jpg" /> </article>
- </div>
- <!-- END .wmuSlider -->
- </div>
- <!-- BEGIN .wmuSlider -->
- <div class="wmuSlider example2">
- <div class="wmuSliderWrapper">
- <article> <img src="../dalian.jpg" /> </article>
- <article> <img src="../mohe.png" /> </article>
- <article> <img src="../sanya.jpg" /> </article>
- <article> <img src="../zhoushan.jpg" /> </article>
- <article> <img src="../xianggang.jpg" /> </article>
- <article> <img src="../zhoushan.jpg" /> </article>
- </div>
- <!-- END .wmuSlider -->
- </div>
- <!-- BEGIN .wmuSlider -->
- <div class="wmuSlider example3">
- <div class="wmuSliderWrapper">
- <article> <img src="../dalian.jpg" /> </article>
- <article> <img src="../mohe.png" /> </article>
- <article> <img src="../sanya.jpg" /> </article>
- <article> <img src="../zhoushan.jpg" /> </article>
- <article> <img src="../xianggang.jpg" /> </article>
- <article> <img src="../zhoushan.jpg" /> </article>
- </div>
- <!-- END .wmuSlider -->
- </div>
- <!-- BEGIN .wmuGallery -->
- <div class="wmuGallery example4">
- <div class="wmuSlider">
- <div class="wmuSliderWrapper">
- <article> <img width="75" height="75" src="../dalian.jpg" data-src-full="../dalian.jpg" /> </article>
- <article> <img width="75" height="75" src="../mohe.png" data-src-full="../mohe.png" /> </article>
- <article> <img width="75" height="75" src="../sanya.jpg" data-src-full="../sanya.jpg" /> </article>
- <article> <img width="75" height="75" src="../zhoushan.jpg" data-src-full="../zhoushan.jpg" /> </article>
- <article> <img width="75" height="75" src="../xianggang.jpg" data-src-full="../xianggang.jpg" /> </article>
- <article> <img width="75" height="75" src="../zhoushan.jpg" data-src-full="../zhoushan.jpg" /> </article>
- </div>
- </div>
- <!-- END .wmuGallery -->
- </div>
- <!-- Scripts -->
- <script type="text/javascript" src="modernizr.custom.min.js"></script>
- <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script><script src="jquery.wmuSlider.js"></script>
- <script src="jquery.wmuGallery.js"></script>
- <script>
- $('.example1').wmuSlider();
- $('.example2').wmuSlider({
- touch: true,
- animation: 'slide'
- });
- $('.example3').wmuSlider({
- touch: Modernizr.touch,
- animation: 'slide',
- items: 2
- });
- $('.example4').wmuGallery();
- </script>
- <!-- END body -->
原文地址:http://www.freejs.net/article_jquerytupiantexiao_210.html
相关推荐
小圆点缩略图的JS图片展示,鼠标放在小圆点上,就可显示出缩略图,点击小圆点就可切换大图片。
Android左右滑屏滚动图片,很多APP在刚安装好初次运行,都会显示一个小圆点滑屏切换图片的效果,在QQ、微信或其它APP应用安装首次运行时,会有一个导航页特效,导航页下部显示小圆点,手机左右滑屏会切换导航页中的...
jQuery 插件辅助实现的一款带缩略图图片左右滚动切换焦点图,旋转风格的切换效果,当前图片在显示的同时,左右显示缩略图,点击小圆点的时候缩略图切换至当前大图片模式,代码完整,欢迎下载。
jQuery Sweet Thumbnails 小圆点焦点图特效代码,带缩略图功能,鼠标放在小圆点上,即可显示出缩略图,大图片边框自动适应图片大小,图片在切换的一瞬间,还有多种切换过渡效果,比如收缩、滚动、张开等效果,几乎不...
绘制的axure轮播图,使用动态面板进行绘制,所用到的都是使用最简单的方式进行的实现,优化了好几次,功能包含底部小圆点,支持点击切换至对应的页面,自动轮播与左右切换,帮助你快速实现轮播功能
该特效是我精心写出来的,拿出来供大家下载使用,谢谢点评。 该特效有圆点选择图片,可自动轮播切换
ViewPager实现图片 小圆点切换
大图底部有小圆点,鼠标悬停可以显示缩略图,点击小圆点可以显示大图,也可以点击左右按钮切换大图.rar
js图片标题随小圆点放大切换是一款带时间轴的图片轮播切换代码。
带小圆点的一个网页轮播特效框架,支持鼠标拖动图片切换,采用了jquery插件实现的效果,同时还调用了一个外部插件idangerous.swiper.min.js,从整体上看,这个网页焦点图像是缩略图模式,点击小圆点后或鼠标拖动图片...
HTML5 SVG圆点控制图片切换代码,这是一个图片切换带分页导航的实例,在每个分页圆点上都有一个SVG圆形线条,当用户点击圆点时,圆形线条以平滑过渡的方式图片切换效果。
看了好多小伙伴和我一样在寻找焦点图片对应地下小圆点的例子 我自己做好了 特地来分享一下 ...下半部分是textview的一个显示 并且添加了滚动条 底部就是小圆点了 当显示第几张图片的时候 第几个小圆点就会为焦点
HTML5 SVG圆点控制图片切换代码,这是一个图片切换带分页导航的实例,在每个分页圆点上都有一个SVG圆形线条,当用户点击圆点时,圆形线条以平滑过渡的方式图片切换效果。
带圆点导航满屏滚动代码,实现满屏下翻一页
HTML5 SVG变形圆点图片切换特效是一款轮播图分页导航的例子,在每个分页圆点上都有一个SVG圆形线条,当用户点击其它圆点时,圆形线条以平滑过渡的方式运动到下一个位置。
本Demo支持网络获取图片,底部动态小圆点,以及无限循环轮播,当手动触摸时停止自动轮播
css+JavaScript自学框架之幻灯片展示效果。焦点图自动播放,单击圆点切换到指定图片,鼠标放到图片上停止自动播放,鼠标移除焦点图片,继续自动播放。
45、js图片标题随小圆点放大切换
一次滚动3张图片的jquery轮播图特效,这个焦点图与其它焦点图的区别主要是一次滚动切换图片的张数,一般情况下,焦点图一次切换一张大图片,而本特效中,一次同时切换3张,此三张图片为一组,以组为基本元素进行切换...