js简版图片左右切换功能

function leftMove(obj,pos){
            var num = 0;
            setInterval(function(){
              num++;
              if(num<141){
                if(pos==1 && obj.offsetLeft<0){
                  obj.style.left = obj.offsetLeft + 5 + "px";
                }
                else if(pos==2 && obj.offsetLeft>-700*(picProveLis.length-1)){
                  obj.style.left = obj.offsetLeft - 5 + "px";
                }
              }
            },1)
          }
          pic_goleft.onclick = function(){
            leftMove(picProveUl,1);
          }
          pic_goright.onclick = function(){
            leftMove(picProveUl,2);
          }
时间: 2024-10-12 13:37:47

js简版图片左右切换功能的相关文章

js + css 实现标签内容切换功能

先附上效果图和代码: html 文档: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="../js/tabs_function.js"&

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

程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含一个html文件,一个css文件,一个js文件,一个jquery.js文件,以及一张图片. index.html <html><head><title>js点击组图左右滑动</title><meta http-equiv="Content-Typ

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

tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab选项卡</title> <style> * { margin: 0; padding: 0; } ul,li { list-style: none; } body { background-color: #323232; font-size: 12px;

jquery 实现的一款超简单的图片切换功能

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="./assets/js/jquery.js"></script></head><style> </st

多尺寸图片左右切换功能前端实现

一.需求描述 标题“多尺寸图片左右切换功能”,概括的不知道是否恰当,具体是需求如下. 一次点击按钮,向左或向右移动一个图片. 切换到尽头时不显示按钮 页面有三个尺寸 可以一睹为快,看一下最终效果. 二.切图代码 1.代码 html代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"

js 多个checkedBox分组互斥功能实现 由于QQ邮件无法发送暂且将js写在博客园

今天有一项目需要实现多个checkbox分组实现组内互斥功能 . 具体要求如下:大的分类分为A B C 三类, 其中 A   B 中又分为 A1 A2 A3   B1 B2 B3  二级分类,二级分类下又有 A11  A12 A13 A14  A21 A22 A31 A32  B11 B12 B13 B14 ... .要求实现 A B C 互斥 A1 A2 A3 B1 B2 B3 组内互斥.具体结构及代码如下 具体功能树如下: A A1 A11 A12 A13 A2 A21 A22 A3 A31

Android应用语言切换功能

因为公司的产品大部分是销售到国外的,所以领导要求app有语言切换功能.我在网上搜了些相关知识并实现了功能,在这里做个中英文切换的demo记录下来. 先看看demo的效果: 效果就是这样子.当然也可以做成其他语言的切换,具体根据需求而定. 原理其实很简单,就是多个strings.xml进行切换然后在刷新Activity. 首先,在AndroidManifest.xml文件中的每个需要切换语言的Activity中加入android:configChanges="locale". 然后在re

CSS实现鼠标移动图片实现切换功能

CSS实现鼠标移动图片实现切换功能:当鼠标放在一个图片上的时候可以切换为其他图片,使用javascript可以实现,下面介绍一下如何使用CSS实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

iOS:删除storyBoard,纯代码实现UITabBarController的视图切换功能

storyboard是一个很强大的编写代码的辅助工具,可以帮助布局多个视图之间的联系,既直观又能减少代码量:但是,作为一个程序员,在不使用storyboard的情况下,纯代码编写是必须的技能. 下面就用纯代码实现纯代码实现UITabBarController的视图切换功能,咱就实现三个视图之间的转换吧,代码不多,容易看的明白. 步骤: 1.删除storyboard故事板和UIViewController 2.创建三个控制器类,均继承自UIViewController,分别为FirstViewCo