js简版图片左右切换功能
function leftMove(obj,direction,lis){
var num = 0;
var liWidth = lis[0].offsetWidth;
setInterval(function(){
if(num<parseInt(liWidth/10)){
if(direction=="left" && obj.offsetLeft<0){
obj.style.left = obj.offsetLeft + 10 + "px";
num == parseInt(liWidth/10)-1 ? (obj.style.left = obj.offsetLeft + liWidth%10 + "px"):null;
}
else if(direction=="right" && obj.offsetLeft>-liWidth*(lis.length-1)){
obj.style.left = obj.offsetLeft - 10 + "px";
num == parseInt(liWidth/10)-1 ? (obj.style.left = obj.offsetLeft - liWidth%10 + "px"):null;
}
}
num++;
},10)
}
js简版图片左右切换功能的更多相关文章
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- tabs自动切换功能的实现
<html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
- js、jquery实现列表模糊搜索功能
实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...
- Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能
面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...
- 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
随机推荐
- 【python】入门学习(一)
主要记录一下与C语言不同的地方和特别需要注意的地方: // 整除 ** 乘方 整数没有长度限制,浮点数有长度限制 复数: >>> 1j*1j (-1+0j) 导入模块: import ...
- python基础——错误处理
python基础——错误处理 在程序运行的过程中,如果发生了错误,可以事先约定返回一个错误代码,这样,就可以知道是否有错,以及出错的原因.在操作系统提供的调用中,返回错误码非常常见.比如打开文件的函数 ...
- php 会话控制
会话控制 HTTP协议,在TCP协议基础上的HTTP协议称为无状态协议 SESSION COOKIE SESSION特点:1.存储在服务器.2.每个使用者都会生成一个SESSION.3.有默认的过期时 ...
- Android Programming: Pushing the Limits -- Chapter 2: Efficient Java Code for Android
Android's Dalvik Java 与 Java SE 进行比较 Java代码优化 内存管理与分配 Android的多线程操作 Android’s Dalvik Java 与 Java SE ...
- IIS网站发布若干问题
1.Win7 64位 IIS未能加载文件或程序集"System.Data.SQLite"或它的某一个依赖项 未能加载文件或程序集"System.Data.SQLite ...
- SQLServer之数据类型
1.整数数据类型整数数据类型是常用的数据类型之一,主要用于存储数值,可以直接进行数据运算而不必使用函数转换.(1).bigint 每个bigint存储在8个字节中,其中一个二进制位表示符号位,其它63 ...
- Qt Designer怎样加入资源文件
Qt Designer中如果在设计UI界面的时候要加入一些图素,图标等资源的时候是不能直接添加进去的,需要在Qt开发目录下编写QRC文件 qrc文件格式如下: <RCC> <qres ...
- 【mysql启动Innodb的方法】
点击此处进入原网页 1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力. ...
- 排队打饭 sdut 2443【最简单的贪心法应用举例】
排队打饭 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...
- android 入门-android Studio 配置
重要:sdk 最好先有一个版本 19版本.build-tools 19.1.0 extras 19.0和platforms android-19 1.下载android sdk 和jdk 并配置环境变 ...