jquery如何实现左右轮播切换效果

小编给大家分享一下jquery如何实现左右轮播切换效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

目前创新互联建站已为近千家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器托管、企业网站设计、汨罗网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码,供大家参考,具体内容如下

html:

 
 
 
  
 Document 
  
 
 
  
   
   
    
    
    
    
   
   
   
   
   
   
   
   
 
           

css:

/*banner部分*/ 
#banner{ 
 width:960px; 
 height:384px; 
 overflow:hidden; 
 position:relative; 
} 
#banner ul.banner-img{ 
 position:absolute; left:0; 
} 
#banner ul.banner-img>li{float:left;width:960px;} 
#banner ul.banner-img img{ 
 width:960px; 
 height:384px; 
} 
#banner a.ck-slide{ 
 position:absolute; 
 top:150px; 
 width:35px; 
 height:70px; 
 border-radius:3px; 
 background:#000; 
 opacity:0.15; 
 transition:all .3s linear; 
} 
#banner a.ck-left{ 
 left:40px; 
 background: #000 url(../img/index/arrow-left.png) no-repeat center center; 
} 
#banner a.ck-right{ 
 right:0px; 
 background:#000 url(../img/index/arrow-right.png) no-repeat center center; 
} 
#banner a.ck-slide:hover{ 
 opacity:0.3; 
} 
#banner ul.indicators{ 
 position:absolute; 
 bottom:10px; 
 left:50%; 
 margin-left:-34px; 
 list-style: none; 
} 
#banner ul.indicators li{ 
 width:12px; 
 height:12px; 
 background:#fff; 
 border-radius:50%; 
 float:left; 
 margin-right:5px; 
 transition:all .2s linear; 
} 
#banner ul.indicators li:hover,#banner ul.indicators li.hover{ 
 cursor:pointer; 
 background-color:#0AA1ED; 
}

 js:

$(()=>{ 
 $.ajax({ 
  type:"get", 
  url:"php/xz.php", 
  dataType:"json" 
 }).then(data=>{ 
  console.log(data); 
  var html=""; 
  const LIWIDTH=960; 
  for(var item of data){ 
   html+=`
  •                        
  • `;    }    html+=`
  •                        
  • `;    console.log(html);    var $ulImg=$(".banner-img");    $ulImg.html(html).css("width",LIWIDTH*(data.length+1));      var $ids=$(".indicators");        $ids.html("
  • ".repeat(data.length)).children().first().addClass("hover");        const WAIT=2000,DURA=1000;    var moved=0,timer=null;    function move(dir=1){     moved+=dir;     console.log("moved="+moved);       $ulImg.animate({      left:-LIWIDTH*moved     },DURA,()=>{      if(moved%data.length==0){       moved=0;       $ulImg.css("left",0);      }      $ids.children(`li:eq(${moved})`).addClass("hover").siblings().removeClass("hover");     })    }      var timer=setInterval(move,WAIT);      $('#banner').hover(     ()=>{ //这个是什么?      clearInterval(timer),      timer=null;     },     ()=>{      timer=setInterval(move,WAIT);     }    );      $("[data-move=right]").click(()=>{     //防止动画叠加     /*clearInterval(timer);     timer=null;     move();     timer=setInterval(move,WAIT);*/     if(!$ulImg.is(":animated"))      move();    });      $("[data-move=left]").click(()=>{     if(!$ulImg.is(":animated")){      if(moved==0){       $ulImg.css("left",-LIWIDTH*data.length);       moved=data.length;      }      move(-1);     }    });      $ids.on("mouseover","li",function(){     var $li=$(this);     var i=$li.index();     moved=i;     $ulImg.stop(true).animate({      left:-LIWIDTH*moved     },DURA,()=>{      $ids.children(":eq("+i+")")       .addClass("hover")       .siblings().removeClass("hover");     })    });   })  })

    php:

    jquery是什么

    jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

    看完了这篇文章,相信你对“jquery如何实现左右轮播切换效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    分享文章:jquery如何实现左右轮播切换效果
    文章出自:http://myzitong.com/article/jpphch.html

    其他资讯