• jquery实现无缝滚动


    //点击上一页
    $('.pointLeft').click(function() {
    if (prevAllow) {
    prevAllow = false;
    scrollUlLeft = scrollUlLeft - scrollUlWidth;
    $('#Pointimg').css('left', scrollUlLeft);
    //复制最后一个 li 并插入到 ul 的最前面
    $('#Pointimg li:last').clone().prependTo('.scroll_ul');
    //删除最后一个 li
    $('#Pointimg li:last').remove();
    $('#Pointimg').animate({
    left : scrollUlLeft + scrollUlWidth
    }, 300, function() {
    scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);
    prevAllow = true;
    })
    }
    });


    //点击下一页
    $('.pointRight').click(function() {
    if (nextAllow) {
    nextAllow = false;
    $('#Pointimg').animate({
    left : scrollUlLeft - scrollUlWidth
    }, 300, function() {
    scrollUlLeft = parseInt($('#Pointimg').css('left'), 10);
    scrollUlLeft = scrollUlLeft + scrollUlWidth;
    $('#Pointimg').css('left', scrollUlLeft);
    //复制第一个 li 并插入到 ul 的最后面
    $('#Pointimg li:first').clone().appendTo('#Pointimg');
    //删除第一个 li
    $('#Pointimg li:first').remove();
    nextAllow = true;
    })
    }
    });


    $(function() {
    //配置变量
    var config = {
    showNum :4 , //设置滚动的显示个数
    autoScroll : true, //是否自动滚动,默认为 false
    autoScrollInterval : 3000 //自动滚动间隔,默认为 3000 毫秒,autoScroll = true 时才有效
    }

    var scrollUlWidth = $('#Pointimg li').outerWidth(true), //单个 li 的宽度
    scrollUlLeft = 0, //.scroll_ul 初使化时的 left 值为 0
    prevAllow = true, //为了防止连续点击上一页按钮
    nextAllow = true; //为了防止连续点击下一页按钮

    //计算父容量限宽
    $('#PointimgBox').width(config.showNum * scrollUlWidth);





    //自动滚动
    if (config.autoScroll) {
    setInterval(function() {
    $('.pointRight').trigger('click');
    }, config.autoScrollInterval)
    }
    })

  • 相关阅读:
    JDK5后的特性整理
    正向代理与反向代理的区别与异同
    我所用过的nginx的功能
    网页端消息推送之推与拉
    在一个py脚本中调用另外一个py脚本中的类或函数
    import与from ... import ...的区别
    python 读取文件
    shell中的特殊变量IFS
    shell 重定向以及文件描述符
    shell下读取文件数据
  • 原文地址:https://www.cnblogs.com/liuchang/p/3480051.html
Copyright © 2020-2023  润新知