我是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. jQuery Ajax 实例 全解析(转)

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

  2. ubuntu用不了root用户:~$ su - root Password: su: Authentication failure怎么办？

    解除root锁定,为root用户设置密码. 打开终端输入:sudo passwd Password: <--- 输入你当前用户的密码 Enter new UNIX password: <- ...

  3. Spark处理日志文件常见操作

    spark有自己的集群计算技术,扩展了hadoop mr模型用于高效计算,包括交互式查询和 流计算.主要的特性就是内存的集群计算提升计算速度.在实际运用过程中也当然少不了对一些数据集的操作.下面将通过 ...

  4. Python之路-Linux命令基础（2）

    作业一: 1)    新建用户natasha,uid为1000,gid为555,备注信息为"master" 2)    修改natasha用户的家目录为/Natasha 3)    ...

  5. Selenium测试专项三班隆重开班

    Selenium测试专项三班隆重开班 应广大测试技术人员要求,以及企业技术需求.Selenium提前一周开课了,只针对合作的每家企业提供1-2个参训名额.预计培训60人次.但报名人数却远远超出我们预期 ...

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

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

  7. file_get_contents HTTP request failed! Internal Server Error

    使用file_get_contents报错 Severity: WarningMessage: file_get_contents(http://geetest.com:8000/select?gid ...

  8. Java排序算法之归并排序

    基本思想: 归并排序利用分治法,先将一个序列分成一个个子序列,然后对子序列进行排序,再把有序子序列合并为整体有序序列. 图片来自于http://www.cnblogs.com/shudonghe/p/ ...

  9. 项目中如何使用babel6详解

    由于浏览器的版本和兼容性问题,很多es6,es7的新的方法都不能使用,等到可以使用的时候,可能已经过去了很多年.Babel可以把es6,es7的新代码编译成兼容绝大多数的主流浏览器的代码. 本篇文章主 ...

  10. BackgroundWorker的DoWork方法中发生异常无法传递到RunWorkedCompleted方法

    在使用C#的BackgroundWorker时需要在UI界面上显示DoWork中发生的异常,但怎么调试都无法跳转到界面上,异常也不会传递到RunWorkerCompleted方法中(e.Error为空 ...