jQuery实现轮播

一、轮播的实现原理

1.轮播是把需要轮播的图片浮动水平排列成一排。 2.然后设置一个视窗,大小等于一张图片。 3.视窗的overflow设置为hidden,溢出部分不可见。 4.点击下一页,所有图片就水平移动一个宽度。 5.如果要实现左右滚动无限循环的效果,就需要在图片列表开头和结尾分别添加最后一张图和第一张图

就像一张胶卷,每次展示一张图片,通过移动胶卷来切换可视的图片。

二、使用jquery实现图片自动轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限循环滚动轮播</title>
  <style>
    .carousel {
      margin: 0 auto;
      margin-top: 200px;
    }
    .carousel ul,
    .carousel li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .carousel .img-ct img {
      width: 400px;
      height: 250px;
    }

    /*触发BFC,清除浮动*/
    .carousel .img-ct {
      position: absolute;
      overflow: hidden;
    }

    /*让需要轮播的图片水平浮动排列一排*/
    .carousel .img-ct li {
      float: left;
    }
    
    /*创造可视窗口,大小等于一个图片的宽度,溢出部分不展示*/
    .carousel {
      position: relative;
      width: 400px;
      height: 250px;
      overflow: hidden;
    }
    
    /*设置左右播放按钮的样式*/
    .carousel .arrow {
      position: absolute;
      top: 50%;
      margin-top: -15px;
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #fff;
      line-height: 30px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      text-decoration: none;
    }
    .carousel .arrow:hover {
      opacity: 0.7;
    }
    .carousel .pre {
      left: 10px;
    }
    .carousel .next {
      right: 10px;
    }
    
    /*设置图片上的四个小按钮*/
    .carousel .bullet {
      position: absolute;
      width: 100%;
      /*子元素不是浮动元素,不用设置高度*/
      bottom: 10px;
      text-align: center;
    }
    .carousel .bullet >li {
      display: inline-block;
      width: 30px;
      height: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      /*设置inline-block会出现缝隙问题,解决方法设置font-size: 0;*/
      font-size: 0;
    }
    .carousel .bullet >li.active {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct">
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-de9e5f9191b7173c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-8614362c64c4ac1c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-fc558baf8b53a5c7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-3ceb510fedaa85c8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    </ul>
    <a href="#" class="pre arrow"><</a>
    <a href="#" class="next arrow">></a>
    <ul class="bullet">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script>
    var $imgCt = $('.img-ct'),
        $imgWidth = $('.carousel .img-ct >li').eq(0).width(),
        $imgLen = $('.carousel .img-ct >li').length,
        $preBtn = $('.carousel .pre'),
        $nextBtn = $('.carousel .next'),
        $bullet = $('.bullet li'),
        //设置状态锁
        lock = false,
        //设置计时器
        clock,
        //记录当前所在页面
        currentIndex = 0;



    var $last = $imgCt.children("li").last().clone(),
        $first = $imgCt.children("li").first().clone();
    
    //在图片列表开头和结尾分别添加最后一张图和第一张图,这时图片的个数变为6,而$imgLen值还是4,不是动态改变的
    $imgCt.append($first);
    $imgCt.prepend($last);

    $imgCt.css({
      //因为轮播的图片个数可以根据需求改变,所以$imgCt的宽度不应该写死,而应该动态计算
      width: $imgWidth*($imgLen+2),
      left: -$imgWidth
    })


    $preBtn.on('click',function(){
      playPre(1);
    })
    $nextBtn.on('click',function(){
      playNext(1);
    })

    timeClock();

    //当鼠标在图片上停留时,停止自动轮播
    $(".carousel").on("mouseenter",function(){
        clearInterval(clock)
    })
    //当鼠标离开时,开始自动轮播
    $(".carousel").on("mouseleave",function(){
        timeClock()
    })

    function playNext(len){
      //设置状态锁防止滚动过程中重复点击
      if(lock){
        return;
      }
      lock = true
      $imgCt.animate({
        left: '-='+len*$imgWidth
      },function(){
        currentIndex+=len;
        if (currentIndex === $imgLen) {
          currentIndex = 0;
          $imgCt.css({left: -$imgWidth})
        }
        setBullet();
        lock = false;
      })
    }
    function playPre(len){
      if(lock){
        return;
      }
      lock = true
      $imgCt.animate({
        left: '+='+len*$imgWidth
      },function(){
        currentIndex-=len;
        if (currentIndex === -1) {
          currentIndex = $imgLen-1;
          $imgCt.css({left: -$imgLen*$imgWidth})
        }
        //当滚动到某个图片时,为其对应的小按钮设置样式
        setBullet();
        lock = false;
      })
    }

    //点击小按钮滚动到对应图片上
    $bullet.on('click',function(){
      var index = $(this).index();
      if(index > currentIndex){
        playNext(index - currentIndex)
      }else if(index < currentIndex){
        playPre(currentIndex - index);
      }
    })

    function setBullet(){
      $bullet.removeClass('active')
             .eq(currentIndex)
             .addClass('active')
    }

    //自动轮播,每个一秒滚动一次
    function timeClock(){
      clock = setInterval(function(){
         playNext(1)
       },1000)
    }
  </script>
</body>
</html>

效果展示

三、在自动轮播代码的基础上改进代码,实现渐变轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限循环滚动轮播</title>
  <style>
    .carousel {
      margin: 0 auto;
      margin-top: 200px;
    }
    .carousel ul,
    .carousel li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .carousel .img-ct img {
      width: 400px;
      height: 250px;
    }

    /*触发BFC,清除浮动*/
    .carousel .img-ct {
      position: absolute;
      overflow: hidden;
    }

    /*让需要轮播的图片水平浮动排列一排*/
    .carousel .img-ct li {
      float: left;
    }
    
    /*创造可视窗口,大小等于一个图片的宽度,溢出部分不展示*/
    .carousel {
      position: relative;
      width: 400px;
      height: 250px;
      overflow: hidden;
    }
    
    /*设置左右播放按钮的样式*/
    .carousel .arrow {
      position: absolute;
      top: 50%;
      margin-top: -15px;
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #fff;
      line-height: 30px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      text-decoration: none;
    }
    .carousel .arrow:hover {
      opacity: 0.7;
    }
    .carousel .pre {
      left: 10px;
    }
    .carousel .next {
      right: 10px;
    }
    
    /*设置图片上的四个小按钮*/
    .carousel .bullet {
      position: absolute;
      width: 100%;
      /*子元素不是浮动元素,不用设置高度*/
      bottom: 10px;
      text-align: center;
    }
    .carousel .bullet >li {
      display: inline-block;
      width: 30px;
      height: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      /*设置inline-block会出现缝隙问题,解决方法设置font-size: 0;*/
      font-size: 0;
    }
    .carousel .bullet >li.active {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct">
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-cfc32cb79ef01739.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-25860355b0862774.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-be4729b225df4e45.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
      <li><a href="javascript:void(0)">![图片加载失败](http://upload-images.jianshu.io/upload_images/1969310-aa0ed1f379f33f06.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    </ul>
    <a href="#" class="pre arrow"><</a>
    <a href="#" class="next arrow">></a>
    <ul class="bullet">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script>
    var $imgCt = $('.img-ct'),
        $imgWidth = $('.carousel .img-ct >li').eq(0).width(),
        $imgLen = $('.carousel .img-ct >li').length,
        $preBtn = $('.carousel .pre'),
        $nextBtn = $('.carousel .next'),
        $bullet = $('.bullet li'),
        //设置状态锁
        lock = false,
        //设置计时器
        clock,
        //记录当前所在页面
        currentIndex = 0;



    var $last = $imgCt.children("li").last().clone(),
        $first = $imgCt.children("li").first().clone();
    
    //在图片列表开头和结尾分别添加最后一张图和第一张图,这时图片的个数变为6,而$imgLen值还是4,不是动态改变的
    $imgCt.append($first);
    $imgCt.prepend($last);

    $imgCt.css({
      //因为轮播的图片个数可以根据需求改变,所以$imgCt的宽度不应该写死,而应该动态计算
      width: $imgWidth*($imgLen+2),
      left: -$imgWidth
    })


    $preBtn.on('click',function(){
      playPre(1);
    })
    $nextBtn.on('click',function(){
      playNext(1);
    })

    timeClock();

    //当鼠标在图片上停留时,停止自动轮播
    $(".carousel").on("mouseenter",function(){
        clearInterval(clock)
    })
    //当鼠标离开时,开始自动轮播
    $(".carousel").on("mouseleave",function(){
        timeClock()
    })

    function playNext(len){
      //设置状态锁防止滚动过程中重复点击
      if(lock){
        return;
      }
      lock = true
      //当前图片淡出
      $imgCt.fadeOut(200,function(){
        currentIndex+=len;
      })
      $imgCt.fadeIn(200,function(){
        if (currentIndex === $imgLen) {
          $imgCt.css({left: -$imgWidth});
          currentIndex = 0;
        }
        setBullet();
        lock = false;
      })
      /*
      $imgCt.animate({
        left: '-='+len*$imgWidth
      },function(){
        currentIndex+=len;
        if (currentIndex === $imgLen) {
          currentIndex = 0;
          $imgCt.css({left: -$imgWidth})
        }
      })
      */
    }
    function playPre(len){
      if(lock){
        return;
      }
      lock = true;
      $imgCt.fadeOut(200,function(){
        currentIndex -= len;
      })
      $imgCt.fadeIn(200,function(){
        if (currentIndex === -1) {
          $imgCt.css({left: -$imgLen*$imgWidth});
          currentIndex = $imgLen-1;
        }
        setBullet();
        lock = false;
      })
      /*
      $imgCt.animate({
        left: '+='+len*$imgWidth
      },function(){
        currentIndex-=len;
        if (currentIndex === -1) {
          currentIndex = $imgLen-1;
          $imgCt.css({left: -$imgLen*$imgWidth})
        }
        当滚动到某个图片时,为其对应的小按钮设置样式
        setBullet();
        lock = false;
      })
      */
    }

    //点击小按钮滚动到对应图片上
    $bullet.on('click',function(){
      var index = $(this).index();
      if(index > currentIndex){
        playNext(index - currentIndex)
      }else if(index < currentIndex){
        playPre(currentIndex - index);
      }
    })

    function setBullet(){
      $bullet.removeClass('active')
             .eq(currentIndex)
             .addClass('active')
    }

    //自动轮播,每个一秒滚动一次
    function timeClock(){
      clock = setInterval(function(){
         playNext(1)
       },2000)
    }
  </script>
</body>
</html>

效果展示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

webgame开发中常用的一些类

1、加载队列QueueLoader,游戏一定是有很多的资源需要加载,这个类可以让资源以顺序进行加载;

442
来自专栏程序员的诗和远方

Canvas基础-粒子动画Part3

在上一篇文章 Canvas基础-粒子动画Part2 中讲了让图片做粒子动画。上篇写完不久,想起既然是用Canvas,写上去的东西都可以做粒子动画,那么就补充讲...

3909
来自专栏游戏杂谈

【转】Itunes Connect新版本如何提交应用

5) Enter the following new iOS app information:     a) Company Name: If this...

954
来自专栏老司机的简书

TableView优化之快速滑动下的忽略加载

这两天一直在搞一个TableView的工具类,因为觉得这个东西写完可以一劳永逸,所以就去搞了一下,主要是有助于TableView的快捷开发。没什么好废话的了,直...

632
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之absolute

1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

2944
来自专栏小李刀刀的专栏

自适应的多列图文混排改进

关于网页两栏、三栏的布局讨论由来已久,有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案,而是一个专门针对两栏图文混排的特定需求的改进型方...

3054
来自专栏安恒网络空间安全讲武堂

[HCTF] share write up

从http://share.2018.hctf.io/robots.txt中获取到题目部分源码

532
来自专栏c#开发者

LightSwitch 2011 数据字段唯一性验证方案

LightSwitch 2011 数据字段唯一性验证方案 ? 验证单表数据的某个字段不能输入重复值 设置实体字段唯一索引 ? 如果不写代码,那么验证只会在...

3295
来自专栏Winter漫聊技术

动起来-几个Android常用动效

本文Demo: https://github.com/XunMengWinter/Fly Material Design初露锋芒: http://www.ji...

753
来自专栏超然的博客

css 定位

正常文档流模式下,后面的dom元素覆盖前面的,如果将前面的元素设置了relative将提升它自身的层级

1061

扫码关注云+社区