unslider制作轮播图

unslider 使用演示

本插件可配合jquery.event.swipe.js来实现触摸响应，具体请参见jquery.event.swipe.js的使用说明。

1-首先我们定义一个固定的大小的DIV（id=”b04”），使用固定大小的图片（width=”640” height=”480”），并限制容器大小（#b04 { width: 640px;}）

2-添加左右箭头指示，单击时候不让他跳转（href=”javascript:void(0)），并设置一个类（class=”unslider-arrow04 next”）让他滑动到下一个图片。

3-在整个文档加载完成时执行一个回调函数（$(document).ready（function（）{ }））在这个函数中使用unslider 插件即可。

HTML

<div class="banner" id="b04"><ul><li><img src="01.jpg" alt="" width="640" height="480" ></li><li><img src="02.jpg" alt="" width="640" height="480" ></li><li><img src="03.jpg" alt="" width="640" height="480" ></li><li><img src="04.jpg" alt="" width="640" height="480" ></li><li><img src="05.jpg" alt="" width="640" height="480" ></li></ul><a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a><a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a></div>

CSS

    #b04 { width: 640px;}#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}#b04 .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s;}#b04 .dots li.active {background: #fff;opacity: 1;}#b04 .arrow { position: absolute; top: 200px;}#b04 #al { left: 15px;}#b04 #ar { right: 15px;}

JS

    $(document).ready(function(e) {var unslider04 = $('#b04').unslider({dots: true}),data04 = unslider04.data('unslider');$('.unslider-arrow04').click(function() {var fn = this.className.split(' ')[1];data04[fn]();});});

unslider制作轮播图相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
Axure使用动态面板制作轮播图
对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的.那么,下边我就来分享一下 ...
制作轮播图的几种方式
目录 css制作轮播图思路 animation详解具体制作 js制作轮播图思路内容详解 css制作轮播图思路主要通过一个展示盒子,一个图片储存盒子,展示盒子的大小即为轮播图想要展示图片的大 ...
【Axure RP9 制作轮播图】
Axure RP9 制作轮播图说在前面:由于版本差异,在Axure学习过程中遇到一点点麻烦,网上没找到答案,最终自己弄出来了,在此记录一下.(课程上是axure8,我用的axure9,个别地方有些差 ...
利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
Swiper4.3.3 制作轮播图
想要的轮播图效果如下:(gif制作可参考这篇文章) 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：
制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~
Axure知识点：如何制作轮播图效果（以泉州师范学院官网为例）
摘要:微信搜索[三桥君] 使用软件:Axure RP 9软件说明:实现方式不唯一,这里给出三桥君制作的一种方式. 一.问题本篇文章三桥君主要解决关于轮播图交互效果的设置,以泉师新闻轮播图为例. 该 ...
html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...

unslider制作轮播图

unslider 使用演示

HTML

CSS

JS

unslider制作轮播图相关推荐

最新文章

热门文章