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列表
注:这个方法可能造成轮播时图片、文字抖动,暂时还没想到解决办法
JavaScript中实现li向上轮播的更多相关文章
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- javascript写无缝平移的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- javascript效果:手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
随机推荐
- 第八周学习总结&实验报告(6)
实验六 异常 一.实验目的: (1)理解异常的基本概念: (2)掌握异常处理方法及熟悉常见异常的捕获方法. 二.实验要求: (1)练习捕获异常.声明异常.抛出异常的方法.熟悉try和catch子句的使 ...
- 函数-this
1.this. 解析器在调用函数的时候,每次都会向函数内部传递进一个隐含的参数(即this): this指向一个对象,这个对象称为函数执行的上下文对象.根据函数的调用方式的不同,this会指向不同的对 ...
- echarts折线图,纵坐标数值显示不准确的问题解决
问题如图: 问题解决:将stack去掉或注释 如下图:
- 后盾网lavarel视频项目---图片上传
后盾网lavarel视频项目---图片上传 一.总结 一句话总结: 前端还是普通的前端操作,前端上传图片的地址就是图片上传的路由,后端代码也很简单 public function uploader(R ...
- 半硬化树脂PP的型号
1080是PP半固化胶片的型号(perperg),还有7628,2116,2113,2112,1506等等型号,每种型号不一样代表其PP内部的玻纤布不一样,比如7628的玻纤布相对较粗.数值较小则玻纤 ...
- leetcode 105从前序与中序遍历序列构造二叉树
方法一:直接使用复制的数据递归:O(n)时间,O(n)空间,不计算递归栈空间: /** * Definition for a binary tree node. * struct TreeNode { ...
- Kotlin之定义函数
java: int add (int m ,int n){ return m+n; } void process(int m){ Systrm.out.println(m); } kotlin: fu ...
- 阶段3 2.Spring_10.Spring中事务控制_1 基于XML的AOP实现事务控制
新建项目 首先把依赖复制进来 aop必须引入.aspectjweaver 复制src下的所有内容 复制到我们的新项目里面 factory文件夹删掉 删除后测试类必然就报错 配置文件 beanFacto ...
- Asp.Net Webform 常用代码
1015.ASP.Net WebForm 数据绑定 < %# %> < %= %> < % %> < %@ %> Eval("Nam ...
- MySQL:添加用户、删除用户、授权、远程访问、修改密码
1.创建用户 #test表示你要建立的用户名,后面的123456表示密码, #localhost限制在固定地址localhost登陆 CREATE USER test@localhost IDENTI ...