我是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. JDBC与ArrayList和hashmao

    JDBC帮助类 package work; import java.beans.Statement;import java.sql.Connection;import java.sql.DriverM ...

  2. vertical-align用法

    父元素下面有两个子元素,第一个子元素设置display:inline-block,第二个子元素设置display:inline-block, vertical-align:top这样两个元素就能顶部对 ...

  3. 学习Jammendo代码的心路历程（二）ViewFlipper数据的填充

    打开Jammendo进入到首页之后,会看到这样一个界面.可以看到下左效果,我们可以看到,他是上部分的ViewFlipper模块和下半部分的listview模块构成的,今天就简单的说一下Jammendo ...

  4. 重温Javascript（二）

    对象 可以想象成散列表,键值对,值可以是数据或函数 创建对象的方式 1.工厂模式 function createPerson(name, age, job){ var o = new Object() ...

  5. 神奇的框架插件jquery layer

    layer 的这个相册功能是不是很炫酷,是滴,这就是layer,只要添加一个layerjs就行了 //Javascript代码 layer.photos({ photos: '#photosDemo' ...

  6. Java面试指导

    Java面试指导   想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些东西呢?本文陈列的这些内容既可以作为个人简历中的内容,也可以作为面试的时候跟面试官聊 ...

  7. poptest老李谈数据库优化总结

    poptest老李谈数据库优化总结   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088 ...

  8. 性能调优案例分享：Mysql的cpu过高

    性能调优案例分享:Mysql的cpu过高   问题:一个系统,Mysql数据库,数据量变大之后.mysql的cpu占用率很高,一个测试端访问服务器时mysql的cpu占用率为15% ,6个测试端连服务 ...

  9. 手机自动化测试：Appium源码分析之跟踪代码分析九

    手机自动化测试:Appium源码分析之跟踪代码分析九   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  10. sqoop 操作从hdfs 导入到mysql中语句

    将hdfs下/dw/dms/usr_trgt下的文件导入到mysql中test数据库下usr_trgt表中 sqoop-export   --connect jdbc:mysql://mysqlDB: ...