简易无缝滚动功能齐全轮播组件

因为平时不断需要用到轮播特效,又看不上插件,都是来一个就手写一个,写多了就写了个通用性较好的出来,以后都不用写了,直接调用。之前也有相关轮播的文章,而且印象中有几篇了。但这篇是更灵活,更通用,使用更傻瓜。使用细节注意看后面的段落。

无论是大图banner的轮播:

banner轮播特效图

还是卡片式轮播,只要是个轮播都可以实现:
卡片轮播特效图

	
  • /*
  • * 轮播图组件
  • * 轮播内容直接父级容器ul的class为parts
  • * 前进按钮class为next,后退按钮class为prev
  • * 小点容器ul的class为dot。
  • * */
  • function initSlider($contaner){
  • var $ul = $("ul.parts",$contaner);
  • var $liw,
  • $dot大发快3 = $('.dot',$contaner),$dotLi = $('>li',$dot),
  • lenth,
  • $Li = $('>li',$ul);
  • var speed = 5000;
  • initElement();
  • initCss();
  • function initCss(){
  • //主要用于纠正一些致命的样式
  • $contaner.css({
  • "position":"relative",
  • "over大发快3flow":"hidden"
  • });
  • $ul.css({
  • "position":"absolute",
  • "height":"100%",大发快3
  • "top":大发快30,
  • "left":0
  • });
  • $Li.css({
  • "height": "100%",
  • "float": "left"
  • });
  • }
  • //响应式设计(设置样式)
  • function i大发快3nitElement(){
  • $ul.append($ul.html());
  • lenth = $('>li',$ul).length;
  • for(var i = 0; i < lenth / 2; i++){
  • $('<li></li>').appendTo($dot);
  • }
  • $dotLi = $('>li',$dot);
  • }
  • function resize() {
  • var $li = $('>li',$ul);
  • $liw = $ul.parent().width();
  • $ul.width($liw * lenth);
  • $li.width($liw);
  • }
  • //初始化
  • var i = 大发快30;
  • resize();
  • $(window).resize(function(){
  • resize();
  • slide();
  • });
  • //轮播主函数
  • function slide() {
  • if (i >= lenth) {
  • $ul.css('left',(-$liw*lenth/2+$liw)+'px');
  • i = lenth/2;
  • }
  • else if(i<0){
  • $ul.css('left',(-$liw*lenth/2)+'px');
  • i=lenth/2-1;
  • }
  • $ul.stop().animate({'left': -$liw * i},speed/4);
  • $dotLi.eq(i<lenth/2?i:i-lenth/2).addClass('on').siblings().removeClass('on');
  • i++;
  • }
  • slide();
  • var interval = setInterval(slide, speed);//设置定时器开始轮播
  • //焦点点击事大发快3件
  • $dotLi.click(function() {
  • clearInterval(interval);
  • i = $(this).index();
  • slide();
  • interval = setInterval(slide, speed);
  • });
  • //下一张按钮事件
  • $('.next',$contaner).click(function(大发快3) {
  • clearInterval(interval);
  • slide();
  • interval = setInterval(slide, speed);
  • });
  • //上一张按钮事件
  • $('.prev',$contaner).click(function() {
  • clearInterval(interval);
  • i -= 2;
  • slide();
  • interval = setInterval(slide, speed);
  • });
  • //鼠标移入移出事件
  • $ul.mouseover(function() {
  • clearInterval(interval);
  • });
  • $ul.mouseout(function() {
  • interval = setInterval(slide, speed);
  • })
  • }

使用上一定要遵循以下html结构:

	
  • <div id="banner">
  • <div class="banner">
  • <ul class="parts">
  • <li><img src="img/banner1.jpg"></a></li>
  • <li><img src="img/banner2.jpg"></a></li>
  • <li><img src="img/banner3.jpg"></a></li>
  • <li><img src="img/banner4.jpg"></a></li>
  • </ul>
  • <ul class="dot"></ul>
  • <span class="prev"></span&g大发快3t;<span class="next"></span>
  • </div>
  • </div>

注意标颜色的部分,class一定要对应得上,除非你修改我的方法,给它传参进去,但我认为没这个必要,按照这种结构即可。
轮播容器ul.parts,小点的容器ul.dot,前进按钮.next,后退按钮.prev.
样式根据自己喜好写好。样式上需要注意轮播内容li不要margin。

此方法能满足大部大发快3分网页轮播特效,不需要前进后退按钮,就不需要加前进后退按钮html结构,不需要小点就不加小点的容器。

调用只需要传个最外部容器的jq选择器对象即可,如:

initSlider($("#banner"));

发布时间:2017-12-7 22:12 Thursday
  • 版权声明:除非注明,文章均为【seo大发快3】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:seo大发快3

    要做就做最好的网赚资讯博客。欢迎喜欢网赚的朋友加我了解各类网赚动态。扫码添加微信即可

    返回列大发快3表
    上一篇:
    下一篇:

    发表评论

    快捷回复: