全国服务热线:4008-888-888

公司新闻

小程序专属定制开发_jQuery完成轮播图及其原理详

jQuery实现轮播图及其原理详解       这篇文章主要为大家详细介绍了jQuery实现轮播图及其原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" 
 title JQuery轮播图 /title 
 style 
 padding:0;
 margin:0;
 .container{
 width:600px;
 height:400px;
 overflow: hidden;
 position:relative;
 margin:0 auto;
 .list{
 width:3000px;
 height:400px;
 position:absolute;
 .list img{
 float:left;
 width:600px;
 height:400px;
 .pointer{
 position:absolute;
 width:100px;
 bottom:20px;
 left:250px;
 .pointer span{
 cursor:pointer;
 display:inline-block;
 width:10px;
 height:10px;
 background: #7b7d80;
 border-radius:50%;
 border:1px solid #fff;
 .pointer .on{
 background: #28a4c9;
 .arrow{
 position:absolute;
 text-decoration:none;
 width:40px;
 height:40px;
 background: #727d8f;
 color:#fff;
 font-weight: bold;
 line-height:40px;
 text-align:center;
 top:180px;
 display:none;
 .arrow:hover{
 background: #0f0f0f;
 .left{
 left:0;
 .right{
 right:0;
 .container:hover .arrow{
 display:block;
 /style 
 /head 
 body 
 div 
 div 
 !-- img src="../static/image/photo1.jpg" alt="5"/ -- 
 img src="../static/image/banner.jpg" alt="1"/ 
 img src="../static/image/slide1.jpg" alt="2"/ 
 img src="../static/image/slide1.jpg" alt="3"/ 
 img src="../static/image/slide1.jpg" alt="4"/ 
 img src="../static/image/photo1.jpg" alt="5"/ 
 !-- img src="../static/image/banner.jpg" alt="1"/ -- 
 /div 
 div 
 span index="1" /span 
 span index="2" /span 
 span index="3" /span 
 span index="4" /span 
 span index="5" /span 
 /div 
 a href="#" rel="external nofollow" rel="external nofollow" /a 
 a href="#" rel="external nofollow" rel="external nofollow" /a 
 /div 
 script src="../static/js/jquery-3.2.1.min.js" /script 
 script 
 var imgCount = 5;
 var index = 1;
 var intervalId;
 var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
 //自动轮播功能 使用定时器
 autoNextPage();
 function autoNextPage(){
 intervalId = setInterval(function(){
 nextPage(true);
 },3000);
 //当鼠标移入 停止轮播
 $('.container').mouseover(function(){
 console.log('hah');
 clearInterval(intervalId);
 // 当鼠标移出,开始轮播
 $('.container').mouseout(function(){
 autoNextPage();
 //点击下一页 上一页的功能
 $('.left').click(function(){
 nextPage(true);
 $('.right').click(function(){
 nextPage(false);
 //小圆点的相应功能 事件委托
 clickButtons();
 function clickButtons(){
 var length = buttonSpan.length;
 for(var i=0;i length;i++){
 buttonSpan[i].onclick = function(){
 $(buttonSpan[index-1]).removeClass('on');
 if($(this).attr('index')==1){
 index = 5;
 }else{
 index = $(this).attr('index')-1;
 nextPage(true);
 function nextPage(next){
 var targetLeft = 0;
 //当前的圆点去掉on样式
 $(buttonSpan[index-1]).removeClass('on');
 if(next){//往后走
 if(index == 5){//到最后一张,直接跳到第一张
 targetLeft = 0;
 index = 1;
 }else{
 index++;
 targetLeft = -600*(index-1);
 }else{//往前走
 if(index == 1){//在第一张,直接跳到第五张
 index = 5;
 targetLeft = -600*(imgCount-1);
 }else{
 index--;
 targetLeft = -600*(index-1);
 $('.list').animate({left:targetLeft+'px'});
 //更新后的圆点加上样式
 $(buttonSpan[index-1]).addClass('on');

效果图:

原理:

页面结构方面:

将轮播图容器设置成相对定位,宽度设置成图片的宽度;容器中分为四部分:轮播的图片;点击的小按钮;前一张;后一张

样式方面:

轮播图容器为相对定位,宽度/高度设置成图片的宽度/高度,设置overflow为hidden; 容器中的每一部分都设置成绝对定位,放到相应的位置; 轮播图片的容器宽度设置成所有图片的宽度和,left开始先设置为0; 每张图片宽度一样,都设成左浮动,左右图片都在一行排列,所以轮播图的实质是装有图片的容器的移动,每次移动的距离为一张图片的宽度,这样每次就只显示一张图片; 前一张/后一张设置成display为none,当鼠标移入总容器时,再设置成display为block



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服