jQuery简单的js+div+css图片幻灯片效果代码

网站经常用到的jQuery幻灯片,需要元素结构很简单,只需要调用函数。

jQuery部分代码:


$(function(){  
	$("#KinSlideshow").KinSlideshow({  
		moveStyle:"right",	
		titleBar:{titleBar_height:30,titleBar_bgColor:"#08355c",titleBar_alpha:0.5},	
		titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_weight:"normal"},	
		btn:{
			btn_bgColor:"#FFFFFF",btn_bgHoverColor:"#1072aa",btn_fontColor:"#000000", 	
			btn_fontHoverColor:"#FFFFFF",btn_borderColor:"#cccccc",  
			btn_borderHoverColor:"#1188c0",btn_borderWidth:1
		}  
	});  
})  
HTML部分代码:


<div id="KinSlideshow" style="visibility:hidden;">  
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a>  
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a>  
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a>  
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a>  
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a>  
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" /></a>  
</div>  

演示地址:http://www.phplover.cn/demo/fdp/demo3.html


网友留言(0条)

发表评论