以下是 jquery文字图片双滑动显示特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字图片双滑动显示</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.3.css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="scripts/jquery.dualSlider.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".carousel").dualSlider({
auto:true,
autoDelay: 6000,
easingCarousel: "swing",
easingDetails: "easeOutBack",
durationCarousel: 1000,
durationDetails: 500
});
});
</script>
</head>
<body>
<div class="wrapper clearfix">
<h1 class="Lexia-Bold"></h1>
<h2 class="Lexia-Regular"></h2>
<p>As you can see pretty much any html can go in the panels from your CMS, you just need to format them with CSS</p>
<div class="carousel clearfix">
<div class="panel">
<div class="details_wrapper">
<div class="details">
<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Dolor sit amet</a> Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->
<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit. </h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->
<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Aenean massa</a>. Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->
</div><!-- /details -->
</div><!-- /details_wrapper -->
<div class="paging">
<div id="numbers"></div>
<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
<a href="javascript:void(0);" class="next" title="Next">Next</a>
</div><!-- /paging -->
<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>
</div><!-- /panel -->
<div class="backgrounds">
<div class="item item_3">
</div><!-- /item -->
<div class="item item_1">
</div><!-- /item -->
<div class="item item_2">
</div><!-- /item -->
</div><!-- /backgrounds -->
</div><!-- /carousel -->
<h3 class="Lexia-Regular">A little bit of documentation</h3>
<p>
It's fairly simple to get this going, just copy and paste markup from this file if need be.
</p>
<div class="documentation">
<p class="alt clearfix">
<strong class="Lexia-Regular">01.</strong>
<span>The easiest thing you can do is download the quick start pack and modify as you wish :)</span>
</p>
<p class="clearfix">
<strong class="Lexia-Regular">02.</strong>
<span>If you don't want to do that then you can take the elements individually and build them into an existing site. Start by getting all of the dependant files that are listed up top, including dualSlider.</span>
</p>
<p class="alt clearfix">
<strong class="Lexia-Regular">03.</strong>
<span>You will also need some CSS to get this going, or it won't work at all. To get started just copy it from jquery.dualSlider.0.3.css.</span>
</p>
<p class="clearfix">
<strong class="Lexia-Regular">04.</strong>
<span>Now include all of these files in the <head> of your html document .</span>
</p>
<p class="alt clearfix">
<strong class="Lexia-Regular">05.</strong>
<span>Once this is all done you need to get the markup onto the page, you can view the source of this document to get an idea of how that works, it can either be static or come out of a database, but thats up to you. If it's out of a database no worries, the paging is built dynamically by the plugin.</span>
</p>
<p class="clearfix">
<strong class="Lexia-Regular">06.</strong>
<span>Initialise the plugin as per previously given, view source for an example.</span>
</p>
<p class="clearfix">
<strong class="Lexia-Regular">07.</strong>
<span>and relax...</span>
</p>
<br /></div></div>
</body>
</html>
JS代码(jquery.dualSlider.0.1.js):
/*** jQuery.fn.dualSlider - Dual sliders,why not?* Date:June 2010** @author Rob Phillips (Front End Developer - Hugo & Cat - http://www.hugoandcat.com)* @version 0.1** Requirements:* jquery.1.3.2.js - http://jquery.com/* jquery.easing.1.3.js - http://gsgd.co.uk/sandbox/jquery/easing/* jquery.timers-1.2.js - http://plugins.jquery.com/project/timers**/
(function($){
$.fn.dualSlider = function(options){
// default configuration properties var defaults ={
auto:true,autoDelay:10000,easingCarousel:'swing',easingDetails:'easeOutBack',durationCarousel:1000,durationDetails:600}
;
var options = $.extend(defaults,options);
this.each(function(){
var obj = $(this);
var carousel;
var carouselTotal = $(".backgrounds",obj).children().length;
var carouselPosition = 1;
var carouselLinkIndex = 1;
var carouselLinks = "";
var carouselwidth = $(obj).width();
var detailWidth = $(".panel .details_wrapper",obj).width();
//Set main background width $(".backgrounds",obj).css("width",carouselTotal * carouselwidth + "px");
//Set main detail width $(".details_wrapper .details",obj).css("width",detailWidth * carouselwidth + "px");
for (i = 1;
i <= carouselTotal;
i++){
(i == 1) ? carouselLinks += "<a rel=\"" + carouselLinkIndex + "\" title=\"Go to page " + carouselLinkIndex + " \" class=\"link" + carouselLinkIndex + " selected\" href=\"javascript:void(0)\">" + carouselLinkIndex + "</a>":carouselLinks += "<a rel=\"" + carouselLinkIndex + "\" title=\"Go to page " + carouselLinkIndex + " \" class=\"link" + carouselLinkIndex + "\" href=\"javascript:void(0)\" >" + carouselLinkIndex + "</a>";
carouselLinkIndex++;
}
$("#numbers",obj).html(carouselLinks);
//Bind carousel controls $(".next",obj).click(function(){
carouselPage(parseInt(carouselPosition + 1),false);
}
);
$(".previous",obj).click(function(){
carouselPage(parseInt(carouselPosition - 1),false);
}
);
$("#numbers a",obj).click(function(){
//alert($(this).attr("rel"));
carouselPage($(this).attr("rel"),false);
}
);
function checkPreviousNext(){
$("#numbers a",obj).removeClass("selected");
$("#numbers .link" + carouselPosition,obj).addClass("selected");
(carouselPosition == carouselTotal) ? $(".next",obj).hide():$(".next",obj).show();
(carouselPosition < 2) ? $(".previous",obj).hide():$(".previous",obj).show();
}
function carouselPage(x,y){
carouselPosition = parseFloat(x);
//Cancel timer if manual click if (y == false) $("body").stopTime("autoScroll");
var newPage = (x * carouselwidth) - carouselwidth;
var newPageDetail = (x * detailWidth) - detailWidth;
if (newPage != 0){
newPage = newPage * -1;
newPageDetail = newPageDetail * -1;
}
$(".carousel .backgrounds").animate({
marginLeft:newPage}
,{
"duration":options.durationCarousel,"easing":options.easingCarousel,complete:function(){
//Now animate the details $(".carousel .details").animate({
marginLeft:newPageDetail}
,{
"duration":options.durationDetails,"easing":options.easingDetails}
);
checkPreviousNext();
}
}
);
}
if (options.auto == true){
$("body").everyTime(options.autoDelay,"autoScroll",function(){
carouselPage(carouselPosition + 1,true);
}
,carouselTotal - 1);
}
}
);
}
;
}
)(jQuery);
CSS代码(reset.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
CSS代码(style.css):
/* DUALSLIDER CSS */
/* AUTHOR:ROB PHILLIPS = HUGO & CAT LTD */
/* VERSION:0.1 */
body{font:normal 62.5%/1.7em Arial,Tahoma,Helvetica,sans-serif;color:#807f83;margin:0 0 0 0;padding:0;background:#fff;text-align:center;}
a,a:visited{color:#ee2c74;text-decoration:none;}
a:hover{text-decoration:underline;}
strong{font-weight:bold;}
p,blockquote{margin:0 0 15px 0;}
.wrapper{font-size:1.2em;width:880px;margin:auto;text-align:left}
h1{font-size:4.0em;color:#000;margin:50px 0 0 0;}
h2{font-size:1.2em;color:#000;margin:0 0 25px 0;}
h3{font-size:1.4em;color:#000;margin:0 0 5px 0;}
.columns{margin:0 0 15px 0;border-bottom:1px solid #ccc;background:transparent url(../images/columns_bg.png) no-repeat 100% 100%;border-top:1px solid #ccc;padding:15px 0 10px 0;}
.columns .col{float:left;width:210px;margin:0 0 0 10px;}
.download,a:visited.download{float:right;display:block;background:#000 url(../images/carousel_download_bg.gif) no-repeat 9px 0.8em;padding:10px 10px 10px 35px;font-size:1.1em;color:#fff;margin:20px 20px 0 0;border:6px solid #eee;}
a:hover.download{border-color:#ccc;}
.download em{display:block;font-size:0.9em;}
.documentation{color:#666;}
.documentation p{margin:0 0 0 0;padding:10px 0 10px 0;border-bottom:1px dotted #ccc;}
.documentation p.alt{background:#eee;}
.documentation strong{float:left;width:50px;font-size:1.5em;color:#000;text-align:center;}
.documentation span{float:left;width:800px;display:block;}
分享到QQ
分享到微博
微信扫一扫
