yuanzhou700 2015-06-08 14:32 采纳率: 0%
浏览 2109

js新手跪求这个轮播图怎么自动轮播

<script type="text/javascript">

        var li_num;
        var total_li;
        var current = 0;
        var dots;

        $(document).ready(function () {

            $('.buttonfix').hover(
                function () {
                    $('.buttonfix').css('background-position', 'top left');
                },
                function () {
                    $('.buttonfix').css('background-position', 'bottom left');
                }
            );

            total_li = $('.mediawindow div.item').size() - 1;
            dots = draw_dots($('.media'), $('.mediawindow div.item'));
            update_dots(dots, current);
            ArrowHide(current);

            $('a.media_left, a.media_right').click(function () {

                if ($(this).html() == 'right') {
                    //alert('left');
                    current++;
                    if (current >= total_li) {
                        current = total_li;
                    }
                } else {
                    //alert('right');
                    current--;
                    if (current < 0) {
                        current = 0;
                    }
                }
                //alert(current);

                item_goto = $('.mediawindow div.item:eq(' + current + ')');
                window_slide($('.mediawindow'));
                update_dots(dots, current);
                ArrowHide(current);
                return false;

            });

            $('ul.dots li').click(function () {
                current = $(this).html() - 1;
                item_goto = $('.mediawindow div.item:eq(' + current + ')');
                window_slide($('.mediawindow'));
                update_dots(dots, current);
                ArrowHide(current);
                return false;
            });

        });

        function ArrowHide(current) {
            $('.mediapanel  a.media_right').css('display', 'block');
            $('.mediapanel  a.media_left').css('display', 'block');
            if (current == total_li) {
                $('.mediapanel a.media_right').css('display', 'none');
            }
            if (current == 0) {
                $('.mediapanel a.media_left').css('display', 'none');
            }
        }

        function window_slide(window) {
            window.stop().scrollTo(item_goto, 600, { easing: 'easeInOutQuad' });
        }

        function draw_dots(container, items) {
            var out = "";
            var i = 1;
            out += '<ul class="dots">';
            items.each(function () {
                out += "<li>" + i + "</li>";
                i++;
            });
            out += '</ul>';
            container.append(out);
            return container.find('ul.dots');
        }

        function update_dots(dots, currentposition) {
            dots.find('li').css({ backgroundPosition: 'left bottom' });
            dots.find('li:eq(' + currentposition + ')').css({ backgroundPosition: 'left top' });
        }


</script>
  • 写回答

5条回答 默认 最新

  • 一路向北-bruce 2015-06-08 16:15
    关注

    你可以添加一个函数块,在除了点击之外,实现自动轮播 $(document).ready(function () {
    //这里就可以添加一个循环的函数,比如
    setinterval(function(){//这里可以相关代码}, time)

    );
    题主可以参考这个思路

    评论

报告相同问题?

悬赏问题

  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?