Example 1 - custom width and height

HTML


		
		<div id="example1">
		<ul>
		<li><img src="images/disney1.jpg"></li>
		<li><img src="images/disney2.jpg"></li>
		<li><img src="images/disney3.jpg"></li>
		<li><img src="images/disney4.jpg"></li>
		<li><img src="images/disney5.jpg"></li>
		<li><img src="images/disney6.jpg"></li>
		</ul>
		</div>
		

Javascript


		
		$(document).ready(function(){
		$("#example1").tiksluscarouse({width:640,height:480});
		});
	
		

Example 2 - CSS3 animation using animate.css

HTML


		
		<div id="example2">
		<ul>
	<li><img src="images/disney1.jpg"></li>
		<li><img src="images/disney2.jpg"></li>
		<li><img src="images/disney3.jpg"></li>
		<li><img src="images/disney4"></li>
		<li><img src="images/disney5.jpg"></li>
		<li><img src="images/disney6.jpg"></li>
		</ul>
		</div>
		

Javascript


		
		$(document).ready(function(){
		$("#example2").tiksluscarouse({width:640,height:480,customAnimationClassIn:'bounceIn',customAnimationClassOut:'bounceOut',type:'custom'});
		});
	
		

Example 3 - Adding Captions

HTML


		
		<div id="example3">
		<ul>
		<li><img src="images/disney1.jpg"></li>
		<li><img src="images/disney2.jpg"></li>
		<li><img src="images/disney3.jpg"></li>
		<li><img src="images/disney4"></li>
		<li><img src="images/disney5.jpg"></li>
		<li><img src="images/disney6.jpg"></li>		</ul>
		</div>
		

Javascript


		
		$(document).ready(function(){
		$("#example3").tiksluscarouse({width:640,height:480});
		});
	
		

Example 4 - Rotating images

HTML


		
		<div id="example4">
		<ul>
		<li><img src="images/s1.jpg"></li>
		<li><img src="images/s2.jpg"></li>
		<li><img src="images/s3.jpg"></li>
		<li><img src="images/s4.jpg"></li>
		<li><img src="images/s5.jpg"></li>
		<li><img src="images/s6.jpg"></li>
		</ul>
		</div>
		

Javascript


		
		$(document).ready(function(){
		$("#example4").tiksluscarouse({width:259,height:194,type:'rotate'});
		});
	
		

Example 5 - Animating Captions

HTML


		
		<div id="example5">
		<ul>
		<li><img src="images/disney1.jpg"></li>
		<li><img src="images/disney2.jpg"></li>
		<li><img src="images/disney3.jpg"></li>
		<li><img src="images/disney4"></li>
		<li><img src="images/disney5.jpg"></li>
		<li><img src="images/disney6.jpg"></li>	</ul>
		</div>
		

Javascript


		
		$(document).ready(function(){
		$("#example5").tiksluscarouse({width:640,height:480,customAnimationCaption:'bounceIn'});
		});
	
		

Example 6 - full screen (do not specify width and height)

HTML


		
		<div id="example6">
		<ul>
		<li><img src="images/disney1.jpg"></li>
		<li><img src="images/disney2.jpg"></li>
		<li><img src="images/disney3.jpg"></li>
		<li><img src="images/disney4"></li>
		<li><img src="images/disney5.jpg"></li>
		<li><img src="images/disney6.jpg"></li>	</ul>
		</div>
		

Javascript


		
		$(document).ready(function(){
		$("#example6").tiksluscarouse();
		});
	
		

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:站长素材