图片轮播(Jquery)

昨天在博客园里面看到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');  });});

(2)、代码详细介绍

默认属性包含以下部分：

  $.fn.carousel.defaults = {    'data': [],    'height': 'auto',    'width': 'auto',    'info-background-color': 'black',      //显示信息背景颜色    'info-height': 40,              //显示信息背景的高度    'info-opacity': 0.1,             //显示信息背景的透明    'info-style': 'font-size:12pt;color:black;', //显示信息样式    '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').options;    },    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').options;      var panel = $('.my-panel', jq[0]);      prev(panel, options);    },    next: function (jq) {      var options = $.data(jq[0], 'carousel').options;      var panel = $('.my-panel', jq[0]);      next(panel, options);    },    getIndex: function (jq) {      var options = $.data(jq[0], 'carousel').options;      return options['now-index'];    },    getData: function (jq, index) {      var options = $.data(jq[0], 'carousel').options;      return options.data[index];    }  };

最后奉上demo

 由于水平有限，代码中难免会出现错误或者不完善的情况，还请各位大婶指出~

原标题：图片轮播(Jquery)

关键词：jquery