一直以来都没直视的轮播

一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件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>

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

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

前更有底气

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Vi的技术博客

Java基础系列(十八):Object类(下)

在Java中,hash code(散列码)是由对象导出的一个整型值,以下是几个常见哈希值的算法:

8220
来自专栏Vi的技术博客

Java技术体系和写作计划

首先,它需要土壤(JVM),需要主干(基础),枝杈(扩展),肥料(设计模式)。当然,如果想要让这个树茁壮的成长,我们还需要学习一些灌溉的知识(操作系统),甚至来...

11130
来自专栏Vi的技术博客

Java基础系列(二十):枚举入门

关键字 enum可以将一组具名的值的有限集合创建为一种新的类型,而这些具名的值可以作为常规的程序组件来使用,这种新的类型就是枚举类。

12240
来自专栏Vi的技术博客

Java基础系列(六):对象与类(上)

封装从形式上看,封装是将数据和行为组合在一个包中,并对对象的使用者隐藏了数据的实现方式。对象中的数据称为实例域,而操纵数据的过程称之为方法。对于每个特定的类实例...

9230
来自专栏Vi的技术博客

Java基础系列(七):对象与类(下)

上节我们学习了对象和对象变量的概念,以及它们之间的区别。与此同时,我们还知道了如何自定义一个属于我们自己的类,以及多个源文件的时候的编译机制。这节课我们来剖析一...

16250
来自专栏Vi的技术博客

Java基础系列(十七):Object类(上)

在Java中,只有基本数据类型不是对象,比如,数值,布尔和字符类型的值都不是对象。而其余的数据类型都是继承自一个名为Object的类,这个类是所有类的始祖,每个...

11530
来自专栏Vi的技术博客

Java基础系列(十六):抽象类

如果把类的继承结构看成一个金字塔,毫无疑问,位于金字塔顶端的父类更具有通用性,也会更加抽象,我们通常使用这个类来作为派生其他类的基类,而不是直接作为实例类。

13020
来自专栏Vi的技术博客

Java基础系列(三十):局部内部类,匿名内部类

当我们在外围类中定义的内部类仅仅在某个方法中使用了一次,这种情况下,我们就可以选择去使用局部内部类。

19730
来自专栏Vi的技术博客

Java基础系列(十三):多态

我们借助这个例子来学习多态,所谓的多态就是一个对象变量(比如上文中的staff变量)可以指示多种实际类型的现象(比如staff既可以引用Employee对象,也...

13950
来自专栏Vi的技术博客

Java基础系列(十四):方法调用

如果在子类中定义了一个与父类签名相同的方法,那么子类中的这个方法就会覆盖父类中这个相同签名的方法。这里需要注意一点,在覆盖一个方法的时候,子类方法不能低于父类方...

11530

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励