昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用。经过调整和整合,完成了第一版本的jquery.carousel.js,接下来先简单介绍界面和功能:1、界面2、功能点击切换、向前 ...
昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用。
经过调整和整合,完成了第一版本的jquery.carousel.js,接下来先简单介绍界面和功能:
1、界面
3、功能实现
(1)、测试代码
$(function () { var data = [ { src: 'Content/home/1.jpg', info: '1.jp**击图片导航到about.html', alt: '', href: 'about.html' }, { src: 'Content/home/2.jpg', info: '2.jpg' }, { src: 'Content/home/3.jpg', info: '3.jpg' }, { src: 'Content/home/4.jpg', info: '4.jpg' }, { src: 'Content/home/5.jpg', info: '5.jpg' }, { src: 'Content/home/6.jpg', info: '6.jpg' }, { src: 'Content/home/7.jpg', info: '7.jpg' } ]; var caro = $('#container').carousel({ data: [],// data, 'info-opacity': 0, height: 300, width: 400, interval: 2000, 'default-index': 2, 'show-index': true, 'nav-width': 20, 'nav-color': 'red', onChange: function (item) { } }); //caro.carousel('clear'); caro.carousel('loadData', data); var index = caro.carousel('getIndex'); var data = caro.carousel('getData', index); $('#next').click(function () { caro.carousel('next'); }); $('#prev').click(function () { caro.carousel('prev'); });});
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:图片轮播(Jquery)
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。