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)
    }
    })

  • 相关阅读:
    并发量,tps,qps
    MYSQL安装和配置
    python 生成随机数的几种方法
    python 判断是字母的多种方法
    python实战,
    linux工作常用命令
    apache http server安装
    .py与.pyc文件区别
    上传本地文件到linux
    ms
  • 原文地址:https://www.cnblogs.com/liuchang/p/3480051.html
Copyright © 2011-2022 走看看