网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

jquery如何写出PC端轮播图功能

这篇文章将为大家详细讲解有关jquery如何写出PC端轮播图功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

公司主营业务:网站设计、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出馆陶免费做网站回馈大家。

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。

现在把自己写的轮播图这块代码单独拿出来,做一个小demo写在这里记录一下(demo中轮播图的图片网上随意找的)

实现的效果:

1、自动轮播(轮播时间间隔在js代码中自定义)

2、点击左右侧按钮,实现手动切换

3、底部小圆点根据切换图片的位置相应的显示active状态

4、鼠标经过轮播图区域,停止轮播,离开轮播图区域开始轮播

代码目录结果如下:

jquery如何写出PC端轮播图功能

一、index.html

注:这里以5张图片为例,页面上真正轮播展示给用户看到的是5张不同的图片,但是为了轮播效果的连贯性,所以在第一张图片前面添加上第五张图片,在第五张图片后面加上了第一张图片,所以demo结构里是7张图片,每张图片的尺寸必须都是一样的哦(这里宽高尺寸是720*350px)。




 
 PC-jquery版轮播图
 



 PC-jquery版轮播图
 
  
   
    
  • 图片-5

  •     
  • 图片-1

  •     
  • 图片-2

  •     
  • 图片-3

  •     
  • 图片-4

  •     
  • 图片-5

  •     
  • 图片-1

  •                         
  •     
  •     
  •     
  •       
                
       
        

    二、style.css

    * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
    }
    .layout {
     width: 1000px;
     margin: 30px auto;
    }
    ul,ol,li {
     list-style: none;
    }
    .slide {
     position: relative;
     width: 900px;
     margin:auto;
    }
    .slide .outer {
     position: relative;
     margin: 30px auto;
     width: 720px;
     height: 400px;
     overflow: hidden;
    }
    .slide .outer .inner {
     width: 5040px;
     height: 350px;
     position: absolute;
     left: -720px;
     top: 0;
    }
    .slide .outer .inner li {
     float: left;
     height: 350px;
    }
    .slide .outer .inner li a {
     display: block;
     position: relative;
     width: 100%;
     height: 100%;
    }
    .slide .outer .inner li a p {
     position: absolute;
     left: 0;
     bottom: 0;
     color: #fff;
     font-size: 18px;
     width: 720px;
     height: 80px;
     line-height: 80px;
     padding-left: 50px;
     background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
    }
    .slide .outer .dot {
     margin-top: 365px;
     text-align: center;
    }
    .slide .outer .dot li {
     height: 6px;
     width: 6px;
     border-radius: 3px;
     background-color: #d2cbcb;
     display: inline-block;
     margin: 0 3px;
    }
    .slide .outer .dot li.active {
     background-color: #6e5ca5;
    }
    .slide .arrow-box {
     position: absolute;
     width: 900px;
     height: 60px;
     top: 150px;
     left: 0;
    }
    .slide .arrow-box .arrow {
     width: 60px;
     height: 60px;
     line-height: 60px;
     text-align: center;
     border-radius: 30px;
     background-color: #dde2e6;
     font-size: 60px;
     color: #999;
     cursor: pointer;
    }
    .slide .arrow-box .arrow.arrow-l {
     float: left;
    }
    .slide .arrow-box .arrow.arrow-r {
     float: right;
    }

    三、index.js

    注:js代码中,每个变量均已给了注释。为了防止快速多次点击,而出现动画不停的现象,这里在每次切换图片的时候先调用stop(false,true)。但是注意在向左侧滚动的时候,滚动到最后一张图图片后,再次切换时就不要用stop(false,true),而是要瞬间定位到第一张图片(其实是dom结构中的第二张)的位置,同样,向右侧滚动时,当滚动到第一张图片后,再次切换时就不用stop(false,true),而是要瞬间定位到最后一张图片(其实是dom结构中的倒数第二张)的位置。

    var interval = 3000;    //轮播间隔时间
    var arrowL = $('#arrow_l');   //左侧箭头
    var arrowR = $('#arrow_r');   //右侧箭头
    
    var slideBox = $('#slide');   //轮播图区域
    var innerBox = $('#inner');   //内层大盒子
    var img = innerBox.children('li'); //每个图片
    var dot = $('#dot');    //小圆点盒子
    
    var imgW = $(img[0]).outerWidth(); //每个li标签的宽度
    
    var imgCount = 5;     //总图片个数(不同图片的个数)(实际dom上是有7张)
    var i = 0;       //初始化为第0张图片
    timer = null;      //定时器
    
    //自动轮播
    timer = setInterval(function () {
     i++;
     innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
     dot.find('li').removeClass('active').eq(i-1).addClass('active')
     if(i > imgCount){
      innerBox.animate({'left':-1*imgW+'px'},0);
      dot.find('li').removeClass('active').eq(0).addClass('active')
      i = 1;
     }
    },interval)
    
    //点击右侧箭头,播放下一张
    arrowR.click(function () {
     i++;
     innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
     dot.find('li').removeClass('active').eq(i-1).addClass('active')
     if(i > imgCount){
      innerBox.animate({'left':-1*imgW+'px'},0);
      dot.find('li').removeClass('active').eq(0).addClass('active')
      i = 1;
     }
    })
    
    //点击左侧箭头,播放上一张
    arrowL.click(function () {
     i--;
     innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
     dot.find('li').removeClass('active').eq(i-1).addClass('active')
     if(i < 1){
      innerBox.animate({'left':-imgCount*imgW+'px'},0);
      dot.find('li').removeClass('active').eq(imgCount-1).addClass('active')
      i = imgCount;
     }
    })
    //鼠标经过轮播图区域时,清除定时器,停止自动轮播
    slideBox.mouseenter(function () {
     clearInterval(timer);
    })
    
    //鼠标离开轮播图区域时,重新启动自动轮播
    slideBox.mouseleave(function () {
     timer = setInterval(function () {
      i++;
      innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
      dot.find('li').removeClass('active').eq(i-1).addClass('active')
      if(i > imgCount){
       innerBox.animate({'left':-1*imgW+'px'},0);
       dot.find('li').removeClass('active').eq(0).addClass('active')
       i = 1;
      }
     },interval)
    })

    四、效果图展示

    jquery如何写出PC端轮播图功能

    jquery如何写出PC端轮播图功能

    jquery如何写出PC端轮播图功能

    关于“jquery如何写出PC端轮播图功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    分享名称:jquery如何写出PC端轮播图功能
    链接URL:http://bjjierui.cn/article/gccjsh.html