百度有钱最新剩余邀请码： J7XAN6PB J7xc9119d J7XFF50F J7XGNQT6 J7XH81I9 J7XHZNMK供大家使用？

来源：蜘蛛抓取(WebSpider) 时间：2009-04-12 20:34 标签： xc9119d10amr
您所在的位置： &
图片轮播(Jquery)
时间： 编辑：明月zq 来源：本站整理
昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章，觉得是否自己可以将该功能写成Jquery插件的形式，也方便之后如果需要的时候可以直接使用。
经过调整和整合，完成了第一版本的jquery.carousel.,接下来先简单介绍界面和功能：
点击切换、向前切换、向后切换、定时切换
3、功能实现
(1)、测试代码
$(function () {
var data = [
{ src: 'Content/home/1.jpg', info: '1.jpg点击图片导航到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');
(2)、代码详细介绍
默认属性包含以下部分：
$.fn.carousel.defaults = {
'data': [],
'height': 'auto',
'width': 'auto',
'info-background-color': 'black',
//显示信息背景颜色
'info-height': 40,
//显示信息背景的高度
'info-opacity': 0.1,
//显示信息背景的透明
'info-style': 'font-size:12color:', //显示信息样式
'default-index': 0,
//初始时默认序号
//'nav-width': 10,
//左右侧导航宽度，未设置是默认为heihht的一半（height不为auto时，否则为20）
'nav-color': '#f6fafa',
//左右侧导航颜色
'interval': 5000,
//自动切换周期
'show-index': false,
//默认不显示右下侧按钮上的序号
'auto': true,
//自动切换
'border': true,
//显示边框
'margin': '30px auto',
onChange: function (item) { }
$.fn.carousel.methods = {
options: function (jq) {
return $.data(jq[0], 'carousel').
clear: function (jq) {
clearData(jq[0]);
loadData: function (jq, data) {
clearData(jq[0]);
bindingData(jq[0], data);
prev: function (jq) {
var options = $.data(jq[0], 'carousel').
var panel = $('.my-panel', jq[0]);
prev(panel, options);
next: function (jq) {
var options = $.data(jq[0], 'carousel').
var panel = $('.my-panel', jq[0]);
next(panel, options);
getIndex: function (jq) {
var options = $.data(jq[0], 'carousel').
return options['now-index'];
getData: function (jq, index) {
var options = $.data(jq[0], 'carousel').
return options.data[index];
最后奉上demo
&由于水平有限，代码中难免会出现错误或者不完善的情况，还请各位大婶指出~
热门关键字

我要回帖

更多关于 xc9119d10amr 的文章

 

随机推荐