插件描述：Divas Slider是一个多才多艺的jQuery滑块,容易使用和完全可定制。 充分响应和触摸启用。详细使用方法请查看下载文件中的instructions.html
======以下内容由会员 只看不发了 提供============
1.引入样式表
1 2 3 | <link rel="stylesheet" type="text/css" media="screen" href="css/CSSreset.min.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/divas_instructions_style.css" /><link id="skin" rel="stylesheet" type="text/css" media="screen" href="css/divas_free_skin.css" /> |
2.引入js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript" src="js/jquery.divas-1.0.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("#slider").divas({ slideTransitionClass: "divas-slide-transition-left", titleTransitionClass: "divas-title-transition-left", titleTransitionParameter: "left", titleTransitionStartValue: "-999px", titleTransitionStopValue: "0px", wingsOverlayColor: "rgba(0,0,0,0.6)" //设置两侧遮罩层透明度 }); });</script> |
3.html部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <section id="slider_wrapper"> <div id="slider" class="divas-slider"> <ul class="divas-slide-container"> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img1.jpg" data-title="<h1>Divas Slider</h1><p>Title is visible only if you use the attribute 'data-title' of your image</p>"/></li> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img2.jpg" data-title="<h1>Divas Slider</h1><p>Gives you the full freedom of clickable images</p>" /></li> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img4.jpg" data-title="<h1>Divas Slider</h1><p>Images use lazy loading via deferred object</p>"/></li> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img3.jpg" data-title="<h1>Divas Slider</h1><p>You can style it as you wish via CSS</p>"/></li> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img5.jpg" data-title="<h1>Divas Slider</h1><p>Uses CSS3 transitions or jQuery.animate() as a fallback</p>" /></li> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img6.jpg" data-title="<h1>Divas Slider</h1><p>You can set up almost any slider style your desire</p>" /></li> <li class="divas-slide"><img src="images/placeholder.gif" alt="" data-src="images/slider/img7.jpg" data-title="<h1>Divas Slider</h1><p>Gives you extensive documentation and friendly support</p>" /></li> </ul> <div class="divas-navigation"> <span class="divas-prev"> </span> <span class="divas-next"> </span> </div> <div class="divas-controls"> <span class="divas-start"><i class="fa fa-play"></i></span> <span class="divas-stop"><i class="fa fa-pause"></i></span> </div> </div></section><br> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jquery灯箱插件Lightbox
- 下一个特效： jQuery粒子系统插件Particleground