分類
网站

用sliderkit制作图片切换效果

需要的材料：
  • jquery.sliderkit.1.9.2.pack.js(9.04KB)
  • sliderkit.imagefx.1.0.pack.js(4.63KB)
  • jquery.easing.1.3.min.js(4.49KB)
  • sliderkit-core.css(3.58KB)
  • jquery.min.js(使用Google CDN不是很稳定https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，微软的CDN好些http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js)
sliderkit网站 html代码： 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Widget styles -->
 <link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <!-- Slider Kit core -->
 <script type="text/javascript" src="js/jquery.sliderkit.1.9.2.pack.js"></script>
 <!-- Slider Kit add-ons (optional) -->
 <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
 <script type="text/javascript" src="js/sliderkit.imagefx.1.0.pack.js"></script>
 <!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
				$(".transition-demo01").sliderkit({
					auto:1,
					autospeed:5500,
					autostill:true,
					circular:true,
					panelfx:'fancy',
					imagefx:{
						fxType: 'random' // curtain, zipper, wave, fountain, random
					},
					debug:1
				});

				// Get the sliderkit object data
				var myGallery01 = $( '.transition-demo01' ).data( 'sliderkit' );

				// Links handlers
				$("#curtain_default").click(function(){
					myGallery01.options.imagefx.fxType = 'curtain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#curtain_dirreverse").click(function(){
					myGallery01.options.imagefx.fxType = 'curtain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'reverse';
					return false;
				});
				$("#curtain_flipdefault").click(function(){
					myGallery01.options.imagefx.fxType = 'curtain';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#curtain_flipdirreverse").click(function(){
					myGallery01.options.imagefx.fxType = 'curtain';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'reverse';
					return false;
				});
				$("#curtain_defaultdirauto").click(function(){
					myGallery01.options.imagefx.fxType = 'curtain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'auto';
					return false;
				});
				$("#wave_default").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#wave_default_dirright").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'reverse';
					return false;
				});
				$("#wave_reverse_dirleft").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#wave_reverse_dirright").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'reverse';
					return false;
				});
				$("#wave_flip_dirleft").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#wave_flip_dirright").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'reverse';
					return false;
				});
				$("#wave_flipreverse_dirleft").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#wave_flipreverse_dirright").click(function(){
					myGallery01.options.imagefx.fxType = 'wave';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'reverse';
					return false;
				});
				$("#fountain_default").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#fountain_default_random").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'random';
					return false;
				});
				$("#fountain_reverse").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#fountain_reverse_random").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'default';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'random';
					return false;
				});
				$("#fountain_flip_default").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#fountain_flip_random").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'default';
					myGallery01.options.imagefx.stripDirection = 'random';
					return false;
				});
				$("#fountain_flip_reverse").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'default';
					return false;
				});
				$("#fountain_flip_reverse_random").click(function(){
					myGallery01.options.imagefx.fxType = 'fountain';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					myGallery01.options.imagefx.stripPosition = 'reverse';
					myGallery01.options.imagefx.stripDirection = 'random';
					return false;
				});
				$("#zipper_default").click(function(){
					myGallery01.options.imagefx.fxType = 'zipper';
					myGallery01.options.imagefx.stripOrientation = 'default';
					return false;
				});
				$("#zipper_flip").click(function(){
					myGallery01.options.imagefx.fxType = 'zipper';
					myGallery01.options.imagefx.stripOrientation = 'reverse';
					return false;
				});

				/* Transitions settings */
				$( '#transitionsSettings #fxDelay' ).change(function () {
					myGallery01.options.imagefx.fxDelay =  $( 'option:selected', $(this) ).text();
				});
				$( '#transitionsSettings #fxDuration' ).change(function () {
					myGallery01.options.imagefx.fxDuration =  parseInt($( 'option:selected', $(this) ).text());
				});

			});
		</script>

</head>
<body>

		<div id="page" class="inner layout-1col" style="position:relative;">
			<div id="content" class="wide">
				<h1 class="code-first">ImageFx add-on</h1>

				<h2>Random effects, playing with transitions</h2>

				<!-- Start example #01 -->
				<div class="sliderkit photoslider-mini transition-demo01">						
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<img src="photos/01.jpg" alt="1" />
						</div>
						<div class="sliderkit-panel">
							<img src="photos/02.jpg" alt="2" />
						</div>
						<div class="sliderkit-panel">
							<img src="photos/03.jpg" alt="3" />
						</div>
						<div class="sliderkit-panel">
							<img src="photos/04.jpg" alt="[4]" />
						</div>
						<div class="sliderkit-panel">
							<img src="photos/05.jpg" alt="[5]" />
						</div>
					</div>
				</div>
			</div>
		</div>
</body>
</html>
适配图片大小在sliderkit-core.css中修改“.photoslider-mini”。 切换速度在html文件中修改“autospeed”，单位毫秒，默认4000。

本文更新於 2014/09/07。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *