一、html部分

二、js部分

三、源代码部分

 <body>

     <div id="box">

         <img src="imges/111.jpg" alt="" style="opacity: 1;">

         <img src="imges/222.jpg" alt="" style="opacity: 0; ">

         <img src="imges/333.jpg" alt="" style="opacity: 0; ">

         <img src="imges/444.jpg" alt="" style="opacity: 0; ">

         <img src="imges/555.jpg" alt="" style="opacity: 0; ">

         <ul id="tag">

             <li style="background-color:green;">1</li>

             <li style="background-color:red;">2</li>

             <li style="background-color:red;">3</li>

             <li style="background-color:red;">4</li>

             <li style="background-color:red;">5</li>

         </ul>

         <div id="left">←</div>

         <div id="right">→</div>

     </div>

     <script>

         var img = document.getElementsByTagName('img')

         var li = document.getElementsByTagName('li')

         var index = 0;

         function swiper() {

             index++;

             if (index > 4) {

                 index = 0

             }

             change();

             if (index > img.length - 1) {

                 index = 0

             }

         }

         function change() {

             for (i = 0; i < img.length; i++) {

                 // img[i].style.display = 'none';

                 img[i].style.opacity = '0';

                 li[i].style.backgroundColor = 'red';

             }

             // img[index].style.display = 'block';

             img[index].style.opacity = '1';

             li[index].style.backgroundColor = 'green';

         }

         left.onclick = function () {

             clearInterval(time);

             index--;

             if (index < 0) {

                 index = 4

             }

             change();

             time = setInterval(swiper, 1500);

         }

         right.onclick = function () {

             clearInterval(time);

             index++;

             if (index > 4) {

                 index = 0

             }

             change();

             time = setInterval(swiper, 1500)

         }

         for (var i = 0; i < img.length; i++) {

             li[i].className = i;

             li[i].onmouseover = function () {

                 index = this.className

                 change()

                 clearInterval(time)

             }

             li[i].onmouseout = function () {

                 change()

                 time = setInterval(swiper, 1500)

             }

         }

         var time = setInterval(swiper, 1500);

     </script>

 </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. iOS tableHeaderView有默认高度？

    在给tableView设置tableHeaderView的时候发现,如果设置tableView.tableHeaderView = [UIView new] , 这里未设置tableView的高度,但 ...

  2. Spring Security登录超时,angular ajax请求出错自动跳转至登录页(jQuery也适用)

    公司开发采用Spring Security+AngualerJS框架,在session过期之后,ajax请求会直接出错.本文介绍如何实现出错情况下自动跳转至登录页. 整体思路是,session过期后, ...

  3. FullSync不支持中文文件名

    FullSync,能实现多种方式.协议的目录同步软件,但不支持中文文件名.

  4. 《计算机系统要素》第四章 类汇编语言 Hack

    这章通过学习书中自己设计的Hack语言的使用,弄懂汇编语言的工作原理. 汇编语言最接近底层了,因为每个指令对应一个二进制编码. 当这些指令都变成...0101011100101...的形式后,内存Me ...

  5. [ML] LIBSVM Data: Classification, Regression, and Multi-label

    数据库下载:LIBSVM Data: Classification, Regression, and Multi-label 一.机器学习模型的参数 模型所需的参数格式,有些为:LabeledPoin ...

  6. Threadlocal源码分析以及其中WeakReference作用分析

    今天在看Spring 3.x企业应用开发实战,第九章 Spring的事务管理,9.2.2节ThreadLocal的接口方法时,书上有提到Threadlocal的简单实现,我就去看了下JDK1.8的Th ...

  7. golang实现生产者消费者模型

    生产者消费者模型分析 操作系统中的经典模型,由若干个消费者和生产者,消费者消耗系统资源,生产者创造系统资源,资源的数量要保持在一个合理范围(小于数量上限,大约0).而消费者和生产者是通过并发或并行方式 ...

  8. 安装flanal报错解决

    1.:Error registering network: failed to acquire lease: node "test4" pod cidr not assigned ...

  9. iis管理器的程序应用池中没有Asp.NET v4.0

    然后 windows + r 输入 cmd 然后输入CD C:\Windows\Microsoft.NET\Framework64\v4.0.30319 然后 输入 aspnet_regiis.exe ...

  10. Zabbix介绍及安装（1）

    Zabbix的介绍 一.什么是zabbix及优缺点(对比cacti和nagios) Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种 ...