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

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列表

注:这个方法可能造成轮播时图片、文字抖动,暂时还没想到解决办法

JavaScript中实现li向上轮播的更多相关文章

  1. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  2. javascript写无缝平移的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  4. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  5. javascript效果:手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  6. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  8. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  9. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

随机推荐

  1. 10、kubernetes之RBAC认证

    一.kubectl proxy # kubectl proxy --port=8080 # curl http://localhost:8080/api/v1/ # curl http://local ...

  2. 搜狗输入法弹窗搜狐新闻的处理 以及sogoucloud.exe的处理

    https://www.cnblogs.com/Asa-Zhu/p/3359034.html 使用everything搜索SohuNews.exe,然后找到安装路径C:\Program Files ( ...

  3. es6 的数组的方法

    es6 数组的拓展 数组的类 Array 数组的定义: 1. var arr=[]; 2. var arr=new Array(3) // 3 代表有三个元素 arr[0]=12; arr[1]=24 ...

  4. spark MLlib 概念 2:Stratified sampling 层次抽样

    定义: In statistical surveys, when subpopulations within an overall population vary, it is advantageou ...

  5. typescript 接口 interface

    代码: // 接口:行为的抽象 // 一.对class类的约束 // 接口定义 // 打印机 interface Iprinter { Printing(msg:string):string; } i ...

  6. Servlet请求参数的方式

    今天整理了以下几种常用的Servlet请求参数的方式,下面简单地介绍 1)getParameter(String key)返回一个字符串,获得name和key 一样的表单控件的数据,如果有重复的nam ...

  7. 托管C++中System::String^ 转换为 char*

    https://docs.microsoft.com/en-us/cpp/dotnet/how-to-convert-system-string-to-standard-string?view=vs- ...

  8. CAN波特率设置

    通过对CAN位定时寄存器CANBIT以及CAN波特率预分频扩展寄存器CANBRPE的设置可以得到需要的CAN通信波特率. CAN的位定时配置不当,将使得CAN模块无法按照目标波特率接入CAN网络,将导 ...

  9. kendo Ui实现搜索选中建议 不改变输入框的值

    $("#SubjectFilter").kendoAutoComplete({ dataTextField: "patientCardNumber", temp ...

  10. jenkins自动化部署工具

    jenkins自动化测试 & 持续集成 知识点: 1.下载地址:jenkins.io download: