我是JS初学者，本想通过JS解决轮播图的特效，上网看了下：大部分都是JQ解决的，对于初学者的我来说理解上有点困难。于是我自己只做了一个不那么高大上的JS轮播图，下面我简单介绍下我的步骤：在HTML中创建两个按钮控件，其用来控制图片的切换。再通过无序列表将你要轮播的图片放入。最后放置一个你要将图片展示的位置。具体代码如下：

其中id为placehoder标签的是你要展示图片的地方。

其次在css中对你的无序列表里的图片排版，并设置其宽高度，我的设置如下：

在JS中一共写3个函数：showPic用于将无序列表里的图片源source更换placehoder里的src的函数，buttonBefore和buttonAfter函数，用于执行单击切换图片，具体代码如下：

结果如图：

不过此代码的局限是假如你需要轮播的图片有5张，那么他总会从第一张开始切换，在最后一张终止，并且不断重复按钮时其i（v）值在不断的增加或不断的减少。导致利用性不是很好。欢迎各位大神指正交流！！！

JS解决通过按钮切换图片的问题的更多相关文章

  1. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  3. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

  4. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  5. Unity UGUI暂停按钮切换图片代码

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...

  6. JQuery移动动画实现点击按钮切换图片--JQuery基础

    直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...

  7. 使用异步js解决模态窗口切换的办法

    核心代码 js ="setTimeout(function(){document.getElementsByTagName('Button')[3].click()},100);" ...

  8. javascript总结36:DOM-点击按钮切换图片案例

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

随机推荐

  1. [LeetCode] Zuma Game 题解

    题目 题目 Think about Zuma Game. You have a row of balls on the table, colored red(R), yellow(Y), blue(B ...

  2. 取消a标签的页面跳转

    如果代码是:<a href="#" class="juan-btn" onclick="showResult()">提交< ...

  3. rxjava2学习笔记(1)

    1.什么是RxJava? 简单,清晰的多线程编程框架.可方便的写出维护性高,逻辑清晰的Java程序. 2.什么是观察者模式? 入门教程讲这种高大上抽象概念都是耍流氓! 3.开始 3.1github地址 ...

  4. 4月6日--js生成随机数列

    newarr=[1,2,3,4,5,6] function randomsort(a,b){ return Math.random()>0.5?-1:1;}//用Math.random()函数生 ...

  5. 重新认识JavaScript里的创建对象（一）

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为"无序属性的集合,其属性可以包含基本值.对象或者函数&quo ...

  6. memcached+tomcat转发forward时 sessionid一直变化的问题

    今天遇到了一个很奇怪的问题, 我在tomcat过滤器 中, 对请求过来的静态资源及html页面做了forword转发操作,核心代码如下: private void redirectMobile(Htt ...

  7. C#变量、常量、枚举、预处理器指令知多少

    一.变量 C#共有其中变量类型有:静态变量.实类变量.数组元素.数值参数.引用参数.输出参数和局部变量 先定义一个简单的类来说明,如下: public class VariableDefine { p ...

  8. Entity Framework查询注意

    首先我们看下where的方法,直接查看定义(定义如下),其实一种是对IEnumerable的扩展,一种是对IQueryable的扩展,直接看最常用的,其实区别就在IEnumerable的扩展的参数是系 ...

  9. JS中的几种函数

    函数可以说是js中最具特色的地方,在这里我将分享一下有关函数的相关知识: 包装函数:        (function foo(){...})作为函数表达式意味着foo只能在...所代表的位置中被访问 ...

  10. Android Weekly Notes Issue #254

    Android Weekly Issue #254 April 23rd, 2017 Android Weekly Issue #254 本期内容包括: 如何用Kotlin写一个Gradle Plug ...