jQuery滑块插件Divas Slider

 查看演示  website  立即下载

======以下内容由会员 只看不发了 提供============

1.引入样式表

<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

<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部分

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

PREVIOUS:
NEXT:
jQuery粒子系统插件Particleground
jquery灯箱插件Lightbox