jQuery轮播图代码

Html

Css

1
2
3
<div class="container">
    <div id="slider"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
.container{
    width:1000px;
    margin: 10px auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
 * Created by caotian on 9/11/16.
 */
var data = [{
        "title": "标题1",
        "pic": "http://www.jq22.com/img/cs/500x300-1.png",
        "link": "#"
    },
    {
        "title": "标题2",
        "pic": "http://www.jq22.com/img/cs/500x300-2.png",
        "link": "#"
    },
    {
        "title": "标题3",
        "pic": "http://www.jq22.com/img/cs/500x300-3.png",
        "link": "#"
    }
];
(function($) {
    var defaults = {
        width: 500,
        height: 300,
        btnSize: 20,
        interval: 5
    };
    var settings;
    var content;
    var currentIndex = 0;
    var btnLeft;
    var btnRight;
    $.fn.dllslider = function(options) {
        settings = $.extend({}, defaults, options);
        this.css({
            width: settings.width + 'px',
            height: settings.height + 'px',
            overflow: 'hidden',
            position: 'relative',
            background: 'red'
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

/**
 * Created by caotian on 9/11/16.
 */

var data = [{
        "title": "标题1",
        "pic": "http://www.jq22.com/img/cs/500x300-1.png",
        "link": "#"
    },
    {
        "title": "标题2",
        "pic": "http://www.jq22.com/img/cs/500x300-2.png",
        "link": "#"
    },
    {
        "title": "标题3",
        "pic": "http://www.jq22.com/img/cs/500x300-3.png",
        "link": "#"
    }
];

(function($) {
    var defaults = {
        width: 500,
        height: 300,
        btnSize: 20,
        interval: 5
    };
    var settings;
    var content;
    var currentIndex = 0;
    var btnLeft;
    var btnRight;

$.fn.dllslider = function(options) {
        settings = $.extend({}, defaults, options);

this.css({
            width: settings.width + 'px',
            height: settings.height + 'px',
            overflow: 'hidden',
            position: 'relative',
            background: 'red'
        });

content = $("<div class='content'></div>");
        this.append(content);

var pics = [];
        $.each(settings.data, function(index, item) {
            var picStr = "<div class='pic' style='float:left;'><a href='" + item.link + "' target='_blank'><img src='" + item.pic + "' style='width:" + settings.width + "px;height:" + settings.height + "px'></a></div>";
            pics.push(picStr);
        });

content.append(pics.join(''));
        content.css({
            position: 'absolute',
            'width': settings.width * settings.data.length
        });

//添加左按钮
        btnLeft = $("<a href='javascript:;'><</a>");
        this.append(btnLeft);
        btnLeft.css({
            display: 'block',
            position: 'absolute',
            width: settings.btnSize,
            height: settings.btnSize,
            background: '#000',
            opacity: 0.5,
            color: '#fff',
            'text-align': 'center',
            'text-decoration': 'none',
            top: (settings.height - settings.btnSize) / 2 + 'px'
        });
        btnLeft.click(function() {
            slideLeft();
        });

//添加右按钮
        btnRight = $("<a href='javascript:;'>></a>");
        this.append(btnRight);
        btnRight.css({
            display: 'block',
            position: 'absolute',
            width: settings.btnSize,
            height: settings.btnSize,
            background: '#000',
            opacity: 0.5,
            color: '#fff',
            'text-align': 'center',
            'text-decoration': 'none',
            right: 0,
            top: (settings.height - settings.btnSize) / 2 + 'px'
        });
        btnRight.click(function() {
            slideRight();
        });

if (settings.interval > 0) {
            setInterval(function() {
                slideRight();
            }, settings.interval * 1000);
        }
    };

function slideLeft() {
        currentIndex--;
        console.log(currentIndex);

if (currentIndex < 0) {
            currentIndex = settings.data.length - 1;
            content.animate({
                left: -currentIndex * settings.width
            });
        } else {
            content.animate({
                left: '+=' + settings.width
            });
        }
    }

function slideRight() {
        currentIndex++;
        console.log(currentIndex);

if (currentIndex >= settings.data.length) {
            currentIndex = 0;
            content.animate({
                left: 0
            });
        } else {
            content.animate({
                left: '-=' + settings.width
            });
        }
    }
})(jQuery);

$("#slider").dllslider({
    interval: 6,
    data: data
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

jQuery轮播图代码



代码描述：jquery大图切换,简单的封装

我把代码封装起来了，引用的时候，传参数就行。
比如
$("#slider").dllslider({ interval:6, data:data });

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

糖小宝2016

相关代码

jQuery轮播图代码

最新