4.图片左轮播图(swiper)
一、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)的更多相关文章
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- 图片轮播图插件的使用 unslider!!!
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- React Native 之轮播图swiper组件
注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...
- 小程序图片轮播特效swiper(纯手打)
前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...
- BannerDemo【图片轮播图控件】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下一个开源库youth5201314/banner的运用.具体用法请阅读<youth5201314/banner& ...
- android 使用图片轮播图---banner 使用
转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...
- js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
随机推荐
- Docker的镜像制作与整套项目一键打包部署
Dockerfile常用指令介绍 指令 描述 FROM 构建的新镜像是基于哪个镜像.例如:FROM centos:6 MAINTAINER 镜像维护者姓名或邮箱地址.例如:MAINTAINER Mr. ...
- 深度学习之Seq_seq网络
知识点 """ 机器翻译: 历史: 1.逐字翻译 2.基于统计学的机器翻译 3.循环网络和编码 翻译过程: 输入 -- > encoder -->向量 --& ...
- Delphi使用TADOQuery的RowsAffected属性时需要注意的一个点
测试环境是:Delphi 6.Oracle.PLSQL 先创建一个模拟测试的数据表,并且添加几条模拟的数据 create table practice(uno varchar(8), uname va ...
- Cell中实现多图展示
实现的效果如下: 主要实现代码如下: // // DetailCell.m // Floral // // Created by 思 彭 on 16/9/21. // Copyright © 2016 ...
- Java集合(6):理解Map
映射表的基本思想是维护键-值对的关联,通过键来寻找值.下面是标准Java类库中几种Map的实现: (1) HashMap:Map基于散列表的实现,插入和查询键值对的开销是固定的.可以通过构造器设置容量 ...
- 在java中有关于反射的皮毛----自己的简略认知
白首为功名.旧山松竹老,阻归程.欲将心事付瑶琴.知音少,弦断有谁听? 反射(reflection): 当我们在看到这个名词首先会想到的是,我们在上高中时学的物理,那么在java开发中,反射这个名词是怎 ...
- STS MVC与MyBatis的结合
1. MVC关键点在于Controller 1.1 Controller通过返回两种类型的数据完成用户端请求的回复:一种是模型(视图),另一种是JSON数据. 1.2 Controller类采用@Co ...
- web安全问题总结
主要问题 SQL注入:即通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,从而获取不该获取的数据 跨站脚本攻击(也称为XSS):指利用网站漏 ...
- SQL SERVICES 搭建问题
一.SQL SERVICES 设置IP 连接 SQL2008是没有外围配置的,为了能用IP地址或者local登陆,需要做下面的配置. 打开Microsoft SQL Server 2008 R2→配 ...
- Kudu建表语句
--建表CREATE TABLE kudu_testdb.perf_test_t1( id string ENCODING PLAIN_ENCODING COMPRESSION SNAPPY, int ...