jquery切换动漫

JQuery图片切换动画效果,jquery切换动漫

由于博主我懒,所以页面画的可比粗糙,然而没什么,因为自身珍视讲的是何许贯彻图片动漫切换。

思路:想必我们都逛过Taobao只怕别的的部分网址,经常都会有图片动漫切换的效果,那是如何落到实处的呢?博主本人吧,技术不是很好,弄了八个简约的例子!

先是经常图片上会有四个图片开关,三个左切换的开关三个右切换的开关,当大家单击左切换按键时,原本的图片就能够向右移动XX像素,然后它左侧的图纸就博览会示到框里,而原先的图形被埋伏了,单击右切换按键的原理跟左开关相仿。但若是间接点同四个按键的话,本来这一个图形切换框唯有3张图纸的话,到终极一张的时候大家要做三个推断,让它移动回第一张恐怕最后一张。思路解析完了,下边看下大家的代码:

1、html代码

<div id="divBox">
    <div id="imgBox">
        <div class="img"><img src="0.jpg"/></div>
        <div class="img"><img src="1.jpg"/></div>
        <div class="img"><img src="3.jpg"/></div>
    </div>
</div>
<div id="bth">
    <button id="zou">左</button>
    <button id="you">右</button>
</div>

divBox是二个彰显图片的框

imgBox是包住全部图片的DIV,大家落时效果与利益也是移动那些DIV就能够了

bth放了三个button按键用来切换图片

效果图:

图片 1

 

2、CSS代码

    #divBox{
    height:315px;
    width:750px;
    position:absolute;
    border:#000000 1px solid;
    overflow:hidden;}

    #imgBox{
    position:absolute;
    width:2550px;}

    .img{
    float:left;}

    #bth{
    margin-left:800px;}

#divBox设置图片体现框的宽高,相对地方,边框,还八个首要的品质是overflow,溢出隐瞒,当那个DIV里的剧情超越那一个DIV的轻重时,溢出的局地会被隐形掉。

#imgBox设置绝对地方和宽窄,那个幅度决议于你富有图片宽度的总的数量,笔者这里是2550px,有三张图纸,每张图片宽为750px;假如这里不给宽度的话里面的小DIV不可能左浮动。

.img设置左浮动,让拥有图片向左浮动,保持在一条水平线上。

#bth
设置异乡距,因为上边的div设置了相对地方所以那个div会被盖住看不见了,所以把这几个div挪出来。

 

效果图:

图片 2

 

3、脚本代码

 

  $(function(){
        //定义一个变量保存距离左边的位置
        var leftNum=0;
        $("#zou").click(function(){
            if(leftNum==0){
                //移动到最后一张图片
                $("#imgBox").animate({left:leftNum=-1500},500);
            }else{
                $("#imgBox").animate({left:leftNum=leftNum+750},500);
            }

        });

        $("#you").click(function(){
            if(leftNum==-1500){
                //移动到第一张图片
                $("#imgBox").animate({left:leftNum=0},500);
            }else{
                $("#imgBox").animate({left:leftNum=leftNum-750},500);
            }

        });
    });

 

提示:记得导入jQuery包

本子代码笔者写了多个单击事件,定义了二个封存间距左侧地点的习性leftNum

率先看一下我们的左切换开关单击事件:当我们单击开关时,首先决断leftNum是还是不是为0,要是为0,那么正是首先张图片,第一张图片左边已经没图片了怎么做,所以咱们让她跳到最后一张图片,大家调用animate方法完成动漫效果,这里自个儿写的是left:left=-1500,为何是-1500吗,left等于0时是首先张图纸,left等于-750的时候是第二张图纸,left等于-1500时便是第三张图纸,所以最终一张图片的职位=-(图片宽度卡塔尔国X(图片总的数量卡塔 尔(英语:State of Qatar)-1。假如leftNum不为0时,大家就在原本的根基上加750px。

右切换按键的规律和左切换按键相通,作者就不表达那么多了。

 

4、小结:

 

看懂的伴儿们得以友善去推行一下,究竟实施出真知。

万意气风发想做的越来越美观的同班,能够私信我,毕竟还会有先功用笔者没讲,举例弄多少个圆点在图纸下面,当大家点击圆点时就动漫切换成相对应的图纸上,还足以设置图片轮播效果,每间距多少秒切换叁次图片。

再有便是按钮的话,我们也能够弄的完美一些,能够在图纸侧边和右臂加二个图纸的按键,那样和越来越雅观

图片 3

感谢!如果你们有越来越好落实格局依然以为自己哪个地方写的不佳的位置,也可以私聊作者,大家一块儿商讨下。

 

由于博主笔者懒,所以页面画的一点也不细糙,然而不要紧,因为我紧要讲的是何等实现图片动漫切换。…

发表评论

电子邮件地址不会被公开。 必填项已用*标注