jquery带动画效果幻灯片插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery带动画效果幻灯片插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery带动画效果幻灯片插件devrama.slider</title>
<link rel="stylesheet" href="css/lrtk.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
<style type="text/css">
	.example-animation {
		color: #FFF;
		font-size: 60px;
	}
</style>
</head>
<body>
<!-- 代码 开始 -->
<div class="example-animation">
	<div data-lazy-background="images/1.jpg">
		<h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move">
			Moving
		</h3>
		<div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
			Text
		</div>
		<div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
			and Image
		</div>
		<div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
			<img data-lazy-src="images/add.jpg"/>
		</div>
	</div>
	<div data-lazy-background="images/2.jpg">
		<h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
			Fadein
		</h3>
		<div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
			Text
		</div>
		<div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
			and Image
		</div>
		<div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein">
			<img data-lazy-src="images/add.jpg"/>
		</div>
	</div>	 
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('.example-animation').DrSlider(); //Yes! that's it!
});
</script>
<!-- 代码 结束 -->
</body>
</html>

CSS代码(zzsc.css):

@font-face{font-family:"FontAwesome";font-style:normal;font-weight:normal;src:url('fontawesome-webfont.eot') format("embedded-opentype"),url('fontawesome-webfont.woff') format("woff"),url('fontawesome-webfont.ttf') format("truetype"),url('fontawesome-webfont.svg') format("svg");}
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0px;padding:0px;}
body{position:relative;margin:0px 0px 25px;background-color:rgb(255,255,255);font-family:Arial,sans-serif;font-size:13px;}
img{border:medium none;}
a,a:visited{color:rgb(46,162,204);}
a:hover{color:rgb(33,112,141);}
*,*:after,*:before{box-sizing:border-box;}
.clear:after{content:"";display:block;clear:both;}
p code{padding:2px 4px;font-size:0.9em;color:rgb(175,30,67);white-space:nowrap;background-color:rgb(243,220,227);border-radius:4px;}
#content > h1,#content > h2,#content > h3{color:rgb(39,114,141);margin:0px;}
#content > h1{font-size:50px;padding-top:0.83em;}
p{font-size:16px;line-height:1.5em;}
header{background-color:rgb(0,0,0);}
header .home{float:left;display:block;padding:7px;color:rgb(179,179,179);}
header .home:hover{color:rgb(181,24,27);}
footer{position:fixed;bottom:0px;width:100%;background-color:rgb(0,0,0);color:rgb(179,179,179);text-align:center;padding:3px;z-index:1000;}
.syntaxhighlighter a,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody,.syntaxhighlighter table thead,.syntaxhighlighter table caption,.syntaxhighlighter textarea{background:none repeat scroll 0% 0% transparent ! important;border:0px none ! important;bottom:auto ! important;float:none ! important;height:auto ! important;left:auto ! important;line-height:1.1em ! important;margin:0px ! important;outline:0px none ! important;overflow:visible ! important;padding:0px ! important;position:static ! important;right:auto ! important;text-align:left ! important;top:auto ! important;vertical-align:baseline ! important;width:auto ! important;box-sizing:content-box ! important;font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace ! important;font-weight:normal ! important;font-style:normal ! important;font-size:1em ! important;min-height:inherit ! important;}
.syntaxhighlighter{width:100% ! important;margin:1em 0px ! important;position:relative ! important;overflow:auto ! important;font-size:1em ! important;}
.syntaxhighlighter .line{white-space:pre ! important;}
.syntaxhighlighter table{width:100% ! important;}
.syntaxhighlighter table td.code{width:100% ! important;}
.syntaxhighlighter table td.code .container{position:relative ! important;}
.syntaxhighlighter table td.code .line{padding:0px 1em ! important;}
.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0em ! important;}
.syntaxhighlighter .toolbar{position:absolute ! important;right:1px ! important;top:1px ! important;width:11px ! important;height:11px ! important;font-size:10px ! important;z-index:10 ! important;}
.syntaxhighlighter .toolbar a{display:block ! important;text-align:center ! important;text-decoration:none ! important;padding-top:1px ! important;}
.syntaxhighlighter{background-color:black ! important;}
.syntaxhighlighter .line.alt1{background-color:black ! important;}
.syntaxhighlighter .line.alt2{background-color:black ! important;}
.syntaxhighlighter .toolbar{color:white ! important;background:none repeat scroll 0% 0% rgb(153,0,0) ! important;border:medium none ! important;}
.syntaxhighlighter .toolbar a{color:white ! important;}
.syntaxhighlighter .toolbar a:hover{color:rgb(156,207,244) ! important;}
.syntaxhighlighter .plain,.syntaxhighlighter .plain a{color:rgb(211,211,211) ! important;}
.syntaxhighlighter .string,.syntaxhighlighter .string a{color:rgb(255,158,123) ! important;}
.syntaxhighlighter .keyword{color:aqua ! important;}
.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:rgb(235,219,141) ! important;}
body{}
#content{margin:0px auto 100px;max-width:1200px;font-size:16px;}
#content .syntaxhighlighter{overflow-y:hidden ! important;}
#content .syntaxhighlighter > table > tbody > tr > td.code{padding:10px ! important;}
#content .photo-license-toggle{margin:0px auto;padding:10px 0px;max-width:1024px;text-align:right;}
#content .photo-license{display:none;margin:0px auto;max-width:1024px;font-size:0.8em;border:1px dashed rgb(111,111,111);border-radius:6px;padding:15px 10px;line-height:1.6em;}
.example-animation{color:rgb(255,255,255);font-size:60px;}

附件:下载该文件资源,减少时间成本(增值服务)