<!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=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="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="js/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">
<div class="columns clearfix">
<div class="col c_1">
<h3 class="Lexia-Regular">dualSlider options</h3>
<p> auto:true,<br />
autoDelay: 6000,<br />
easingCarousel: "swing",<br />
easingDetails: "easeOutBack",<br />
durationCarousel: 1000,<br />
durationDetails: 600 </p>
</div>
<!-- /c_1 -->
<div class="col c_2">
<h3 class="Lexia-Regular">Dependencies</h3>
<p> <a href="www.jb51.net" title="Visit site" target="_blank">jquery.1.3.2.js</a><br />
<a href="www.jb51.net" title="Visit site" target="_blank">jquery.easing.1.3.js</a><br />
<a href="www.jb51.net" title="Visit site" target="_blank">jquery.timers-1.2.js</a> </p>
</div>
<!-- /c_2 -->
<div class="col c_3">
<h3 class="Lexia-Regular">Downloads</h3>
<p> <a href="scripts/jquery.dualSlider.0.3.js" title="Download">jquery.dualSlider.0.3.js</a><br />
<a href="scripts/jquery.dualSlider.0.3.min.js" title="Download">jquery.dualSlider.0.3.min.js</a> <a href="css/jquery.dualSlider.0.3.css" title="Download">jquery.dualSlider.0.3.css</a> </p>
</div>
<!-- /c_3 -->
<div class="col c_4">
<h3 class="Lexia-Regular">Changelog</h3>
<p> <strong>0.2</strong> - Tested and fixed for IE6+, auto loops, manual pause/play controls<br />
<strong>0.3</strong> - Now with seamless looping! </p>
</div>
<!-- /c_4 -->
</div>
<!-- /columns -->
<h3 class="Lexia-Regular">dualSlider demo</h3>
<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_1">
<object width="604" height="340">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10930565&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=10930565&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed>
</object>
</div>
<!-- /item -->
<div class="item item_2">
<object width="604" height="340">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12257932&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=12257932&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed>
</object>
</div>
<!-- /item -->
<div class="item item_3"> </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 <a href="dualSlider.zip" title="Download demo package">download</a> 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 <a href="css/jquery.dualSlider.0.3.css" title="Download">jquery.dualSlider.0.3.css.</a></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>
</div>
jquery半屏图片加说明文字左右切换焦点图(暂停开始).zip （34个子文件） 
132677881427745129 css 
lexia_std_bd-webfont.ttf 58KB lexia_std_bd-webfont.eot 58KB
lexia_std_bd-webfont.svg 73KB lexia_std_bd-webfont.woff 31KB lexia_std_rg-webfont.svg 72KB jquery.dualSlider.0.3.css 3KB lexia_std_rg-webfont.woff 31KB lexia_std_rg-webfont.eot 59KB reset.css 1KB fonts.css 6KB style.css 2KB jquery.dualSlider.0.2.css 3KB lexia_std_rg-webfont.ttf 59KB clearfix.css 321B images 
carousel_next_bg.gif 220B carousel_pause_bg.gif 103B carousel_play_bg.gif 203B carousel_panel_bg.gif 201B
carousel_bg_arrow.jpg 6KB carousel_bg_3.jpg 4KB carousel_bg_1.jpg 110KB carousel_download_bg.gif 224B carousel_bg_2.jpg 111KB carousel_previous_bg.gif 218B
columns_bg.png 2KB
index.html 8KB js jquery.dualSlider.0.2.min.js 4KB jquery.dualSlider.0.2.js 6KB jquery.dualSlider.0.3.js 7KB jquery.dualSlider.0.1.js 4KB jquery.dualSlider.0.3.min.js 4KB jquery-1.3.2.min.js 56KB jquery.timers-1.2.js 3KB jquery.easing.1.3.js 8KB资源评论
