Jquery图片滚动轮播插件(一个不用你写CSS的轮播插件)

最新推荐文章于 2021-06-23 02:06:39 发布

原创最新推荐文章于 2021-06-23 02:06:39 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件 #css #javascript #js

javascript 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用简单的JS代码实现一个无需额外CSS的Jquery图片滚动轮播插件。博主分享了下载地址、压缩版以及Demo链接，并详细解释了图片滚动的原理，强调了该插件的易用性和扩展性。此外，还展示了插件的前端调用方法和初始化过程。

下载地址：

易读版：http://url.cn/LMGIwM

压缩版：http://url.cn/JiyZ8V

Demo：http://url.cn/Laohcl

给大家推荐一个JS压缩网址：http://app.baidu.com/app/enter?appid=693622

博主是个js菜鸟，毕业没几个月，但是非常喜欢javascript做效果，哎，可惜学了.NET。

第一篇博客，大家鼓励我啊，大神也给指点下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/scrollImg-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#Demo1").scrollImg();
        });
    </script>
</head>
<body>
    <div id="Demo1" style="width: 520px; height: 280px; overflow: hidden;">
        <ul style="margin: 0px; padding: 0px;">
            <li><a href="####">
                <img src="images/img/3.jpg" alt="" /></a></li>
            <li><a href="####">
                <img src="images/img/2.jpg" alt=""/></a></li>
            <li><a href="####">
                <img src="images/img/4.jpg" alt=""/></a></li>
            <li><a href="####">
                <img src="images/img/5.jpg" alt=""/></a></li>
            <li><a href="####">
                <img src="images/img/1.jpg" alt=""/></a></li>
        </ul>
    </div>
</body>
</html>

这就是调用代码，是不是很简单？，但是还是有CSS代码，这个最后再说为什么吧。

先来说下图片滚动的原理

这是从下往上滚动，ul的宽度和外层的div宽度一致，div设置超出隐藏 overflow:hidden ,ul设置绝对定位，div设置相对定位，我们只需要操作ul 的CSS top 是不是就能实现图片滚动。

同理从右往左滚动，只需操作ul 的 css left也能实现图片的横向滚动

OK，有了思路就好实现了。其实当初做这个是公司要做一个官网，我找了跟多插件扩展性都很差，写的代码又看不懂，还要引用改一堆CSS，很烦。这几天有时间就自己写了一个，希望以后跟我一样的就拿着直接用了。

来看一下插件的参数

var defaults = {
            showWidth: '520', //div可见区域宽度or图片的宽度
            showHeight: '280', //div可见区域高度or图片的高度
            direction: 'left', //left||top(默认图片向左滚动)
            timeInterval: '2', //图片滚动时间间隔(秒为单位)
            speed: '0.6', //图片滚动速度
            imgFixed: true, //图片宽高是否和可见宽高一致?
            back: false, //一组图片滚动完毕后倒着滚回来而不是跳回第一张?
            btn: true, //自动产生按钮?
            click: true, //按钮能被点击?
            hoverStop: false//鼠标放上当前图片是否停止滚动?
        };

这些可以通过调用修改来实现不同效果，具体有注释。

前端调用（具体效果有注释）：

<script type="text/javascript">
        $(function () {
            $("#Demo1").scrollImg(); //默认效果
            $("#Demo1").scrollImg({ direction: 'top', back: true }); //向上来回滚动
            $("#Demo1").scrollImg({ direction: 'top', back: true, btn: false }); //向上来回滚动不产生按钮(默认产生按钮)
            $("#Demo1").scrollImg({ direction: 'top', back: true, btn: false, hoverStop: true }); //向上来回滚动不产生按钮
            $("#Demo1").scrollImg({ showWidth: '980', showHeight: '400', direction: 'top', back: true, btn: false, hoverStop: true }); //向上来回滚动不产生按钮鼠标悬停停止播放，改变默认宽高
        });
    </script>

OK，来分析下我的代码（大神一看我写的就是JS菜鸟，我看过有些插件写的很严谨的）

首先对li和ul和div进行初始化，主要是设置CSS

div.css({ 'width': defaults.showWidth + 'px', 'height': defaults.showHeight + 'px', 'position': 'relative', 'overflow': 'hidden' });
            var parm = {
                position: 'absolute',
                'list-style-type': 'none',
                float: 'left',
                height: defaults.showHeight + 'px',
                width: li_size * defaults.showWidth + 'px',
                margin: '0px',
                padding: '0px',
                left: '0px',
                top: '0px'
            };
            if (defaults.direction === 'left') {
                $.extend(parm, {});
            } else if (defaults.direction === 'top') {
                var opt = { width: defaults.showWidth + 'px', height: li_size * defaults.showHeight + 'px' };
                $.extend(parm, opt);
            }
            li.each(function (i, e) {
                $(e).css({ 'width': defaults.showWidth + 'px', 'height': defaults.showHeight + 'px', 'float': 'left' });
                if (defaults.imgFixed) { $(e).find("img").css({ 'width': '100%', 'height': '100%', 'border': '0px' }); }
            });
            ul.css(parm);

这里是针对生成的按钮

if (defaults.btn) {
                var div_box_style = {
                    height: '13px',
                    position: 'absolute',
                    left: (Math.round((defaults.showWidth - (li_size * 9 + 25)) / 2)) + 'px',
                    top: (defaults.showHeight - 25) + 'px',
                    background: 'none repeat scroll 0 0 rgba(255, 255, 255, 0.3)',
                    'border-radius': ' 10px',
                    'filter': function () { if (! -[1, ]) return 'progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=\'#4CFFFFFF\', EndColorStr=\'#4CFFFFFF\')'; }
                };
                var div_box = $("<div></div>");
                div.append(div_box);
                var sub = function () {
                    div_btn = $("<div></div>");
                    div_btn_a = $("<a href='javascript:void(0)'></a>");
                    div_box.css(div_box_style); div_btn.css({ float: 'left', width: '9px', height: '9px', margin: '2px 2px', 'overflow': 'hidden' });
                    div_btn_a.css({ width: '100%', height: ' 100%', display: 'inline-block', background: '#FDF5E6', 'border-radius': '10px' });
                    div_btn_a.appendTo(div_btn);
                    div_btn.appendTo(div_box);
                }
                li.each(function () { sub(); });
            }

轮播代码（我觉得这里思路还可以进行优化）

var start = function () {
            var btn_g = function (num) { div_btn_selected.eq(num).addClass("active").find("a").css({ 'background': '#EE3B3B' }).parent().siblings().removeClass("active").find("a").css({ 'background': '#FDF5E6' }); }
            var theIx = function () {
                if (index == li_size - 1) {
                    if (isClick) { index = index; isClick = false; } else if (defaults.back) { index--; isBack = true; } else { index = 0; }
                } else {
                    if (isClick) { index = index; isClick = false; } else if (isBack) { if (index != 0) { index--; } else { isBack = false; start(); return false; } } else { index++; }
                }
            }
            var move = function (parm) { btn_g(index); ul.stop().animate(parm, defaults.speed * 1000); }
            var parm = {};
            if (defaults.direction === 'left') {
                theIx();
                parm = { left: (index * -li_width) + 'px' };
            } else if (defaults.direction === 'top') {
                theIx();
                parm = { top: (index * -li_height) + 'px' };
            }
            move(parm);
        }

OK最后就是播放，点击的效果

var stop = function () { clearInterval(times); }
        function autoPlay() { div_btn_selected.eq(index).find("a").css({ 'background': '#EE3B3B' }); times = setInterval(start, defaults.timeInterval * 1000); }
        function clickPlay() { div_btn_selected.click(function () { stop(); isClick = true; index = $(this).index(); start(); autoPlay(); }); }
        function hoverStopPlay() { li.hover(function () { stop(); }, function () { autoPlay(); }); }
        if (defaults.hoverStop) hoverStopPlay();
        if (defaults.click) clickPlay();

再来说下为什么前面demo这里为什么要加CSS

<div id="Demo1" style="width: 520px; height: 280px; overflow: hidden;">
        <ul style="margin: 0px; padding: 0px;">

是因为这样当客户端禁用脚本时，不会造成样式大乱，不会影响其他模块布局，所以我推荐加上这些CSS。

好了，希望各位给我提些意见。