插件描述:Divas

  Slider是一个多才多艺的jQuery滑块,容易使用和完全可定制。 充分响应和触摸启用。

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">&amp;nbsp;</span>
<span class="divas-next">&amp;nbsp;</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>

divas-slider

查看演示

点击下载

&nbsp;