教你一步步用jQyery实现轮播器

前端之家收集整理的这篇文章主要介绍了教你一步步用jQyery实现轮播器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现原理

如图,试想一下,若是将

    的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用
  • 包着并且设置了左浮动。

    那么当我们向左移动ul的时候并且移动的距离为

  • 的宽度,第二个
  • 不就被移动到了
    的窗口,这样一来图片不就被一张一张显示出来了吗?

    接下来我们在设置

    属性overflow:hidden,那么
    窗口以外的图片不显示,只显示移动到当前窗口的图片,是不是又完美了一些,感觉快做好了是吧!

    说了一些原理,好了,直接上代码,记得引入jquery。

    这是div做的布局,做的时候记得加上边框,做后在删掉,这样便于测试

接下来设置一下样式

.slideShow{ border:0px solid blue; width:600px; height:450px; margin:50px auto; position:relative; } .nav-t{ border:0px solid red; width:580px; height:430px; margin:8px auto; position:relative; overflow:hidden; } .nav-t ul{ border:0px solid green; list-style:none; width:3000px; height:430px; margin:0; padding:0; position:relative; } .nav-t li{ height:427px; width:580px; float:left; } .nav-b{ position:absolute; top:390px; left:220px; cursor:default; } .nav-b span{ margin-right:5px; border:1px solid red; padding:0 6px; border-radius:12px; color:#fff; background:rgba(132,125,119,0.5); cursor:pointer; } .nav-b span.active{ background:rgba(0,0.8); }

用js实现点击轮播图片自动轮播图片,鼠标移动上去停止轮播

$(function(){
var slide=$(".slideShow"),navt=slide.find(".nav-t"),ul=navt.find("ul"),navbs=slide.find(".nav-b span"),onwidth=ul.find("li").eq(0).width(),//获取ul下的li宽度
timer=null,inow=0;
navt.hover(function(){
clearInterval(timer); //鼠标移上去,清除掉自动轮播功能,即定时轮播
},autoPlay);
navbs.on("click",function(){ //点击轮播事件
var me=$(this);
inow=me.index(); //此处变量用的与自动轮播函数里的相同,为的是能在随便点击后,自动轮播时按照我们点击了的继续向后轮播,这叫动态实时
ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口
navbs.removeClass("active"); //清除掉上一个点击按钮的样式
me.addClass("active"); //为当前被点击的按钮添加第一个按钮样式
});
autoPlay();
function autoPlay(){ //自动轮播函数
timer=setInterval(function(){ //开定时器
inow++;
if(inow==navbs.length){ //判断是否到了最后一张,若是到了,返回到第一张
inow=0
}
navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件,trigger为jQuery的自动调用函数
},3000);
}

});

});

看一下效果图?好的

总结

好了,以上就是利用jQyery实现轮播器的全部内容了,怎么样,要不你也做一个?希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

猜你在找的JavaScript相关文章