利用jQuery实现sudoSlider插件



7 27 10



特效描述:利用jQuery实现 sudoSlider插件,利用jQuery实现sudoSlider插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.sudoSlider.js"></script>
<script type="Text/Javascript" src="js/jquery.address-1.2.2.min.js"></script>

3. HTML代码

<div id="container" style="position:relative;">
	<div class="topsy_widget_data" style="position:absolute;top:3px;left:270px;"></div>
	<h1 style="margin-top:20px;">Sudo Slider jQuery Plugin<p style="font-size:60%;letter-spacing:1px;">Freedom to the designer</p></h1><br />
	<div id="wrapper">
		<div class="tab"><h3 class="tabtxt"><a href="#" class="tablink" rel="1">Overwiew</a></h3></div>
		<div class="tab"><h3 class="tabtxt"><a href="#" class="tablink" rel="2">See it</a></h3></div>
		<div class="tab"><h3 class="tabtxt"><a href="#" class="tablink" rel="3">Get it</a></h3></div>
		<div class="tab lasttab"><h3 class="tabtxt"><a href="#" class="tablink" rel="4">Docs</a></h3></div>
		<div class="boxholder">
			<div class="box">
				<div id="slider" class="slider2">
					<ul class="sliderul">
						<li class="sliderli">
							<div class="slide">
								<h2>Sudo Slider jQuery plugin</h2>
								<p>Essentially, Sudo Slider is the slider plugin that allows the designer to do whatever he wants, with whatever HTML he want. </p>
								<h3 style="margin-left:7px;">Features</h3>
								<ul>
									<li>
										Complete freedom to choose your HTML. Only restriction is that the slider is built from an unordered list. 
									</li>
									<li>
										Sudo Slider can <a href="demo.html#slide8">load images and html with Ajax</a>
									</li>
									<li>
										Degrades nicely if no JavaScript. (Unless AJAX is used). 
									</li>
									<li>
										<a href="demo.html">Multiple sliders pr. page</a>.
									</li>
									<li>
										Choose between a <a href="demo.html#slide1">normal slide animation</a>, or a <a href="demo.html#slide3">fade animation</a>.
									</li>
									<li>
										<a href="demo.html#slide6">Bookmark and browser forward/back button support. </a>
									</li>
									<li>
										Do almost anything you can imagine a slider doing. 
									</li>
									<li>
										Fully supports IE6+, FF, Chrome, Opera, Safari etc.
									</li>
									<li>
										Handle any html inside the slides (<a href="javascript:void(0);" class="customLink" rel="2">images</a>, <a href="javascript:void(0);" class="customLink" rel="3">text</a>, <a href="javascript:void(0);" class="customLink" rel="4">flash-videos</a>, <a href="javascript:void(0);" class="customLink" rel="5">a form (with validation)</a> etc.)
									</li>
									<li>
										<a href="demo.html#slide11">Slide automatically</a>, turning it into a "slideshow".
									</li>
									<li>
										It's <a href="basic.html">easy to set up</a>, and even easier to customize. 
									</li>
									<li>
										It can slide <a href="demo.html#slide4">continuously</a>, meaning that it goes in a loop if you keep sliding in one direction. 
									</li>
									<li>
										Only 10KB minified
									</li>
								</ul>
							</div>
						</li>
						<li class="sliderli">
							<div class="slide">
								<h2>Demonstrations</h2>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
										<img src="images/basic.png" alt="basic"/>
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="basic.html">The most basic slider possible using Sudo Slider.</a>
									</div>
								</div>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/basic_ajax.png" alt="basic ajax"/>
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="basic_ajax.html">The very basics of Ajax loaded content using Sudo Slider.</a>
									</div>
								</div>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/full.png" alt="basic ajax"/>
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="demo.html">17 sliders on one page, showing off most of the features.</a>
									</div>
								</div>
							</div>
						</li>
						<li class="sliderli">
							<div class="slide">
								<h2>Downloads</h2>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/download.png" width="48" alt="download" />
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="Sudo Slider 1.0.7.zip">Download the full package (1.0.7)</a>
									</div>
								</div>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/js.png" width="48" alt="download" />
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="js/jquery.sudoSlider.min.js">Download the JavaScript minified 10KB (1.0.7)</a>
									</div>
								</div>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/js.png" width="48" alt="download" />
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="js/jquery.sudoSlider.js">Download the JavaScript development version 33KB (1.0.7)</a>
									</div>
								</div>
								<h1 style="margin-top:10px;">Keep the project alive, donate!</h1>
								<form action="http://51qianduan.com" method="post">
								<input type="hidden" name="cmd" value="_s-xclick">
								<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
								">
								<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
								<img alt="" border="0" src="https://www.paypal.com/da_DK/i/scr/pixel.gif" width="1" height="1">
								</form><br />
								<h1>Release notes:</h1>
								<h2>Modifications and fixes since 1.0</h2>
								<h3 style="margin-bottom:-7px;">1.0.1:</h3>
								Bug fix: Fixed crossfade for IE6 + IE7 (didn't accept position:absolute, unless there's a top:0 and left:0 with it).
								<h3 style="margin-bottom:-7px;">1.0.2:</h3>
								Change in docs: Fixed some links that were wrong in index.html. 
								<h3 style="margin-bottom:-7px;">1.0.3:</h3>
								Bug fix: Fixed last slide not loading if using ajax and continuous. <br />
								Change in Javascript: when CustomLinks fade away, their children doesn't anymore.  <br />
								Change in docs: now using Jquery Address 1.2.2 in demo instead of 1.1 (no change of code. ). 
								<h3 style="margin-bottom:-7px;">1.0.4:</h3>
								Bug fix: Fixed beforeAniFunc not executing on a "continuous clone".  <br />
								Change in docs: Added captions demo.  <br />
								Added feature: Made the script change "position" to "relative" if fade is enabled (and the position is it's default value ("static")). <br />
								Change in Javascript: The html of the previous button is now positioned before the html of the next button. 
								<h3 style="margin-bottom:-7px;">1.0.5:</h3>
								Change in docs: Added link to http://plugins.jquery.com/project/SudoSlider in the "Docs" tap in index.html, that's now the official way to report a bug.  <br />
								Added feature: Added a "destroy" action. 
								<h3 style="margin-bottom:-7px;">1.0.6:</h3>
								Bug fix: Fixed customLinks and first/last buttons fading out when continuous:true. <br />
								The 'destroy' action now also removes all click bindings on the customLinks. 
								<h3 style="margin-bottom:-7px;">1.0.7:</h3>
								Bug fix: Fixed content visible (that shouldn't be it) in IE6 and IE7. (Bug introduced in 1.0.4)
							</div>
						</li>
						<li class="sliderli">
							<div class="slide">
								<h2>Documentation</h2>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/howto.png" width="48" alt="download" />
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="howto.html">How to use Sudo Slider</a>
									</div>
								</div>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/setting.png" width="48" alt="download" />
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="settings.html">The different settings</a>
									</div>
								</div>
								<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
									<div style="float:left;height:48px;">
									<img src="images/designers guide.png" width="48" alt="download" />
									</div>
									<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
										<a href="designers guide.html">Designers guide to Sudo Slider</a>
									</div>
								</div>
								<h1>Support and bug reports</h1>
								You would be very helpfull if you submit any bug-report or support-request here
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<br />
	</div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文字滑动 文字滑块 文字切换 文字选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到