我是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. HTTP协议（三）

    一.首先我们画一个图来看一下HTTP协议: 难道方法只有POST GET吗?NO,还有一些少用的方法. 二.请求方法有哪些? GET POST HEADER PUT TRACE DELETE OPTI ...

  2. python 之分发包

    setuptools python包的根目录设置setup.py from setuptools import setup, find_packages setup( name = 'm' versi ...

  3. JSP的学习

    JSP的学习 1. (1).服务器的名字:Tomcat (2).服务器浏览器访问的地址为: http://localhost:8080 http://127.0.0.1:8080 2.简单的知识 (1 ...

  4. JavaScript 简易版 自动轮播 手动轮播 菜鸟交流

    本人刚刚接触前端,许多知识还不了解,以前经常到博客园查询自己需要的东西,现在也终于反客为主了.作为新手,所展示的东西也是浅显易懂,希望同是新手的伙伴们共同交流.共同进步,若是成功捕获一位大大,也请您赐 ...

  5. C#调用WebService接口实现天气预报在web前端显示

    本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...

  6. ARM中断处理过程

    以s3c2440  ARM9核为例: 一:s3c2440 ARM处理器特性: 1.S3C2440支持个中断源,含子中断源: 2.ARM9采用五级流水线方式: 3.支持外部中断和内部中断: 二.s3c2 ...

  7. 这个demo是为解决IQKeyboardManager和Masonry同时使用时，导航栏上移和make.right失效的问题

    原文链接在我的个人博客主页 (一).引言: 在 IQKeyboardManager 和 Masonry 同时使用时,导航栏上移和make.right失效等问题多多. 其实我们完美的效果应该是这样的:* ...

  8. [Oracle]审计Audit

    1.Audit的概念 Audit是监视和记录用户对数据库进行的操作,以供DBA进行问题分析.利用Audit功能,可以完成以下任务: 监视和收集特定数据库活动的数据.例如管理员能够审计哪些表被更新,在某 ...

  9. mavne的创建

    一.maven的前期准备 1.建议使用myeclipse2013的版本的因为在你创建web项目是它把你的目录结构给你创建好,myeclipse也自带maven插件 2.jdk1.6以上 3.maven ...

  10. USACO Section 1.1-1 Your Ride Is Here

    USACO 1.1-1 Your Ride Is Here 你的飞碟在这儿 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支 ...