一直以来都没直视的轮播-_-

   一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数就能直接用,2是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项目都要因我延时了...

    我做过的项目也不多,开始用的最多的就是bootstrap里面的轮播,具备最基础的功能,很适合我刚开始做项目用,最近我无意发现了一个更好用的轮播件(Swiper)这个插件在手机上有点意思,他可以实现手指触摸拖拽,还可以双指进行缩放,挺好用的,官网有中文的,上手挺容易的(你们还有什么好用的插件可以私信我^-^).

    好了说正事 ,接触前端的应该都知道 轮播可以说刚开始学就必须应该

会的,不会那就太没面子了,面试问过我 ,我胸有成竹的叙述其实我心

里想着他要真让我拿出电脑写一个我还真的会蒙

    今天下午有时间 ,我凭着用过这么多次的映像自己动手写了一个,真的是

最最最最基础的轮播。

    我开始想写那种无缝的轮播,我是这么写的

<div id="slider">
<ul class="main">
<li><img src="img/banner1.jpg"></li>
<li><img src="img/banner2.jpg"</li>
<li><img src="img/banner3.jpg"></li>
</ul>
<ul class="index">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

外层slider{width:500px;height:400px;position:relative;overflow:hidden;},

.main{ float:left;width:1500px;position:absolute;left:0;top:0;transition:all linear .5s} //一张图片宽500px;

.mian>li{ float:left;}

像这样:

然后改变.main的left就可以了;我开始是这么想的,也这么做了,轮也能轮了,但是轮播图上index怎么弄,点击它还要跳到对应的图片上,想了好久

我放弃了,(日后我会解决得)

    还有一种轮播,可能你已经想到了 那种改变图片透明度的轮播,我当时想这个好写啊,同样能实现作用,于是....上码!

主要css

 

.main>li{
position: absolute;
top:0;
left: 0;
opacity: 0;
transition: all linear .5s;
}//三张叠放在一起

.main .active{
opacity: 1;
}
.index .active{
width:12px;
height:12px;
border-radius: 12px;
background-color: red;
}
<script>
var i = 1;
$('.main>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//img
   $('.index>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
   var timer = setInterval(function () {
animate();
},1000);
//    放在对应序号上,切换对应图片
   $('.index>li').on('mouseenter',
function(){
var index = $(this).html();
$('.main>li:nth-child('+index+')')
.addClass('active').siblings('.active')
.removeClass('active');//img

   $('.index>li:nth-child('+index+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
   });
//    鼠标进入停止出来启动
   $('#slider').hover(
function(){clearInterval(timer);},
function(){ timer = setInterval(
function(){ animate() },1000);}
);
//    主体函数
   function animate(){
++i;
$('.main>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//img
       $('.index>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
       if(i==3){i=0}
};
</script>

    就这段复用性贼差,处理效率贼低的代码我写了半天,

虽然效率低,但还好的是,我下次说我会的时候会比之

前更有底气

 

    ?

 

微信公众号:web小小白 

转载于:https://www.cnblogs.com/yzb23/p/6479738.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HALCON示例程序circles.hdev边界轮廓的圆形拟合

HALCON示例程序circles.hdev边界轮廓的圆形拟合 小哥哥小姐姐觉得有用点个赞呗&#xff01; 示例程序源码&#xff08;加注释&#xff09; 读入图片 read_image (Image, ‘double_circle’)窗口初始化 dev_close_window () get_image_size (Image, Width, Height) dev_open…

asp.net 微信企业号办公系统-流程设计--保存与发布

如果流程未设计完时可以先保存&#xff0c;以后再打开接着设计。点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计&#xff0c;则可以打开该流程继续设计&#xff1a; 如果流程设计完成&#xff0c;可以点击安装按钮来发布流程&#xff0c;流程安装成功后即加入…

Canny边缘检测算法原理及其VC实现详解(二)

3、 Canny算法的实现流程 由于本文主要目的在于学习和实现算法&#xff0c;而对于图像读取、视频获取等内容不进行阐述。因此选用OpenCV算法库作为其他功能的实现途径&#xff08;关于OpenCV的使用&#xff0c;作者将另文表述&#xff09;。首先展现本文将要处理的彩色图片。 …

IDEA注册jar包使用和常用插件

IDEA注册jar包使用 点击获取下载地址或生成注册码 一、安装完成后&#xff0c;先不启动&#xff0c;首先如下图修改相关的地方。 二、启动IDEA&#xff0c;并且激活IDEA IDEA插件仓库 IntelliJ IDEA Plugins 一、Maven Helper 我一般用这款插件来查看maven的依赖树。在不使用此…

Android Monkey压力测试

一. JAVA环境的搭建 安装jdk-8u151-windows-x64,可以到官网或者应用中心下载.JAVA环境变量的搭建: 在"我的电脑"-"属性"-"高级"-"环境变量"中,点击新建,填写变量名为JAVA_HOME,变量值为JAVA安装的路径.在系统变量中找到Path,点击编辑,…

bzoj 4517: [Sdoi2016]排列计数

4517: [Sdoi2016]排列计数 Time Limit: 60 Sec Memory Limit: 128 MBSubmit: 637 Solved: 396[Submit][Status][Discuss]Description 求有多少种长度为 n 的序列 A&#xff0c;满足以下条件&#xff1a;1 ~ n 这 n 个数在序列中各出现了一次若第 i 个数 A[i] 的值为 i&#x…

自制反汇编逆向分析工具 迭代第六版本 (五)

本工具从最初版的跳转分布图只为了更直观地分析反汇编代码的分支结构&#xff0c;第三版开始对直观图进行逆向分支代码的输出&#xff0c;第四版对分支输出策略的一些探索&#xff0c;第五版结合之前的探索进行改进。第六版在现在功能的基础上进行增强&#xff0c;利用第六版&a…

centos7搭建FTP服务器

1.   使用 yum 安装 vsftpd&#xff1a;yum install -y vsftpd 2.  启动 VSFTPD&#xff1a;systemctl start vsftpd.service 3.  启动后可监听到21端口&#xff1a;netstat -nltp | grep 21 4.  配置FTP权限&#xff1a;&#xff08;vsftpd.conf&#xff0c;修改前先备…

教你如何剖析源码

一、源码阅读需求 在学习中&#xff0c;我们会需要了解&#xff0c;学习&#xff0c;使用一个框架&#xff0c;一个新的函数库。在工作中&#xff0c;因为业务需求&#xff0c;因为性能问题&#xff0c;可能通过一个更高性能的工具&#xff0c;架构去优化我们的程序。 那么&…

php调用API支付接口(转自刘68)

首先访问 https://charging.teegon.com/ 注册账号&#xff0c; 找到开发配置 记下client_id和client_secret。 点击 天工开放平台 点击天工收银 点击 SDK下载与使用 选择php版下载 解压后获得 打开form.php这个是样板文件可以用它来测试是否成功&#xff0c;测试前需要先修…

单目相机标定原理

一&#xff0e;相机标定主要涉及三个坐标系&#xff1a;图像坐标系、摄像机坐标系和世界坐标系 【图像坐标系】 摄像机采集的图像变换为数字图像后&#xff0c;每副数字图像在计算机内为M x N数组&#xff0c;M行N列的图像中每一个元素&#xff08;pixel&#xff09;数值就是图…

Android开始之 activity_lifecycle和现场保护

生命周期&#xff1a; oncreate—onstart—onresume&#xff0c;--onpause--onstop&#xff0c;——onrestart——onstart——onresume&#xff0c;。。onpause。。。onstop。。。ondestroy 现在保护---保存系统状态 通过这个方法保存到数据库中或者xml中&#xff0c;&#xff…

Apache启动错误:could not bind to address[::]:443

Q&#xff1a;Windows环境下启动apache报错如下&#xff1a; 可是在httpd.conf文件中apache listen的明明是http 80端口&#xff0c;为什么会报443的错误&#xff1f; A&#xff1a;因为你的计算机安装了VM&#xff0c;所有有个vm的进程一直占用着443端口&#xff0c;在命令行下…

针孔相机拍摄的图像坐标和空间点的对应关系

一&#xff1a;摄像机成像原理 摄像机成像模型一般有三种&#xff1a;透镜投影模型&#xff08;小孔摄像机模型&#xff09;、正交投影模型和透视投影模型 光学中最基本的高斯成像公式&#xff1a;1/u 1/v 1/f (式一) 原理图如下&#xff1a; 二&#xff1a;认识三个…

粥做得好不好,全凭一个良心!

粥做得好不好&#xff0c;全凭一个良心&#xff01; 工作不也是凭良心么&#xff01; 文章中的红色字体表达了一切&#xff01; 霜降节气的到来&#xff0c;意味着冬季的临近&#xff0c;而霜降后气温的降低&#xff0c;利于蔬菜的淀粉沉淀&#xff0c;收浆后的莲藕也变得更为…

黑盒测试

引言&#xff1a; 什么是黑盒测试呢&#xff01;&#xff1f; 像我一样的测试小白就会望文生义了&#xff1a;对黑盒子测试 那么黑盒子是什么&#xff01;? 思考5秒后&#xff0c;得出了这样的答案&#xff1a;黑盒子就是黑色的盒子&#xff0c;嘿嘿&#xff01; 正文&#xf…

Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由RouteNavigation

简要&#xff1a;本系列文章讲会对expo进行全面的介绍&#xff0c;本人从2017年6月份接触expo以来&#xff0c;对expo的研究断断续续&#xff0c;一路走来将近10个月&#xff0c;废话不多说&#xff0c;接下来你看到内容&#xff0c;讲全部来与官网 我猜去全部机翻个人修改补充…

悬浮按钮

效果图 //将dp转换为px public static int dip2px(Context context, float dpValue) {final float scale context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale 0.5f); }//浮动图片监听 private void initListener() {//弹出对话框jianwen.set…

图像坐标:我想和世界坐标谈谈(A) 【计算机视觉学习笔记--双目视觉几何框架系列】

玉米竭力用轻松具体的描述来讲述双目三维重建中的一些数学问题。希望这样的方式让大家以一个轻松的心态阅读玉米的《计算机视觉学习笔记》双目视觉数学架构系列博客。这个系列博客旨在捋顺一下已标定的双目视觉中的数学主线。数学推导是有着几分枯燥的&#xff0c;但奇妙的计算…

img

转载于:https://www.cnblogs.com/SoulCode/p/6508720.html