码迷,mamicode.com
首页 > Web开发 > 详细

图片轮播(Jquery)

时间:2015-04-23 12:45:41      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用。

经过调整和整合,完成了第一版本的jquery.carousel.js,接下来先简单介绍界面和功能:

1、界面

技术分享

2、功能

点击切换、向前切换、向后切换、定时切换

技术分享

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: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)

标签:

原文地址:http://www.cnblogs.com/zhanqun/p/4449791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!