zoukankan      html  css  js  c++  java
  • JavaScript中实现li向上轮播

    在网上找了很久,没有找到合适的模板,其实我这个也是公司用的,希望以后也能复用,节省时间

    function scrollAuto(scrollBox, list){//两个参数分别填列表的ul的class属性和li的class属性
            var listHeight = $(list).outerHeight(true);
            var mTop = 0;
            function listGo() {
                if(mTop > -listHeight) {
                    $(scrollBox).css({'margin-top': mTop});
                    mTop = mTop - 0.5;
                } else {
                       mTop = 0;
                        $(scrollBox).css({'margin-top': '0'});
                        $(scrollBox).find('.a-list:first-child').appendTo(scrollBox); //此处的a-list为li的class属性名
                }
            }
            var listTime = setInterval(listGo, 20);
            $(scrollBox).mouseenter(function(){
                clearInterval(listTime);
            })
            $(scrollBox).mouseleave(function(){
                listTime = setInterval(listGo, 20);
            })
    由于我是先写好静态页面再实现滚动的,所以没有特别设置CSS样式

    在$(function(){})中调用,直接调用,即可实现打开页面向上轮播li列表

    注:这个方法可能造成轮播时图片、文字抖动,暂时还没想到解决办法
  • 相关阅读:
    Linux_vi编辑器
    Linux_几个符号命令
    Linux_权限
    Linux_用户/用户组
    Linux_文件及文件夹[创建][复制][移动][删除][重命名]
    Linux_文件查看
    Linux_初识
    码农网站
    学习网站
    软件设计师考试范围
  • 原文地址:https://www.cnblogs.com/yuan-zhou/p/11060642.html
Copyright © 2011-2022 走看看