首页 » jQuery » 无缝滚动 jQuery版本

无缝滚动 jQuery版本

原文 http://blog.csdn.net/qq_25479327/article/details/79076103

2018-01-17 02:00:18阅读(541)

一、HTML+CSS同《无缝滚动 原生JavaScript》部分

无缝滚动 原生JavaScript

二、jQuery部分 2.1 JavaScript运动框架部分链接如下:

JavaScript运动框架

2.2 jQuery功能实现部分
(function($) {
    $(function() {
        $box = $('#box');
        $xslide = $('#box .J_XSlide');
        $li = $xslide.find('li');
        $liTabs = $('#box .tabs').find('li');
        var iNow = 0;
        function tab() {
            var timer = null;
            var playTime = 3000;
            var $btn = $box.find('.btn');
            $xslide.css('width', $li.length * $li[0].offsetWidth + 'px');
            $liTabs.mouseover(function() {
                showItem($(this).index());
            });
            $btn[0].onclick = moveLeft;
            $btn[1].onclick = moveRight;
            timer = setInterval(autoPlay, playTime);
            $box.mouseover(function() {
                clearInterval(timer);
            });
            $box.mouseout(function() {
                timer = setInterval(autoPlay, playTime);
            });
            function autoPlay() {
                moveRight();
            }
        }
        function showItem(n) {
            if(n == $liTabs.length) {
                $liTabs.eq(0).addClass('cur').siblings().removeClass('cur');
            }
            else {
                $liTabs.eq(n).addClass('cur').siblings().removeClass('cur');
            }
            startMove($xslide[0], {'left': -n * $li[0].offsetWidth});
        }
        function moveLeft() {
            iNow--;
            if(iNow == -1) {
                $xslide.css('left', -$liTabs.length * $li[0].offsetWidth + 'px');
                iNow = $liTabs.length - 1;
            }
            showItem(iNow);
        }
        function moveRight() {
            iNow++;
            if(iNow == $li.length) {
                $xslide.css('left', 0);
                iNow = 1;
            }
            showItem(iNow);
        }
        tab();
    })
})(jQuery);

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹