我是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. linux最常用命令

    1,cd命令   作用:切换当前目录,它的参数切换的路劲,可以是相对路劲,也可以是绝对路劲. 用法: cd /root/Docements #切换当/root/Docements,绝对路劲 cd ./ ...

  2. Centos7上安装Kubernetes集群部署docker

    一.安装前准备1.操作系统详情需要三台主机,都最小化安装 centos7.3,并update到最新 [root@master ~]# (Core) 角色 主机名 IPMaster master 192 ...

  3. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  4. 极化SAR图像基础知识(1)

    从今天开始学习极化SAR图像,记录于此. 极化散射矩阵S是用来表示单个像素散射特性的一种简便办法,它包含了目标的全部极化信息.

  5. 关于Git增、删、改源地址问题

    在上篇博客中我们了解了Git的基本使用,如果你已经建立了一个远程代码库,并且遇到了远程代码库源地址修改的问题,那么这篇博客可能会帮到你. 1.如何查看当前远程Git库源地址呢? $git remote ...

  6. ES6 对let声明的一点思考

    说到ES6的let变量声明,我估计很多人会想起下面几个主要的特点: 没有变量声明提升 拥有块级作用域 暂时死区 不能重复声明 很多教程和总结基本都说到了这几点(说实话大部分文章都大同小异,摘录的居多) ...

  7. 关于mysql查询区分大小写

    使用查询语句时,携带collate utf8_bin 在SQL语句中使用collate 使用collate子句,能够为一个比较覆盖任何默认校对规则.collate可以用于多种SQL语句中,比如wher ...

  8. Android 新一代多渠道打包神器

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:李涛 ApkChannelPackage是一种快速多渠道打包工具,同时支持基于V1签名和V2签名进行多渠 ...

  9. Android 正则表达式验证手机号、姓名（包含少数民族）、身份证号

    最近项目中新增的功能,需要对手机号.姓名.身份证号等一些信息进行验证,最好的方法是通过正则表达式来验证,网上查了一些资料,写了这几个工具方法. 1.验证手机号 规则:第一位只能是1,第二位为3-8中的 ...

  10. ubutun 安装php7.1x

    服务器ecs上本来跑了一套nginx+php5.5,由于新项目使用的是laravel5.4,所以不得不把php升级,在此记录下在此安装的过程和遇到的问题,总体来说还算顺利 cd /usr/local/ ...