一、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. 如何解决Sublime text中文乱码问题

    Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...

  2. java序列化与反序列化操作redis

     笔者在使用SSM框架项目部分功能进行测试需要使用到对象的序列化与反序列化 第一种方式:jackson Demo package com.dznfit.service; import com.dznf ...

  3. 九十三：CMS系统之cms后台登录功能

    config form from wtforms import Form, StringField, IntegerFieldfrom wtforms.validators import Email, ...

  4. Redis在Linux上面安装

    1 下载Redis:https://redis.io/download 下载完成之后:redis-4.0.11.tar.gz 2 将下载的压缩包传到linux对应文件夹下面(笔者上传到/opt/下面) ...

  5. 使用 DrMemory 详细教程

    Dr Memory 简介 Dr. Memory 是一个开源免费的内存检测工具,它能够及时发现内存相关的编程错误,比如未初始化访问.内存非法访问以及内存泄露等.它不仅能够在 Linux 下面工作,也能在 ...

  6. 前端学习之JavaScript(1)

    目录 一. JavaScript简介 二. 第一个JavaScript代码 三. 基本数据类型 四. 运算符 五. 数据类型转换 六. 流程控制 七. 常用内置对象 八. 函数 一. JavaScri ...

  7. Qt 字符映射表 显示图标

    一.利用字符映射表segmdl2.ttf,窗体显示字符图片. 在win10里面搜“字符映射表”,选择字体segmdl2.ttf,查看图标对应得16进制值.把此字体拷贝到程序的目录下. 二.使用 #if ...

  8. Jquery的深浅拷贝涉及到的知识点

    1.安全的类型检测 Object.prototype.toString.call(obj) => "[object NativeConstructorName]" /** * ...

  9. Linux 脚本

    1.理解Linux Shell和基本Shell脚本语言的小贴士(一) http://blog.jobbole.com/63952/ ------伯乐在线

  10. IDEA安装Git

    1.下载Git 官方地址为:https://git-scm.com/download/win 2.下载完之后,双击安装 3.选择安装目录 4.选择组件 5.开始菜单目录名设置 6.选择使用命令行环境 ...