首先非常感谢网友zoeDylan的无私分享,此作品是他写的原创jquery插件,实现了图片轮播功能,jquery插件名称为zoeDylan.ImgChange,图片路径、跳转链接、提示标题都是有动态数组来配置,jquery插件可灵活配置6个参数, height高、width宽、mgs图片地址、links点击地址、tips图片说明、timers自动切换时间,zoeDylan.ImgChange-1.0.0.js文件里面的功能注释也写得非常详细,对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。
页面初始化jquery代码如下:
var a_imgs = new Array(//插入图片地址
'http://ww1.sinaimg.cn/mw690/adde8400gw1ebwz3igq33j20fk08pwfu.jpg',
'http://ww1.sinaimg.cn/mw690/adde8400gw1ebvqqzln0uj20ex09774z.jpg',
'http://ww2.sinaimg.cn/mw690/adde8400gw1ebn1vuhpzcj20k00agq4v.jpg',
'http://ww4.sinaimg.cn/mw690/adde8400gw1ebn1vqhh67j20k00aggo0.jpg'
),
a_links = new Array(//点击图片跳转的网址
'www.jq-school.com',
'www.jq-school.com',
'www.jq-school.com',
'www.jq-school.com'
),
a_tips = new Array(//鼠标停靠的提示
'百度',
'腾讯',
'谷歌',
'中关村'
);
$(function () {
$('#imgc').zoeDylan_ImageChange({//设置
width: 500,
height: 300,
imgs: a_imgs,
links: a_links,
tips: a_tips,
timers: 2000
});
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友zoeDylan 幻灯片 滑动插件 图片滚动 图片轮播 Jquery焦点图 ImgChange