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

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