zoukankan      html  css  js  c++  java
  • 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)
    }
    })

  • 相关阅读:
    sed 删除最后几行 和删除指定行 awk使用
    nagios监控
    nginx服务启动脚本
    Linux修改环境变量的4种方法
    源码编译apache报错的解决方法
    apache源码安装及启动脚本添加
    haproxy配置
    awk命令2
    awk命令1
    通配符及变量
  • 原文地址:https://www.cnblogs.com/liuchang/p/3480051.html
Copyright © 2011-2022 走看看