slides.jquery.js快速实现轮播图效果

最近在做项目的时候，发现了这款插件slides.jquery.js，操作起来非常简单，不用自己去敲js代码，只需要简单配置几个属性就可以实现幻灯片轮播了。

使用例子：

tips:这个例子不做过多样式的修饰，只为了让你们可以快速了解它的使用方法，例子下面我会再写一个好看的轮播图实例哒！

<head><!--下载jq和slides.jquery.js并引入--><script src="jquery-1.2.6.min.js"></script>    <script src="slides.jquery.js"></script>
</head>
<div id="slides"><div class="slides_container"><div style="background-color: red"></div><div style="background-color: yellow"></div><div style="background-color: green"></div><div style="background-color: blue"></div></div>
</div>

 .slides_container {width: 670px;height: 370px;
}.slides_container div {width: 670px;height: 370px;display: block;
}.prev{margin-right: 10px;
}

 $(function () {$("#slides").slides({container: 'slides_container', /*设置放置图片层的顶级div  样式名称*/generateNextPrev: true, /*是否自动生成 上一个  下一个 按钮*/generatePagination: true, /*是否自动生成分页导航层*/next: 'next',  /*自动生成的下一个按钮 样式名称*/prev:'prev',  /*自动生成的上一个按钮 样式名称*/play: 2000,pause: 2000,effect: "fade",currentClass: 'current',   /*设置分页导航层中 当前分页项目的样式名称*/paginationClass:'page',   /*设置分页导航层的 样式名称*/});
});

效果图如下：

实例

经测试，可正确显示，图片和一些图标你们可以替换成自己的哈。ps:我分页的图标是设计在一张图片上，然后进行定位显示我想要的那一部分的，你们那里可以按照自己习惯来，如果用多张的就修改一下样式就行了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title><link rel="stylesheet" type="text/css" href="style.css"/><script src="jquery-1.2.6.min.js"></script><script src="slides.jquery.js"></script>
</head>
<body><div id="banner-box"><div class="banner-nav banner-nav-abs"><div class="banner-inner png"><ul><li><div></div><a href="javascript:;" class="bg1"><span class="png"></span>文字文字文字</a></li><li><div></div><a href="javascript:;" class="bg2"><span class="png"></span>文字文字文字</a></li><li><div></div><a href="javascript:;" class="bg3"><span class="png"></span>文字文字文字</a></li><li><div></div><a href="javascript:;" class="bg4"><span class="png"></span>文字文字文字</a></li><li><div></div><a href="javascript:;" class="bg5"><span class="png"></span>文字文字文字</a></li><li><div></div><a href="javascript:;" class="bg6"><span class="png"></span>文字文字文字</a></li></ul></div></div><div class="banner-list"><!--活动--><li style="background: url(img/9df786c8988a28d2a2f9e2f807b0898e.jpg) ;"><div class="animate-box png"><div class="t-d"><h2>文字</h2><br/><p>文字文字文字文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p><p><a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多>></a></p></div><div class="animate-img"><img src="img/a777b23736b812414d59e18810923b54.png" alt="营销型PHPCMS建站系统"></div></div></li><li style="background: url(img/636ac37125119d607b3d09c1de0d42d1.png) ;"><div class="animate-box png"><div class="t-d"><h2>文字</h2><br/><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p><p><a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多>></a></p></div><div class="animate-img"><img src="img/3c0fa7f92161942b2ae01eee3fa4a606.png" alt="提升企业效率的管理软件"></div></div></li><li style="background: url(img/e293a9de67ac76b9e3935e29746017f3.jpg) ;"><div class="animate-box png"><div class="t-d"><h2>文字</h2><br/><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p><p><a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多>></a></p></div><div class="animate-img"><img src="img/7234cc1cde26b5706851778da4c2abaf.png" alt="互联网产品和企业管理咨询"></div></div></li><li style="background: url(img/988cd5140fc8f79336a245f6049f1af9.jpg) ;"><div class="animate-box png"><div class="t-d"><h2>文字</h2><br/><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p><p><a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多>></a></p></div><div class="animate-img"><img src="img/5cad388a23c06f1107e50da1721e810b.png" alt="大数据高并发的系统解决方案"></div></div></li><li style="background: url(img/3915643fd2db78f09ff0b2d543b83a38.jpg) ;"><div class="animate-box png"><div class="t-d"><h2>文字</h2><p><br/> 文字文字文字文字文字文字文字文字文字文字字文字文字文字<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br/> 文字文字文字文字文字文字文字文字文字文字文文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p><p><a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多>></a></p></div><div class="animate-img"><img src="img/4e1ecdad7b77b2adb51a9e190322c632.png" alt="平台网站建设"></div></div></li><li style="background: url(img/8d2483d87745aaa88e2a6dd887b8371c.jpg) ;"><div class="animate-box png"><div class="t-d"><h2>文字</h2><p><br/> 文字文字文字文字文字文字文字文字文字文字字文字文字文字<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br/> 文字文字文字文字文字文字文字文字文字文字文文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p><p><a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多>></a></p></div><div class="animate-img"><img src="img/46a85e97bb0745ffa4b9c3a4e9089d03.png" alt="电商网站建设"></div></div></li></div></div></body>
</html>

@charset "utf-8";body {font-family: "寰蒋闆呴粦";font-size: 12px;margin: 0px;padding: 0px;color: #333;line-height: 24px;height: auto;clear: both;min-width: 1200px;
}img {border: 0px;
}ul,
li {list-style: none;
}em,
i {font-style: normal;
}a {text-decoration: none;color: #333;outline: none;
}a:hover {background-repeat: no-repeat;color: #03a5e3;
}.clear {clear: both;line-height: 0;height: 0;font-size: 0;
}a,
area {blr: expression(this.onFocus=this.blur())
}.clearfix::before, .clearfix::after {display: table;line-height: 0;content: "";
}.m-t-35 {margin-top: 35px;
}#banner-box {margin: 0px auto;/*    height: 500px;*/overflow: hidden;position: relative;padding-top: -40px;
}.banner-inner {height: 65px;margin: 0px auto
}.banner-nav-abs {position: absolute;left: 0px;bottom: 0px;z-index: 3;min-width: 1200px;
}.banner-nav-abs-opac {position: absolute;width: 100%;height: 78px;left: 0px;bottom: -22px;z-index: 2
}.banner-nav-fix {position: fixed;left: 0px;top: 82px;z-index: 3
}.banner-nav {width: 100%
}.banner-nav ul {width: 1200px;margin: 0px auto
}.banner-nav li {float: left;display: inline;width: 112px;height: 65px;font-size: 14px;padding: 5px 43px 0px 43px;cursor: pointer;position: relative;margin: 0px 1px
}.banner-nav li div {width: 110px;height: 65px;padding: 5px 43px 0px 43px;position: absolute;left: 0px;top: 0px;z-index: 5;background: #fff;filter: alpha(opacity=20);-moz-opacity: 0.2;-khtml-opacity: 0.2;opacity: 0.2
}.banner-nav li a span {display: block;height: 36px;width: 60px;margin: 3px auto 0px auto;background: url(img/icon-banner.png) no-repeat;
}.banner-nav li a.bg1 span {background-position: 15px 2px
}.banner-nav li a.bg2 span {background-position: -53px 2px
}.banner-nav li a.bg3 span {background-position: -110px 2px
}.banner-nav li a.bg4 span {background-position: -174px 2px
}.banner-nav li a.bg5 span {background-position: -235px 2px
}.banner-nav li a.bg6 span {background-position: -297px 2px
}.banner-nav li a {display: block;float: left;position: absolute;left: 0px;top: 0px;color: #fff;z-index: 6;padding: 5px 43px 0px 43px;display: inline;width: 110px;height: 65px;padding-top: 5px;text-align: center
}.banner-nav li.current {cursor: default
}.banner-nav li.current div {width: 95px;height: 95px;background: none;
}.banner-nav li.current a {color: #333;cursor: default;background: #eee;
}.banner-nav li.current a.bg1 span {background-position: 15px -32px
}.banner-nav li.current a.bg2 span {background-position: -53px -32px
}.banner-nav li.current a.bg3 span {background-position: -110px -32px
}.banner-nav li.current a.bg4 span {background-position: -174px -32px
}.banner-nav li.current a.bg5 span {background-position: -235px -32px
}.banner-nav li.current a.bg6 span {background-position: -297px -32px
}.banner-list {position: absolute;height: 500px;position: absolute;z-index: 2;overflow: hidden;width: 100%
}.banner-list li {width: 100%;height: 500px;text-align: center;float: left;display: inline-block
}.banner-list li .animate-box {width: 1200px;margin: 0px auto;position: relative
}.banner-list li .animate-box .t-d {position: absolute;width: 420px;left: 20px;top: 100px
}.banner-list li .animate-box .t-d h2 {display: block;margin: 0px;padding: 0px;font-size: 30px;text-align: left;color: #fff
}.banner-list li .animate-box .t-d p {color: #fff;padding: 10px 0px 0 0;line-height: 28px;left: 20px;text-align: left;font-size: 14px;
}.banner-list li .animate-box .animate-img {position: absolute;top: 50px;right: 0px
}.slider-btn {width: 100px;height: 30px;background: #fff;border-radius: 4px;-moz-border-radius: 4px;line-height: 30px;text-align: center;font-size: 12px;color: #444;display: block;font-family: "宋体";
}.slider-btn:hover {color: #fff;background: #c80106;
}

    $(function () {$(".banner-list li").width($(window).width());$('#banner-box').slides({generateNextPrev: false, /*是否自动生成 上一个  下一个 按钮*/generatePagination: false, /*是否自动生成分页导航层*/paginationClass: "banner-nav", /*设置分页导航层的 样式名称*/container: 'banner-list', /*设置放置图片层的顶级div  样式名称*/play: 10000,pause: 6000,effect: "fade",slideEasing: "easeInOutQuart",slidesLoaded: function () {},animationStart: function (current) {$('.t-d').animate({top: 100, left: 0});$('.animate-img').animate({top: 50, right: 0});},animationComplete: function (current) {$('.t-d').animate({top: 100, left: 20});$('.animate-img').animate({top: 50, right: 50});}});});

效果图如下：

slides.jquery.js快速实现轮播图效果相关推荐

jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
单机按钮来图片轮播_原生js如何实现轮播图效果？
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
jquery.flexslider-min.js实现banner轮播图效果
查看演示立即下载插件描述: jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果实现方法引用jquery和flexslider.js到你的页面 [html] view ...
swiper插件的使用（快速实现轮播图）
swiper插件的使用(快速实现轮播图) 1.进入swiper官网 2.选择代码包进行引用 3.进入官网的API文档 4.前端效果演示 1.进入swiper官网在获取Swiper下点击Swiper ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
js实现圆柱形轮播图
js实现圆柱形轮播图 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...

slides.jquery.js快速实现轮播图效果

使用例子：

实例

slides.jquery.js快速实现轮播图效果相关推荐

最新文章

热门文章