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简版图片左右切换功能的更多相关文章

  1. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

  2. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  3. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  4. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  5. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  7. js、jquery实现列表模糊搜索功能

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...

  8. Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能

    面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...

  9. 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

随机推荐

  1. 【leetcode】Regular Expression Matching (hard) ★

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  2. 【python】Python遍历dict的key最高效的方法是什么?

    来源:https://segmentfault.com/q/1010000002581747 方法一:直接遍历 速度快 for key in _dict: pass 方法二:iterkeys() 速度 ...

  3. 20145213《Java程序设计》第五周学习总结补充

    20145213<Java程序设计>第五周学习总结补充 教材学习内容总结 欠的账都是要还的!第九章的内容躲过对酒当歌的夜,躲不过四下无人的街.由于第五周贪玩,疏忽冷落了Collection ...

  4. 【XLL API 函数】xlAbort

    C API 中有 15个 Excel 回调函数只能使用 Excel4.Excel4v.Excel12.Excel12v 函数调用(或间接的使用框架函数 Excel 或 Excel12f 调用).也就是 ...

  5. Java抽象类接口、内部类题库

    一.    选择题 1. Person类和Test类的代码如下所示,则代码中的错误语句是(  C  ).(选择一项)   public class Person { public String nam ...

  6. Linux(Ubuntu)之设定开机自启动

    分两种:对自建脚本,对已安装服务 对已安装服务, 只需在/etc/rc.local中添加相应的启动命令,如: 重启后,即可自启动服务. 对自建脚本自启动: 创建脚本test,修改其权限为755,如: ...

  7. Android Hybrid开发

    参考:谈谈Android App混合开发 Html 5和Native的交互 WebView 本来就支持js和Java相互调用,你只需要开启 WebView 的JavaScript脚本执行, 然后通过代 ...

  8. jdbc连接oracle数据库

    /*** 通过改变配置文件来连接不同数据库*/package com.xykj.jdbc; import static org.junit.Assert.*; import java.io.Input ...

  9. Jmeter 中使用非GUI启动进行压力测试

    使用非 GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源.使用命令jmeter -n -t <testplan filename> -l <list ...

  10. ubuntu 下使用 putty 调试

    转自:http://blog.csdn.net/wh_19910525/article/details/39313457 Ubuntu的机子上,插上USB2COM线,准备开工. 检查USB2COM在本 ...