简单代码制作jquery幻灯片,焦点图,banner特效_Jquery|setInterval

作者:Davidszhou   来源:   时间:2016-09-09 22:50:35   点击:

简单代码制作jquery幻灯片,焦点图,banner特效
    紧固件行业分销商城开发已经进入了尾声,历经近两个月想想也是挺伟大的,嘿嘿…… 从前端到后端,从DIVCSS到jquery在到后端PHP,从ajax到API接口接入,对于专心学习PHP一周的菜鸟→我,也是挺烧脑,各种百度,各种翻手册,好了苦水就不倒了,进入正题。
    商城进入尾声阶段,打开商城首页发现banner图还是静态的,一个孤零零的图片,想想其他的网站jquery幻灯片,焦点图banner特效各种炫,无奈啊,Jquery还在百度阶段,一切以学习为主,自己动手写个简单的banner图切换效果吧,先来看看最终的banner焦点图幻灯片特效:

简单代码制作jquery幻灯片,焦点图,banner特效
    进入实际操作阶段:
    一、先把整个布局做出来,思路:
    1、一个大DIV内包含两个UL,一个UL放图片列表,一个UL放下面原点按钮
    代码如下:

    <div id="img">
<ul class="imglist">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
<ul class="imgbutton">
<li></li>
<li></li>
<li></li>
</ul>
</div>


2、给静态代码样式,代码样式,如果看不懂样式,还是先看看CSS基础,思路是打开页面显示第一个图片UL内的第一张图片li,按钮UL定位到如图位置,按钮也没有做直接代码:border-radius:50%;(圆角边框)然后给了一个阴影效果,CSS样式如下:

#img { width:100%; height:330px; margin:0 auto; position:relative; left:0px; top:0px; padding:0px;}
.imglist { width:100%; height:330px; overflow:hidden; list-style:none inside; font-size:0px; position:absolute; left:0px; top:0px; margin:0px; padding:0px;}
.imglist li { display:inline-block;}
.imglist li img { width:100%; height:330px;}
.imgbutton { position:absolute; left:50%; bottom:20px; width:auto; height:35px; line-height:35px; list-style:none inside; margin:0px; padding:0px;}
.imgbutton li { width:20px; height:20px; background-color:rgba(255,255,255,0.8); border-radius:50%; box-shadow:#CCC 0px 0px 5px 0px; display:inline-block; cursor:pointer;}
.imgbutton li:hover{ background-color:rgba(0,153,255,0.8);}


3、开始做Jquery部分:具体解释看每段代码解释:

<script>
$(document).ready(function(e) {//页面载入成功之后执行事件
    $(".imglist li").first().css({"display":"block"});//imglist li即图片UL第一个li添加属性
    $(".imglist li").first().siblings().css({"display":"block"});//imglist li即图片UL第一个li之外的li添加属性
    $(".imgbutton").find("li").click(function(){ //遍历按钮UL的li绑定点击事件,即点击第几个按钮
        var a = parseInt($(this).index()); //获取当前点击的按钮li的索引号即第几个按钮
//        alert(a);
    $(".imglist li").eq(a).fadeIn(500);//对应的点击第几个按钮第几个图片淡入进来
    $(".imglist li").eq(a).siblings().fadeOut(100);//其他图片淡出
    })
    setInterval("upone()",4000);//Jquery的定时执行,可循环,补充一下setTimeout当事件间隔多久只执行一次,
});

    function upone(){    //定时器绑定的间隔执行事件,这里有个问题,本来想用一个变量自增1方式进行循环操作,后来发现不行,之后修改了一下,给当前显示图片添加class属 性,通过class来得知第几个图片li是显示,然后进行下一步操作
    var b = $(".imglist li").length-1;      //获得图片列表数量
    var i = $(".imglist").find(".old").index();//获得当前显示图片的索引号,即第几个图片li显示,前面说了一下
//    alert(i)
//    alert(b)
        if(i<=0){        //这里当页面第一次加载时没有给class实验了一下,获得的值为-1,小于0条件判断
            i=0;
//        alert("a")
        $(".imglist li").eq(i).fadeIn(500);//这里淡入图片首张
        $(".imglist li").eq(i).siblings().fadeOut(100);//除首张图片外其他图片淡出
        i+=1;//i 为何自增1?进入下一张图片
        $(".imglist li").eq(i).addClass("old");//给下一张图片增加class
        $(".imglist li").eq(i).siblings().removeClass("old");//删除已增加的class属性
            }
        else if(i<b&&i>0){    //判断当图片还没有到最后一张且是大于第一张图片的索引号的情况,下面依旧如上
//            alert("b")
        $(".imglist li").eq(i).fadeIn(500);
        $(".imglist li").eq(i).siblings().fadeOut(100);
        i+=1;
        $(".imglist li").eq(i).addClass("old");
        $(".imglist li").eq(i).siblings().removeClass("old");
            }
        else if(i>=b){  //判断当前显示图片是不是已经是最后一张图片了
//            alert("c")
        $(".imglist li").eq(i).fadeIn(500);
        $(".imglist li").eq(i).siblings().fadeOut(100);
        i=0;             //给第一张图片赋值class属性
        $(".imglist li").eq(i).addClass("old");
        $(".imglist li").eq(i).siblings().removeClass("old");
            }
            }

</script>

 

  总结:

1、不管是PHP还是Jquery感觉思路非常重要,有思路做什么都容易

2、补充Jquery定时吧:

     ①、setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

例如:var  a = setInterval("upone()",4000);停止:clearInterval(a);

  ②、setTimeout():用于在指定的毫秒数后调用函数或表达式,    注意:   只调用一次,然后就结束了,我第一次用的就是这个,参数与setInterval()相似

 

TAGS:Jquery , setInterval , 幻灯片 , 焦点图

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/79.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18