当前位置:小鱼儿玄机二站 > 关于计算机 > 小鱼儿玄机二站jquery达成定时自动轮播特效,按

小鱼儿玄机二站jquery达成定时自动轮播特效,按

文章作者:关于计算机 上传时间:2019-09-03

本次的轮播图是在上一篇小说jQuery手动点击达成图片轮播特效的基本功上写出来的,也正是此次浮现的是手动点击轮播效果以及定期自动轮播效果的顺序,建议想连贯学习的同伴把自身事先的篇章看一看,看完后再看那篇小说~~~~

jquery特效(4)—轮播图②(定期自动轮播),jquery

前天逛了一天街,把田子坊、人民广场、静安寺公园遛了贰次,吃了众多美味可口的东西~然后就回集团非凡地探究代码了,也终于把定期自动轮播程序写出来了,特意说美赞臣下,本次的轮播图是在前日小说中jquery特效(3)—轮播图①(手动点击轮播)的功底上写出来的,相当于此番小说呈现的是手动点击轮播效果以及定时自动轮播效果的主次,提议想连贯学习的伙伴把本身前些天写的笔记看完后再看那篇文章~~

下边来探视小编做的尾声按期自动轮播效果以及手动点击轮播效果:

小鱼儿玄机二站 1

 

对于地点的体现动画速度非常的慢的原故是因为本身的截图软件是中灰版,免费的~你们知道,就是卡卡的,真正的效果与利益比这些速度慢,並且依旧匀速,能够商用~所以上边的显示动画只可以当作完功能果的参照,不要太在乎它的来得速度~(≧▽≦)/~啦啦啦

 

 

一、主体程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>轮播图①(手动点击轮播)</title>
        <link type="text/css" rel="stylesheet" href="css/layout.css"  />
    </head>
    <body>
        <div class="slideShow">
            <!--图片布局开始-->
            <ul>
                <li><a href="#"><img src="img/picture01.jpg" /></a></li>
                <li><a href="#"><img src="img/picture02.jpg" /></a></li>
                <li><a href="#"><img src="img/picture03.jpg" /></a></li>
                <li><a href="#"><img src="img/picture04.jpg" /></a></li>
            </ul>
            <!--图片布局结束-->

            <!--按钮布局开始-->
            <div class="showNav">
                1
                2
                3
                4
            </div>
            <!--按钮布局结束-->
        </div>
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/layout.js"></script>
    </body>
</html>

额,上边的大旨程序和后日的写的笔记没有分别,未做任何修改~感兴趣的能够看今天的笔记说明,笔者本次小说重视会在Jquery程序里面

 

 

二、CSS样式

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.slideShow{
    width: 346px;
    height: 210px;     /*其实就是图片的高度*/
    border: 1px #eeeeee solid;
    margin: 100px auto;
    position: relative;
    overflow: hidden;    /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
    width: 2000px;
    position: relative;     /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShow ul li{
    float: left;     /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
    width: 346px;
}
.slideShow .showNav{     /*用绝对定位给数字按钮进行布局*/
    position: absolute;
    right: 10px;
    bottom: 5px;
    text-align:center;
    font-size: 12px;    
    line-height: 20px;
}
.slideShow .showNav span{
    cursor: pointer;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background: #ff5a28;
    margin-left: 2px;
    color: #fff;
}
.slideShow .showNav .active{
    background: #b63e1a;
}

哈哈,上边的体裁程序也是和明天的写的笔记未有分别,未做任何改动~感兴趣的能够看前几天的笔记表明,小编此番随笔入眼会在Jquery程序里面

 

 

三、jQuery程序

首先说一下定期自动轮播的规律:

1、首先得开多少个沙漏,固然计时器的年华设置为3000ms,也正是2S反应计时器实施一遍操作

2、放大计时器每隔2S施行的操作正是模拟按次序点击数字按键,也正是触发click事件,让图片左移

 

先来看大要效果落到实处的jQuery代码一:

        var timer=null;   //定时器返回值,主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
        timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1,这样就可以实现顺序轮播图片
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click事件
        },2000);   //2000为轮播的时间

地方的主次能够兑现每隔2S图形的轮播效果,可是轮播到最后一张图的时候会告一段落,因为尚未看清iNow是或不是达到最后一张图,所以有了上面的代码二:

     var timer=null;   //定时器返回值,主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
        timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1,这样就可以实现顺序轮播图片
            if(iNow>showNumber.length-1){    //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
        },2000);   //2000为轮播的时间

故此jQuery程序的完好代码程序如下:

$(document).ready(function(){
    var slideShow=$(".slideShow"),     //获取最外层框架的名称
        ul=slideShow.find("ul"),      
        showNumber=slideShow.find(".showNav span"),//获取按钮
        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度
        var timer=null;   //定时器返回值,主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0

        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件      
            $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
            var index=$(this).index();  //获取哪个按钮被点击,也就是找到被点击按钮的索引值
            ul.animate({
                "left":-oneWidth*iNow,   //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值index确定
            })
        });

        timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1,这样就可以实现顺序轮播图片
            if(iNow>showNumber.length-1){    //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
        },2000);   //2000为轮播的时间
})

地方的表明写的很详细了,重如果为了有助于想学学的小同伙看,不过其实本人写程序不会注释的那么详细,都以很轻巧的内容啦,看到这里你大概以为jQuery程序就完了,那就大错特错了,因为机关轮播效果是毋庸置疑的,不过手动点击时就能出错,小编特别做了一段Gif动画浮现出错的法力:

小鱼儿玄机二站 2

观看上边包车型地铁职能你就能够蓦然大悟,图片自动轮播时,你固然点击按键它也只是应和你弹指间,跳转到你点击的开关,不过只是持续一会要么按它轮播的主次,不理会你点击的按键后应该走的轮播次序,至于原因嘛~~~

是因为手动点击时index的值未赋值给停车计时器的图片索引iNow,那样iNow就不能储存你点击的按键索引值,相当于不理解你点击的哪些开关,既然知道了原委,那么下边就必要开展修改了~~~~

 

修改产生后的jQuery程序最后版正是:

$(document).ready(function(){
    var slideShow=$(".slideShow"),     //获取最外层框架的名称
        ul=slideShow.find("ul"),      
        showNumber=slideShow.find(".showNav span"),//获取按钮
        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度
        var timer=null;   //定时器返回值,主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0

        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件      
            $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
            var index=$(this).index();  //获取哪个按钮被点击,也就是找到被点击按钮的索引值
            iNow=index;
            ul.animate({
                "left":-oneWidth*iNow,   //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定
            })
        });

        timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1,这样就可以实现顺序轮播图片
            if(iNow>showNumber.length-1){    //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
        },2000);   //2000为轮播的时间
})

O(∩_∩)O哈哈哈~,总算写完了~很有成就感,下一次小说策动写鼠标悬浮在轮播图上方时图片甘休轮播,鼠标移走后图片接着进行轮播的代码~~~~

 

本人才疏学浅,小说也是不管三七二十一写写的,大概有不当的地点,大神看到能够建议来哦~我保险不打死你~~

 

先天逛了一天街,把田子坊、人民广场、静安寺公园遛了贰次,吃了大多美味可口的事物~...

下边来拜望自家做的最后定期自动轮播效果以及手动点击轮播效果:

 小鱼儿玄机二站 3

对此地点的显得动画速度极快的原由是因为自个儿的截图软件是乌紫版,免费的~你们知道,便是卡卡的,真正的功能比那一个速度慢,何况依然匀速,能够商用~所以上边的来得动画只好作为完功用果的参阅。
一、主体程序

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>轮播图①(手动点击轮播)</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <div class="slideShow">
  <!--图片布局开始-->
  <ul>
  <li><a href="#"><img src="img/picture01.jpg" /></a></li>
  <li><a href="#"><img src="img/picture02.jpg" /></a></li>
  <li><a href="#"><img src="img/picture03.jpg" /></a></li>
  <li><a href="#"><img src="img/picture04.jpg" /></a></li>
  </ul>
  <!--图片布局结束-->

  <!--按钮布局开始-->
  <div class="showNav">
  1
  2
  3
  4
  </div>
  <!--按钮布局结束-->
 </div>
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/layout.js"></script>
 </body>
</html>

额,上边的重心程序和前一篇未有分别,未做别的改造~感兴趣的能够查阅第一篇小说,小编这次散文入眼会在Jquery程序里面
二、CSS样式

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px; /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShow ul li{
 float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

三、jQuery程序
首先说一下定期自动轮播的规律:
1、首先得开贰个反应计时器,假使电火花计时器的岁月设置为三千ms,约等于2S计时器施行二遍操作
2、放大计时器每隔2S实行的操作正是模仿按次序点击数字按键,也正是触发click事件,让图片左移
先来看大意效果完毕的jQuery代码一:      

 var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
 timer=setInterval(function(){ //打开定时器
  iNow++;    //让图片的索引值次序加1,这样就可以实现顺序轮播图片
  showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
 },2000); //2000为轮播的时间

地点的顺序能够完结每隔2S图片的轮播效果,不过轮播到终极一张图的时候会告一段落,因为从没看清iNow是还是不是达到最后一张图,所以有了上面包车型大巴代码二:  

var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
 timer=setInterval(function(){ //打开定时器
  iNow++;    //让图片的索引值次序加1,这样就可以实现顺序轮播图片
  if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
  iNow=0;
  }
  showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
 },2000); //2000为轮播的时间

进而jQuery程序的完好代码程序如下:

$(document).ready(function(){
 var slideShow=$(".slideShow"), //获取最外层框架的名称
 ul=slideShow.find("ul"), 
 showNumber=slideShow.find(".showNav span"),//获取按钮
 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
 var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0

 showNumber.on("click",function(){  //为每个按钮绑定一个点击事件 
  $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
  var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
  ul.animate({
  "left":-oneWidth*iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值index确定
  })
 });

 timer=setInterval(function(){ //打开定时器
  iNow++;    //让图片的索引值次序加1,这样就可以实现顺序轮播图片
  if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
  iNow=0;
  }
  showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
 },2000); //2000为轮播的时间
})

地点的申明写的很详细了,首假诺为着有利于想学学的同伴看,不过事实上本人写程序不会注释的那么详细,都以很简短的剧情啦,看到此间你可能感到jQuery程序就完了,那就大错特错了,因为机关轮播效果是精确的,然而手动点击时就能够出错,笔者非常做了一段Gif动画浮现出错的意义:

小鱼儿玄机二站 4

见到地点的作用你就能够蓦地大悟,图片自动轮播时,你纵然点击开关它也只是相应你弹指间,跳转到你点击的开关,不过唯有持续一会要么按它轮播的程序,不理会你点击的开关后应当走的轮播次序,关于原因嘛

是因为手动点击时index的值未赋值给机械漏刻的图片索引iNow,那样iNow就不能够积攒你点击的按键索引值,相当于不亮堂你点击的哪个按键,既然知道了始末,那么上面就需求张开修改了。

修改产生后的jQuery程序最后版正是:

$(document).ready(function(){
 var slideShow=$(".slideShow"), //获取最外层框架的名称
 ul=slideShow.find("ul"), 
 showNumber=slideShow.find(".showNav span"),//获取按钮
 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
 var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0

 showNumber.on("click",function(){  //为每个按钮绑定一个点击事件 
  $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
  var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
  iNow=index;
  ul.animate({
  "left":-oneWidth*iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定
  })
 });

 timer=setInterval(function(){ //打开定时器
  iNow++;    //让图片的索引值次序加1,这样就可以实现顺序轮播图片
  if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
  iNow=0;
  }
  showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
 },2000); //2000为轮播的时间
})

理想专项论题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上正是本文的全体内容,后一次就为我们大饱眼福鼠标悬浮在轮播图上方时图片截至轮播,鼠标移走后图片接着进行轮播的代码,不要走开。

你或然感兴趣的文章:

  • 12款杰出的美丽的女人型—jquery图片轮播插件—前端开拓必备
  • 原生js和jquery完成图片轮播特效
  • jQuery图片轮播的具体贯彻
  • Jquery代码达成图片轮播效果(一)
  • 遵照JQuery的实现图片轮播效果(核心图)
  • 采取jquery写的左右轮播图特效
  • 原生js和jquery达成图片轮播淡入淡出效果
  • jQuery插件slides实现无缝轮播图特效
  • jquery完毕左右无缝轮播图
  • 简言之达成jQuery轮播效果

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:小鱼儿玄机二站jquery达成定时自动轮播特效,按

关键词: