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
<< 上一篇