JS图片切换，支持自定义，基于JQuery

已于 2025-05-15 08:26:47 修改
阅读量1.6k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： js轮播图 图片切换 jquery插件
于 2009-07-04 23:36:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/microji/article/details/4322321
一款基于JQuery的图片轮播插件，支持多种特效切换、自定义按钮样式及位置等功能，适用于网页多组图片轮播场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

js实现的基于jQuery的图片轮播插件，代码很简单，调用简洁，只需要三个文件，jquery.js、smallslider.css样式文件，smallslider.js 插件文件，放在本文末尾。目前不能算完美，但非常好用，尤其是html页面代码整洁。

自己写的一个JQuery插件，支持多个同时使用，参考了 绯雨de天空写的一个特效：http://feiyu.asgard.cn/article_184.html  (链接已经失效)
作者承诺以后会增加功能，但现在，还没有，所以呢，我就先写了一个,模式参考了，但代码完全是自己写的，读者可以自行比较，

调用非常容易，按钮完全有js动态产生，不用手写。支持页面多组图片同时使用，相互自己不影响，在鼠标放到图片上时，停止图片播放，
鼠标移开后，再次播放，这里由于采用了一对一数组记录关系，即一个播放对象，记录当前一个setTimeout返回值，保证了 setTimeout函数调用后，不会产生内存泄漏。
特效支持的很有限，毕竟个人觉得过于华丽丽的切换特效不是js的事情，那是谁的事情呀？那是flash干的事！
如果有更好的意见，可以给我留言。

支持功能：
1，支持自定义图标按钮
2，支持多组同时播放，互不影响
3，支持三种切换特效
4，支持自定义按钮出现位置,共有四个值：LeftTop，LeftBottom,RightTop,RightBottom
5，支持自定义是否出现标题文本
6，支持自定义标题文本是否可点击
7，支持自定义图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
8，支持自定义按钮间间距
9，纯js生成按钮和文本，调用更加简洁，明了

测试浏览器： IE 6,7,8 Firefox 3+ Opera 9.6 , google chrome
效果展示：

直接拷贝下面的完整示例代码，保存成本地的html文件，替换里面的图片链接，然后浏览器打开。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmallSlider演示</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 /*
 *   Document       : jquery.smallslider.js
 *   Created on     : 2009-7-3, 11:56:24
 *   Author         : AllinJS
 *   Description    : JQuery plugin for switch images
 *   Version        : 0.1
 */
(function ($) {

$.fn.smallslider = function (options) {
    var defaults = {
        Time: 3000,              // 切换时间间隔，单位毫秒，1秒=1000毫秒
        ButtonImage: '',         // 按钮的背景图
        ButtonImageOn: '',       // 当播放到某按钮时，按钮的背景图
        ShowText: true,          // 是否显示标题，如果不显示，则只显示按钮
        TextLink: true,          // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
        AutoStart: true,         // 是否自动开始播放
        SwitchMode: 'Click',     // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
        SwitchEffect: 'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
        SwitchTime: 300,         // 切换时间，单位毫秒，1秒=1000毫秒
        Position: 'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom   
        OffsetX: 10,             // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
        OffsetY: 4,              // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
        ButtonSpace: 4           // 按钮之间的间隔 单位为像素，但不要加px
    };
    var opts = $.extend(defaults, options);
    var $this = $(this);
    var slider = new Array();
    var ButtonBgColor = '';
    var ButtonBgColorOn = '';
    if ($this.length > 0) {
        $.each($this, function () {
            Init(this);
            CreateButtons(this, 0);
            if (opts.AutoStart) StartSlider(this, 0);
            onImage(this);
        });
    }

    function onImage(obj) {
        $(obj).find('img').hover(function () {
            StopSlider(obj);
        }, function () {
            var i = $(obj).find('li').index($(obj).find('.current-li'));
            StartSlider(obj, i + 1);
        });
    }
    function Slide(obj, index) {
        StopSlider(obj); // 先清楚掉以前的setTimeOut;
        // index表示当前停止在哪个元素上上面，其上一张为 prev，后一个，也就是将要显示的为 next
        var listArr = $(obj).find('li');
        var count = listArr.length;
        if (index > count - 1) index = 0;
        // index 可能会传入-1 值，表示当前需要切换到状态0，即第一张图片，那么next正好是0
        // 所以这里需要先经过运算，得出next，然后再进行限定0 - count-1之间

        var prev = index - 1 < -1 ? count - 1 : index - 1;
        var next = index + 1 < count ? index + 1 : 0;

        if (index < 0) index = 0;
        if (next < 0) next = 0;
        listArr.hide();
        listArr.eq(index).show();
        switch (opts.SwitchEffect) {
            case 'fadeOut':
                listArr.eq(index).fadeOut(opts.SwitchTime, function () {
                    listArr.eq(next).show();
                });
                break;
            case 'fadeIn':
                listArr.eq(index).hide();
                listArr.eq(next).fadeIn(opts.SwitchTime);
                break;
            case 'slideUp':
                listArr.eq(index).slideUp(opts.SwitchTime, function () { listArr.hide(); listArr.eq(next).show(); });
                break;
            case 'slideDown':
                listArr.eq(index).hide();
                listArr.eq(next).slideDown(opts.SwitchTime, function () { listArr.hide(); listArr.eq(next).show(); });
                break;
            case 'none':
                listArr.eq(index).hide();
                listArr.eq(next).show();
                break;
            default:
                listArr.eq(index).hide();
                listArr.eq(next).show();
                break;
        }
        // 切换表示当前元素
        $(obj).find('li').removeClass('current-li');
        $(obj).find('li').eq(index).addClass('current-li');
        $(obj).find('span').removeClass('current-btn');
        $(obj).find('span').eq(next).addClass('current-btn');
        // 切背景图标
        if (opts.ButtonImageOn != '') {
            if (opts.ButtonImage != '') {
                $(obj).find('span').css({ background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
            } else {
                $(obj).find('span').css({ backgroundColor: ButtonBgColor, backgroundImage: '', borderWidth: '1px' });
            }
            $(obj).find('span.current-btn').css({ background: 'transparent url(' + opts.ButtonImageOn + ') no-repeat 0 0', borderWidth: 0 });
        }
        //切换标题
        var tit = $(obj).find('img').eq(next).attr('alt');
        if (opts.TextLink) {
            tit = '<a href="' + $(obj).find('img').eq(next).parent('a').attr('href') + '">' + tit + '</a>';
        }
        $(obj).find('h3').html(tit);
        ++index;
        index = index > count - 1 ? 0 : index;
        StartSlider(obj, index);
    }

    function CreateButtons(obj, index) {

        var listArr = $(obj).find('li');
        var count = listArr.length;
        var buttons = '';
        for (var i = 1; i <= count; i++) {
            buttons += '<span>' + i + '</span>';
        }
        buttons = '<div class="smallslider-btns">' + buttons + '</div>';

        var left = 0, right = 0, top = 0, bottom = 0;
        var style_btns = {}, style_lays = {};

        switch (opts.Position) {
            case 'LeftTop':
                left = opts.OffsetX;
                top = opts.OffsetY;
                style_btns = { left: left + 'px', top: top + 'px' };
                style_lays = { left: 0, top: 0, textAlign: 'right' };
                break;
            case 'RightTop':
                right = opts.OffsetX;
                top = opts.OffsetY;
                style_btns = { right: right + 'px', top: top + 'px' };
                style_lays = { left: 0, top: 0, textAlign: 'left' };
                break;
            case 'RightBottom':
                right = opts.OffsetX;
                bottom = opts.OffsetY;
                style_btns = { right: right + 'px', bottom: bottom + 'px' };
                style_lays = { left: 0, bottom: 0, textAlign: 'left' };
                break;
            case 'LeftBottom':
                left = opts.OffsetX;
                bottom = opts.OffsetY;
                style_btns = { left: left + 'px', bottom: bottom + 'px' };
                style_lays = { left: 0, bottom: 0, textAlign: 'right' };
                break;

        }

        $(buttons).css(style_btns).appendTo($(obj));
        if (opts.ShowText) {
            $('<div class="smallslider-lay"></div>').css(style_lays).appendTo($(obj));
            var tit = $(obj).find('img').eq(index).attr('alt');
            if (opts.TextLink) {
                tit = '<a href="' + $(obj).find('img').eq(index).parent('a').attr('href') + '">' + tit + '</a>';
            }
            $('<h3></h3>').html(tit).css(style_lays).appendTo($(obj));
        }
        $(obj).find('span:not(:first)').css({ marginLeft: opts.ButtonSpace + 'px' });
        $(obj).find('span').removeClass('current-btn');
        $(obj).find('span').eq(index).addClass('current-btn');

        if (opts.ButtonImage != '') {
            $(obj).find('span').css({ border: 0, background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
        }

        if (opts.ButtonImageOn != '') {
            if (opts.ButtonImage != '') {
                $(obj).find('span').css({ background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
            } else {
                $(obj).find('span').css({ backgroundColor: ButtonBgColor, backgroundImage: '', borderWidth: '1px' });
            }
            $(obj).find('span.current-btn').css({ background: 'transparent url(' + opts.ButtonImageOn + ') no-repeat 0 0', borderWidth: 0 });
        }

        if (opts.SwitchMode == 'Click') {
            $(obj).find('span').click(function () {
                var ix = $(obj).find('span').index($(this));
                Slide(obj, ix - 1); // 传入ix-1表示当前是他前面一个，则在调用函数后，就会自然的切换到下一张图片，正好是ix
            });
        } else if (opts.SwitchMode == 'Hover') {
            $(obj).find('span').hover(function () {
                var ix = $(obj).find('span').index($(this));
                Slide(obj, ix - 1);
            });
        }
        ButtonBgColor = $(obj).find('span:not(.current-btn)').css('backgroundColor');
        ButtonBgColorOn = $(obj).find('span.current-btn').css('backgroundColor');
    }

    function Init(obj) {
        var listArr = $(obj).find('li');
        listArr.hide();
        listArr.eq(0).show();
    }

    function StartSlider(obj, index) {
        // 由第几个序号开始 初始为-1
        var st = setTimeout(function () {
            Slide(obj, index);
        }, opts.Time);

        var i = $this.index(obj);
        slider[i] = st;
    }

    function StopSlider(obj) {
        var i = $this.index(obj);
        clearTimeout(slider[i]);
        slider[i] = 0;
    }

    return this.each(function () {
        this.AccessStop = function () {
            $.each($this, function () {
                StopSlider($this);
            });
        }
    });
}
})(jQuery);

</script>
<style type="text/css">
.smallslider{position:relative;padding:0;margin:0 auto;overflow:hidden; width: 960px; height: 250px;}
.smallslider ul{list-style-type:none;padding:0;margin:0;position: absolute;width:auto;height:auto;}
.smallslider li{margin:0;padding:0;}
.smallslider li a{margin:0;padding:0;}
.smallslider li a img{border:0;padding:0;margin:0;vertical-align:top;}
.smallslider  h3{position:absolute;font-weight:bold;font-size:12px;margin:0;padding:0;text-indent:2%;line-height:26px;z-index:102; width:98%;color:#CCC;}
.smallslider  h3 a{padding:0;margin:0;text-indent:0; }
.smallslider  h3 a:link,.smallslider  h3 a:visited{text-decoration:none;color:#FFFFFF;}
.smallslider  h3 a:hover{text-decoration:underline;color:#FF6600;}
.smallslider li.current-li{}
.smallslider-btns{position:absolute;z-index:103;}
.smallslider-btns span{background-color:#FFFFFF;border:1px solid #DCDCDC;color:#9F9F9F;cursor:pointer;float:left;font-size:12px;height:16px;line-height:16px;text-align:center; width:16px;}
.smallslider-btns span.current-btn{ background-color:#C00100; border:1px solid #A00100; color:white; font-size:13px;font-weight:bold;}
.smallslider-lay{position:absolute;background:black;height:26px;width:100%; z-index:101;}
.smallslider-pn{position: absolute; text-align: center; font-size: 24px; font-weight: bold; height: 36px; line-height:36px;  width:48px; z-index:102; background-color:#FFF;}
.smallslider-pn:hover{text-decoration: none; }

/* un validate */
.smallslider-pn{opacity:0.3; -moz-opacity:0.3;filter:alpha(opacity=30); }
.smallslider-pn:hover{opacity:0.8; -moz-opacity:0.8;filter:alpha(opacity=80); }
</style>
</head>

<body>
    <div class="smallslider" id="top_slider">
        <ul>
            <li><a href="#" target="_blank"><img alt="250度DHG-9030A立式鼓风干燥箱 烘箱 恒温箱 烤箱" title="250度DHG-9030A立式鼓风干燥箱 烘箱 恒温箱 烤箱" src="https://i-blog.csdnimg.cn/direct/b008aad08654485c8e876c28da2619c2.jpeg" /></a></li>
            <li><a href="#" target="_blank"><img alt="DKZ-6000型电动抗折试验机" title="DKZ-6000型电动抗折试验机" src="https://i-blog.csdnimg.cn/direct/9e4d1dc975aa4b32b30558a2824e1de5.jpeg" /></a></li>
            <li><a href="#" target="_blank"><img alt="HZ-20A型混凝土钻孔取芯机" title="HZ-20A型混凝土钻孔取芯机" src="https://i-blog.csdnimg.cn/direct/d672a66ede8d4f1eb2ad032713b2d523.jpeg" /></a></li>
            <li><a href="#" target="_blank"><img alt="上海250度DHG-9023A台式鼓风干燥箱 烘箱 恒温箱" title="上海250度DHG-9023A台式鼓风干燥箱 烘箱 恒温箱" src="https://i-blog.csdnimg.cn/direct/ed0df95a5db8460b86e7b3a7007e680b.jpeg" /></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#top_slider').smallslider({ ShowText: true, ShowLink: true, SwitchTime: 300, SwitchMode: 'hover', SwitchEffect: 'fadeIn' });
        });
    </script>
</body>

</html>


调用方法；

页面链进下面三个文件：
1.jquery 1.3.2+版本， 2.插件jquery.smallslider.js  3.css文件：smallslider.css

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./smallslider.js"></script>
<link rel="stylesheet" type="text/css" href="./smallslider.css" />

HTML部分格式：
  
<div class="smallslider" id="top_slider">
        <ul>
            <li><a href="#" target="_blank"><img alt="250度DHG-9030A立式鼓风干燥箱 烘箱 恒温箱 烤箱" title="250度DHG-9030A立式鼓风干燥箱 烘箱 恒温箱 烤箱" src="/data/attach/article/index/lunbo1.jpg" /></a></li>
            <li><a href="#" target="_blank"><img alt="HZ-20A型混凝土钻孔取芯机" title="HZ-20A型混凝土钻孔取芯机" src="/data/attach/article/index/lunbo3.jpg" /></a></li>
            <li><a href="#" target="_blank"><img alt="上海250度DHG-9023A台式鼓风干燥箱 烘箱 恒温箱" title="上海250度DHG-9023A台式鼓风干燥箱 烘箱 恒温箱" src="/data/attach/article/index/lunbo4.jpg" /></a></li>
            <li><a href="#" target="_blank"><img alt="DKZ-6000型电动抗折试验机" title="DKZ-6000型电动抗折试验机" src="/data/attach/article/index/lunbo2.jpg" /></a></li>
        </ul>
</div>

必须有一个<div></div>并且指定 类名为：smallslider ，
div内部为 <ul><li><a><img>这样的嵌套格式，
img的标签必须指定 alt，alt为下面显示的文本标题内容，所以必须要有，

现在，js调用： 
<script type="text/javascript">
	$(function(){
		$('.smallslider').smallslider({SwitchEffect:'fadeOut',Position:'LeftBottom',SwitchMode:'Hover', ButtonImage:'images/bg.gif', ButtonImageOn:'images/bgon.gif' });
	}) ;
</script>

怎么样？灰常简单吧？
详细的参数如下：

Time:3000,              // 切换时间间隔，单位毫秒，1秒=1000毫秒
ButtonImage:'',         // 按钮的背景图
ButtonImageOn:'',       // 当播放到某按钮时，按钮的背景图
ShowText:true,          // 是否显示标题，如果不显示，则只显示按钮
TextLink:true,          // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
AutoStart:true,         // 是否自动开始播放
SwitchMode:'Click',     // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
SwitchEffect:'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
SwitchTime:300,         // 切换时间，单位毫秒，1秒=1000毫秒
Position:'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom  
OffsetX:10,             // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
OffsetY:4,              // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
ButtonSpace:4           // 按钮之间的间隔 单位为像素，但不要加px
 
附上 smallslider.css的源码： 
@charset "UTF-8"; 
/* 
    $Document : smallslider$
    $Created on : 2009-7-3, 11:56:24$
    $Last Update : 2010-3-15, 11:20:22$
    $Author: AllinJS$
    $Description : Stylesheet for smallslider, UTF-8 encoding $
*/
.smallslider{position:relative;padding:0;margin:0 auto;overflow:hidden; width: 960px; height: 250px;}
.smallslider ul{list-style-type:none;padding:0;margin:0;position: absolute;width:auto;height:auto;}
.smallslider li{margin:0;padding:0;}
.smallslider li a{margin:0;padding:0;}
.smallslider li a img{border:0;padding:0;margin:0;vertical-align:top;}
.smallslider  h3{position:absolute;font-weight:bold;font-size:12px;margin:0;padding:0;text-indent:2%;line-height:26px;z-index:102; width:98%;color:#CCC;}
.smallslider  h3 a{padding:0;margin:0;text-indent:0; }
.smallslider  h3 a:link,.smallslider  h3 a:visited{text-decoration:none;color:#FFFFFF;}
.smallslider  h3 a:hover{text-decoration:underline;color:#FF6600;}
.smallslider li.current-li{}
.smallslider-btns{position:absolute;z-index:103;}
.smallslider-btns span{background-color:#FFFFFF;border:1px solid #DCDCDC;color:#9F9F9F;cursor:pointer;float:left;font-size:12px;height:16px;line-height:16px;text-align:center; width:16px;}
.smallslider-btns span.current-btn{ background-color:#C00100; border:1px solid #A00100; color:white; font-size:13px;font-weight:bold;}
.smallslider-lay{position:absolute;background:black;height:26px;width:100%; z-index:101;}
.smallslider-pn{position: absolute; text-align: center; font-size: 24px; font-weight: bold; height: 36px; line-height:36px;  width:48px; z-index:102; background-color:#FFF;}
.smallslider-pn:hover{text-decoration: none; }

/* un validate */
.smallslider-pn{opacity:0.3; -moz-opacity:0.3;filter:alpha(opacity=30); }
.smallslider-pn:hover{opacity:0.8; -moz-opacity:0.8;filter:alpha(opacity=80); }

smallslider 默认定义了一个高度，可以在页面里自己根据实际大小，自己定义高度、宽度

附上 smallslider.js的源码： 
/*
 *   Document       : jquery.smallslider.js
 *   Created on     : 2009-7-3, 11:56:24
 *   Author         : AllinJS
 *   Description    : JQuery plugin for switch images
 *   Version        : 0.1
 */

(function ($) {

    $.fn.smallslider = function (options) {
        var defaults = {
            Time: 3000,              // 切换时间间隔，单位毫秒，1秒=1000毫秒
            ButtonImage: '',         // 按钮的背景图
            ButtonImageOn: '',       // 当播放到某按钮时，按钮的背景图
            ShowText: true,          // 是否显示标题，如果不显示，则只显示按钮
            TextLink: true,          // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
            AutoStart: true,         // 是否自动开始播放
            SwitchMode: 'Click',     // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
            SwitchEffect: 'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
            SwitchTime: 300,         // 切换时间，单位毫秒，1秒=1000毫秒
            Position: 'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom   
            OffsetX: 10,             // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
            OffsetY: 4,              // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
            ButtonSpace: 4           // 按钮之间的间隔 单位为像素，但不要加px
        };
        var opts = $.extend(defaults, options);
        var $this = $(this);
        var slider = new Array();
        var ButtonBgColor = '';
        var ButtonBgColorOn = '';
        if ($this.length > 0) {
            $.each($this, function () {
                Init(this);
                CreateButtons(this, 0);
                if (opts.AutoStart) StartSlider(this, 0);
                onImage(this);
            });
        }

        function onImage(obj) {
            $(obj).find('img').hover(function () {
                StopSlider(obj);
            }, function () {
                var i = $(obj).find('li').index($(obj).find('.current-li'));
                StartSlider(obj, i + 1);
            });
        }
        function Slide(obj, index) {
            StopSlider(obj); // 先清楚掉以前的setTimeOut;
            // index表示当前停止在哪个元素上上面，其上一张为 prev，后一个，也就是将要显示的为 next
            var listArr = $(obj).find('li');
            var count = listArr.length;
            if (index > count - 1) index = 0;
            // index 可能会传入-1 值，表示当前需要切换到状态0，即第一张图片，那么next正好是0
            // 所以这里需要先经过运算，得出next，然后再进行限定0 - count-1之间

            var prev = index - 1 < -1 ? count - 1 : index - 1;
            var next = index + 1 < count ? index + 1 : 0;

            if (index < 0) index = 0;
            if (next < 0) next = 0;
            listArr.hide();
            listArr.eq(index).show();
            switch (opts.SwitchEffect) {
                case 'fadeOut':
                    listArr.eq(index).fadeOut(opts.SwitchTime, function () {
                        listArr.eq(next).show();
                    });
                    break;
                case 'fadeIn':
                    listArr.eq(index).hide();
                    listArr.eq(next).fadeIn(opts.SwitchTime);
                    break;
                case 'slideUp':
                    listArr.eq(index).slideUp(opts.SwitchTime, function () { listArr.hide(); listArr.eq(next).show(); });
                    break;
                case 'slideDown':
                    listArr.eq(index).hide();
                    listArr.eq(next).slideDown(opts.SwitchTime, function () { listArr.hide(); listArr.eq(next).show(); });
                    break;
                case 'none':
                    listArr.eq(index).hide();
                    listArr.eq(next).show();
                    break;
                default:
                    listArr.eq(index).hide();
                    listArr.eq(next).show();
                    break;
            }
            // 切换表示当前元素
            $(obj).find('li').removeClass('current-li');
            $(obj).find('li').eq(index).addClass('current-li');
            $(obj).find('span').removeClass('current-btn');
            $(obj).find('span').eq(next).addClass('current-btn');
            // 切背景图标
            if (opts.ButtonImageOn != '') {
                if (opts.ButtonImage != '') {
                    $(obj).find('span').css({ background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
                } else {
                    $(obj).find('span').css({ backgroundColor: ButtonBgColor, backgroundImage: '', borderWidth: '1px' });
                }
                $(obj).find('span.current-btn').css({ background: 'transparent url(' + opts.ButtonImageOn + ') no-repeat 0 0', borderWidth: 0 });
            }
            //切换标题
            var tit = $(obj).find('img').eq(next).attr('alt');
            if (opts.TextLink) {
                tit = '<a href="' + $(obj).find('img').eq(next).parent('a').attr('href') + '">' + tit + '</a>';
            }
            $(obj).find('h3').html(tit);
            ++index;
            index = index > count - 1 ? 0 : index;
            StartSlider(obj, index);
        }

        function CreateButtons(obj, index) {

            var listArr = $(obj).find('li');
            var count = listArr.length;
            var buttons = '';
            for (var i = 1; i <= count; i++) {
                buttons += '<span>' + i + '</span>';
            }
            buttons = '<div class="smallslider-btns">' + buttons + '</div>';

            var left = 0, right = 0, top = 0, bottom = 0;
            var style_btns = {}, style_lays = {};

            switch (opts.Position) {
                case 'LeftTop':
                    left = opts.OffsetX;
                    top = opts.OffsetY;
                    style_btns = { left: left + 'px', top: top + 'px' };
                    style_lays = { left: 0, top: 0, textAlign: 'right' };
                    break;
                case 'RightTop':
                    right = opts.OffsetX;
                    top = opts.OffsetY;
                    style_btns = { right: right + 'px', top: top + 'px' };
                    style_lays = { left: 0, top: 0, textAlign: 'left' };
                    break;
                case 'RightBottom':
                    right = opts.OffsetX;
                    bottom = opts.OffsetY;
                    style_btns = { right: right + 'px', bottom: bottom + 'px' };
                    style_lays = { left: 0, bottom: 0, textAlign: 'left' };
                    break;
                case 'LeftBottom':
                    left = opts.OffsetX;
                    bottom = opts.OffsetY;
                    style_btns = { left: left + 'px', bottom: bottom + 'px' };
                    style_lays = { left: 0, bottom: 0, textAlign: 'right' };
                    break;

            }

            $(buttons).css(style_btns).appendTo($(obj));
            if (opts.ShowText) {
                $('<div class="smallslider-lay"></div>').css(style_lays).appendTo($(obj));
                var tit = $(obj).find('img').eq(index).attr('alt');
                if (opts.TextLink) {
                    tit = '<a href="' + $(obj).find('img').eq(index).parent('a').attr('href') + '">' + tit + '</a>';
                }
                $('<h3></h3>').html(tit).css(style_lays).appendTo($(obj));
            }
            $(obj).find('span:not(:first)').css({ marginLeft: opts.ButtonSpace + 'px' });
            $(obj).find('span').removeClass('current-btn');
            $(obj).find('span').eq(index).addClass('current-btn');

            if (opts.ButtonImage != '') {
                $(obj).find('span').css({ border: 0, background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
            }

            if (opts.ButtonImageOn != '') {
                if (opts.ButtonImage != '') {
                    $(obj).find('span').css({ background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
                } else {
                    $(obj).find('span').css({ backgroundColor: ButtonBgColor, backgroundImage: '', borderWidth: '1px' });
                }
                $(obj).find('span.current-btn').css({ background: 'transparent url(' + opts.ButtonImageOn + ') no-repeat 0 0', borderWidth: 0 });
            }

            if (opts.SwitchMode == 'Click') {
                $(obj).find('span').click(function () {
                    var ix = $(obj).find('span').index($(this));
                    Slide(obj, ix - 1); // 传入ix-1表示当前是他前面一个，则在调用函数后，就会自然的切换到下一张图片，正好是ix
                });
            } else if (opts.SwitchMode == 'Hover') {
                $(obj).find('span').hover(function () {
                    var ix = $(obj).find('span').index($(this));
                    Slide(obj, ix - 1);
                });
            }
            ButtonBgColor = $(obj).find('span:not(.current-btn)').css('backgroundColor');
            ButtonBgColorOn = $(obj).find('span.current-btn').css('backgroundColor');
        }

        function Init(obj) {
            var listArr = $(obj).find('li');
            listArr.hide();
            listArr.eq(0).show();
        }

        function StartSlider(obj, index) {
            // 由第几个序号开始 初始为-1
            var st = setTimeout(function () {
                Slide(obj, index);
            }, opts.Time);

            var i = $this.index(obj);
            slider[i] = st;
        }

        function StopSlider(obj) {
            var i = $this.index(obj);
            clearTimeout(slider[i]);
            slider[i] = 0;
        }

        return this.each(function () {
            this.AccessStop = function () {
                $.each($this, function () {
                    StopSlider($this);
                });
            }
        });
    }
})(jQuery);
最新版本为 0.5，不过0.1版本已经足够用了，可以根据需要在这个基础上自行拓展。
AllinJS
关注
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值