一、html部分

二、js部分

三、源代码部分

  1.  <body>
  2.      <div id="box">
  3.          <img src="imges/111.jpg" alt="" style="opacity: 1;">
  4.          <img src="imges/222.jpg" alt="" style="opacity: 0; ">
  5.          <img src="imges/333.jpg" alt="" style="opacity: 0; ">
  6.          <img src="imges/444.jpg" alt="" style="opacity: 0; ">
  7.          <img src="imges/555.jpg" alt="" style="opacity: 0; ">
  8.          <ul id="tag">
  9.              <li style="background-color:green;">1</li>
  10.              <li style="background-color:red;">2</li>
  11.              <li style="background-color:red;">3</li>
  12.              <li style="background-color:red;">4</li>
  13.              <li style="background-color:red;">5</li>
  14.          </ul>
  15.          <div id="left">←</div>
  16.          <div id="right">→</div>
  17.      </div>
  18.      <script>
  19.          var img = document.getElementsByTagName('img')
  20.          var li = document.getElementsByTagName('li')
  21.          var index = 0;
  22.          function swiper() {
  23.              index++;
  24.              if (index > 4) {
  25.                  index = 0
  26.              }
  27.              change();
  28.              if (index > img.length - 1) {
  29.                  index = 0
  30.              }
  31.          }
  32.          function change() {
  33.              for (i = 0; i < img.length; i++) {
  34.                  // img[i].style.display = 'none';
  35.                  img[i].style.opacity = '0';
  36.                  li[i].style.backgroundColor = 'red';
  37.              }
  38.              // img[index].style.display = 'block';
  39.              img[index].style.opacity = '1';
  40.              li[index].style.backgroundColor = 'green';
  41.          }
  42.          left.onclick = function () {
  43.              clearInterval(time);
  44.              index--;
  45.              if (index < 0) {
  46.                  index = 4
  47.              }
  48.              change();
  49.              time = setInterval(swiper, 1500);
  50.          }
  51.          right.onclick = function () {
  52.              clearInterval(time);
  53.              index++;
  54.              if (index > 4) {
  55.                  index = 0
  56.              }
  57.              change();
  58.              time = setInterval(swiper, 1500)
  59.          }
  60.          for (var i = 0; i < img.length; i++) {
  61.              li[i].className = i;
  62.              li[i].onmouseover = function () {
  63.                  index = this.className
  64.                  change()
  65.                  clearInterval(time)
  66.              }
  67.              li[i].onmouseout = function () {
  68.                  change()
  69.                  time = setInterval(swiper, 1500)
  70.              }
  71.          }
  72.          var time = setInterval(swiper, 1500);
  73.      </script>
  74.  </body>

4.图片左轮播图（swiper）的更多相关文章

  1. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  2. 图片轮播图插件的使用 unslider！！！

    1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...

  3. iOS 图片轮播图（自动滚动）

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

  4. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  5. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  6. 小程序图片轮播特效swiper(纯手打)

    前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...

  7. BannerDemo【图片轮播图控件】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下一个开源库youth5201314/banner的运用.具体用法请阅读<youth5201314/banner& ...

  8. android 使用图片轮播图---banner 使用

    转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...

  9. js图片轮播图

    /*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con ...

随机推荐

  1. 快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题

    快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题 转 https://www.jb51.net/article/144939.htm 今天小编就为大家分享一篇快速解决设置And ...

  2. backbone之collection

    最近要用到backbone.js,网上也找了些资料,但是就看到一个开头还可以,往下看基本就看不下去了,幸好有这本书[LeanpubRead] Backbone.Marionette.js A Gent ...

  3. Performance Analysis of Logs (PAL) Tool

    Performance Analysis of Logs (PAL) Tool 背景 在众多的独立项目中,我们如何快速了解数据库(SQL Server)服务器的性能,以及数据库的基线情况是怎样的,或者 ...

  4. centos源码安装mysql5.7

    http://blog.csdn.net/langzi7758521/article/details/51435985

  5. k-means聚类分析范例程序

    K-Means聚类算法原理参考以下链接: https://www.cnblogs.com/pinard/p/6164214.html 2. 传统K-Means算法流程 在上一节我们对K-Means的原 ...

  6. PHP非对称加密

    加密的类型: 在日常设计及开发中,为确保数据传输和数据存储的安全,可通过特定的算法,将数据明文加密成复杂的密文.目前主流加密手段大致可分为单向加密和双向加密. 单向加密:通过对数据进行摘要计算生成密文 ...

  7. django 之(一) --- DjangoRestFormwork

    接口概念 IOP:面向接口编程,不再关注具体的实现:只关注输入.输出. http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practice ...

  8. keepalived脑裂问题

    一.对脑裂的理解 在高可用(HA)系统中,当联系2个节点的“心跳线”断开时,本来为一整体.动作协调的HA系统,就分裂成为2个独立的个体.由于相互失去了联系,都以为是对方出了故障.两个节点上的HA软件像 ...

  9. ambari 快速安装部署

    OS:Linux CPU消耗大,要准备5G以上,不然集群启动不了(我自己给它配了8G,启动整个集群是没问题,要用的话估计不够) 一.准备工作: 1.关闭防火墙:sudo ufw disable/ 2. ...

  10. python实用小功能

    正则匹配手机号码: regExp =r"^((13[0-9])|(15[^4])|(18[0-9])|(17[0-8])|(147)|(19[0-9]))\d{8}$"; 常用于用 ...