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 ...
随机推荐
- ZendStudio如何汉化
点击工具栏的help,看图 点击 Install New Sofaware... 看图 然后.... 在地址(12.0的版本):http://download.eclipse.org/techno ...
- Hibernate双向一对一对象关系模型映射
一个员工一辆车:one-to-one 实现一:让汽车表中的外键唯一 create table emp ( eid int primary key auto_increment, ename varch ...
- Express 4 中如何使用connect-mongo
正在跟随上面的教程一步一步做,在会话支持那一节中安装 connect-mongo 后,添加: var MongoStore = require('connect-mongo')(express); v ...
- spring AOP 的几种实现方式(能测试)
我们经常会用到的有如下几种 1.基于代理的AOP 2.纯简单Java对象切面 3.@Aspect注解形式的 4.注入形式的Aspcet切面 一.需要的java文件 public class ChenL ...
- Vector_h
#ifndef VECTOR_H #define VECTOR_H #include <algorithm> template<typename Object> class V ...
- iOS真机调试
备注:本阶段之前的修改配置文件.准备脚本等,只需要做一次.但本阶段的操作,对每个需要真机调试的工程都要做一遍. ① 禁用Xcode自动的签名操作 将工程配置“Build Settings”中所有的Co ...
- 困难的串(dfs)
困难的串 题意: 如果一个字符串包含两个相邻的重复子串,则称它是“容易的串”,其他串称为“困难的串”.例如, BB.ABCDABCD都是容易的串,而D.DC.ABDAD ...
- 二、JavaScript语言--JS动画--JS动画效果
运动框架实现思路: 1.速度(改变值:left , right , width , height , opacity) 2.缓冲运动 3.多物体运动 4.任意值改变 5.链式运动 6.同时运动 js用 ...
- Sublime Text 无法使用Package Control的解决方法 以及 常用的插件安装过程
大概一个月之前给 Macbook air 装 Sublime Text 3 的时候,遇到过这个问题,当时解决了,现在回想,感觉忘的七七八八了,赶紧趁着还没有全忘光的时候记下来,当时的过程记得不一定准确 ...
- tengine-2.1.0 源码安装
[root@localhost tengine-]# yum update -y [root@localhost tengine-]# yum install gcc gcc-c++ autoconf ...