一、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. 图解Python 【第八篇】：网络编程-进程、线程和协程

    本节内容一览图: 本章内容: 同步和异步 线程(线程锁.threading.Event.queue 队列.生产者消费者模型.自定义线程池) 进程(数据共享.进程池) 协程 一.同步和异步 你叫我去吃饭 ...

  2. C++ STL——stack和queue

    目录 一 stack容器 二 queue容器 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一定完全正确! 栈和队列作为经典的数据结构,我们再熟悉不过了.C++ ST ...

  3. [转]MySQL查询语句执行过程详解

    Mysql查询语句执行原理 数据库查询语句如何执行?语法分析:首先进行语法分析,对使用sql表示的查询进行语法分析,生成查询语法分析树.语义检查:检查sql中所涉及的对象以及是否在数据库中存在,用户是 ...

  4. 抓包工具Fiddler使用

    1.参考博客 https://blog.csdn.net/ychgyyn/article/details/82154433 https://www.cnblogs.com/miantest/p/728 ...

  5. Spring boot Gradle项目搭建

    Spring boot Gradle项目搭建 使用IDEA创建Gradle工程     操作大致为:File->new->Project->Gradle(在左侧选项栏中)     创 ...

  6. python-Web-django-后台

    url: # member 处理 re_path('member/list/', member.list, name='member/list/'), re_path('member/list_par ...

  7. python-Web-数据库-oracle

    1.oracle体系结构 --------全局数据库,这里指物理磁盘上的数据库(物理结构,一个真实存在的磁盘目录),一般一台oracle服务器有1个全局数据库,文件占1G多.oracle允许一台 -- ...

  8. Notepad++ 用法技巧

    1 搜索技巧 [搜索中文]用正则表达式搜索:[一-龥] 2 用于SWIG语法的模板配置 notepad++是Windows平台上非常优秀的文本编辑器,速度快,功能强,还能自定义语言模板呢.很好用! 这 ...

  9. luoguP2664树上游戏（点分治）

    题目链接:https://www.luogu.org/problem/P2664 题意:给定一颗带点权的树,结点数n<=1e5,点权<=1e5,用s(i,j)表示从i到j的路径上不同点权数 ...

  10. 12.Flume的安装

    先把flume包上传并解压 给flume创建一个软链接 给flume配置环境变量 #flume export FLUME_HOME=/opt/modules/flume export PATH=$PA ...