前端踩坑(三)--------------------------div轮播图(表格轮播)

最新推荐文章于 2024-05-22 11:20:37 发布

小李科技

最新推荐文章于 2024-05-22 11:20:37 发布

阅读量4.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_35812380/article/details/88554430

版权

前端踩坑专栏收录该内容

10 篇文章 1 订阅

订阅专栏

利用jquery 实现表格的轮播

文章目录

一设计目标

页面加载, 使表格轮播
鼠标放入停止轮播: clearInterval(timer);清定时器
鼠标离开:重启定时器: setInterval(function(){ }, 50)

二项目参考

利用JQ函数
- mouseenter
- mouseleave

核心代码

这里用到了函数式的写法, 将滚动代码放入一个函数 , 然后在事件中调用函数

setInterval
mouseenter
mouseleave

这三个方法中的第一个参数是一个函数, 可以将函数名传入 ,这个函数名,就代表了该函数,而不用重新定义方法,

提高代码的复用性。

function rollingDiv() {
    let i = 0; 
    var moveScoll= function () {
        i++;
        // 临界点的判断
        if (i>500) {
            i=0
        }
        console.log('move'+ i);
        $("#rollingDiv").scrollTop(i);
    } 
    var timer= setInterval( moveScoll, 50);
    // 鼠标移入到rollingDiv，清定时器
    $("#rollingDiv").mouseenter(function(){
        clearInterval(timer);
    });

    // 鼠标移出，重新开启定时器
    $("#rollingDiv").mouseleave(function(){
        timer = setInterval(moveScoll, 50)
    })
   
}

三项目搭建

引入 jq 文件
新建css样式
定义script标签 , 放入核心函数

3.1 Carousel.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>表格轮播</title>
    <!-- jquery -->
    <script src="jquery-1.11.3.min.js"></script>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body bgcolor="black">
    <div class="chartBox">
      <div class="bd" id="rollingDiv" style="display:block" width="100%">
          <table class="table_wrj" >
            <tr>
              <th >标题</th>
              <th >时间</th>
              <th >用户名</th>
            </tr>
            <tr>
              <td>冬性、半冬性和春性品种是怎样划分的？</td>
              <td>5分钟前</td>
              <td>万磊</td>
            </tr>
            <tr>
              <td>小麦品种对日照长短的反应有几种类型？</td>
              <td>刚刚</td>
              <td>余霞</td>
            </tr>
            <tr>
              <td>为什么有些好种子在田间出苗不好？</td>
              <td>两天前</td>
              <td>魏霞</td>
            </tr>
            <tr>
              <td>怎样测定种子发芽势和发芽率？</td>
              <td>半小时前</td>
              <td>常娟</td>
            </tr>
            <tr>
              <td>影响小麦分蘖的因素有哪些？</td>
              <td>四天前</td>
              <td>于涛</td>
            </tr>
            <tr>
              <td>麦田耕作措施对小麦生长有哪些作用？</td>
              <td>三天前</td>
              <td>胡伟</td>
            </tr>
            <tr>
              <td>小麦不同生育时期对水分的需求有何特点？</td>
              <td>1小时前</td>
              <td>武勇</td>
            </tr>
            <tr>
              <td>小麦不同生育时期对养分的需求有何特点？</td>
              <td>5分钟前</td>
              <td>高明</td>
            </tr>
            <tr>
              <td>不同肥料元素与小麦生长发育有何关系？</td>
              <td>刚刚</td>
              <td>史桂英</td>
            </tr>
            <tr>
              <td>为什么要提倡在冬前化学除草？</td>
              <td>两天前</td>
              <td>曹静</td>
            </tr>
            <tr>
              <td>小麦叶面施肥有什么作用？</td>
              <td>半小时前</td>
              <td>崔艳</td>
            </tr>
            <tr>
              <td>小麦什么时候收获最好？</td>
              <td>四天前</td>
              <td>邹明</td>
            </tr>
            <tr>
              <td>栽培措施怎样影响产量形成？</td>
              <td>三天前</td>
              <td>易勇</td>
            </tr>
            <tr>
              <td>小麦品质包括哪些内容？</td>
              <td>1小时前</td>
              <td>彭桂英</td>
            </tr>
            <tr>
              <td>什么是强筋小麦、中筋小麦和弱筋小麦？</td>
              <td>5分钟前</td>
              <td>康刚</td>
            </tr>
            <tr>
              <td>影响小麦品质的主要因素有哪些？</td>
              <td>刚刚</td>
              <td>于静</td>
            </tr>
            <tr>
              <td>高产小麦对土壤的基本要求有哪些？</td>
              <td>两天前</td>
              <td>袁桂英</td>
            </tr>
            <tr>
              <td>肥料如何施用更科学？</td>
              <td>半小时前</td>
              <td>陆丽</td>
            </tr>
            <tr>
              <td>什么是小麦营养临界期和营养最大效率期？</td>
              <td>四天前</td>
              <td>江洋</td>
            </tr>
            <tr>
              <td>不同类型麦田如何整地？</td>
              <td>三天前</td>
              <td>江娟</td>
            </tr>
            <tr>
              <td>旱地小麦如何保墒？</td>
              <td>1小时前</td>
              <td>谢勇</td>
            </tr>
            <tr>
              <td>怎样因地制宜选用小麦良种？</td>
              <td>5分钟前</td>
              <td>方军</td>
            </tr>
            <tr>
              <td>小麦品种“多、乱、杂”对生产有何影响？</td>
              <td>刚刚</td>
              <td>冯伟</td>
            </tr>
            <tr>
              <td>玉米干腐病的症状和发生规律是什么？</td>
              <td>两天前</td>
              <td>孙艳</td>
            </tr>
            <tr>
              <td>玉米矮花叶病的症状和发生规律是什么？</td>
              <td>半小时前</td>
              <td>朱霞</td>
            </tr>
            <tr>
              <td>玉米粗缩病的症状和发生规律是什么？</td>
              <td>四天前</td>
              <td>萧秀兰</td>
            </tr>
            <tr>
              <td>玉米青枯病的症状和发生规律是什么？</td>
              <td>三天前</td>
              <td>侯秀兰</td>
            </tr>
            <tr>
              <td>山西省玉米虫害有哪些？</td>
              <td>1小时前</td>
              <td>锺静</td>
            </tr>
            <tr>
              <td>蝼蛄的发生、危害规律是什么？</td>
              <td>5分钟前</td>
              <td>魏霞</td>
            </tr>
            <tr>
              <td>蛴螬的发生、危害规律是什么？</td>
              <td>刚刚</td>
              <td>崔秀英</td>
            </tr>
            <tr>
              <td>金针虫的发生、危害规律是什么？</td>
              <td>两天前</td>
              <td>孙平</td>
            </tr>
            <tr>
              <td>地老虎的发生、危害规律是什么？</td>
              <td>半小时前</td>
              <td>李娜</td>
            </tr>
            <tr>
              <td>玉米蓟马的发生、危害规律是什么？</td>
              <td>四天前</td>
              <td>王娜</td>
            </tr>
            <tr>
              <td>玉米叶螨的发生、危害规律是什么？</td>
              <td>三天前</td>
              <td>吴敏</td>
            </tr>
            <tr>
              <td>玉米蚜的发生、危害规律是什么？</td>
              <td>1小时前</td>
              <td>贾军</td>
            </tr>
            <tr>
              <td>玉米螟的发生、危害规律是什么？</td>
              <td>5分钟前</td>
              <td>丁军</td>
            </tr>
            <tr>
              <td>山西省对玉米病害的防治经验是什么？</td>
              <td>刚刚</td>
              <td>孙洋</td>
            </tr>
            <tr>
              <td>山西省对玉米虫害的防治经验是什么？</td>
              <td>两天前</td>
              <td>罗超</td>
            </tr>
            <tr>
              <td>玉米病虫草害综合配套措施的原则是什么？</td>
              <td>半小时前</td>
              <td>郝桂英</td>
            </tr>
            <tr>
              <td>玉米播种前防治病虫草害的主要措施是什么？</td>
              <td>四天前</td>
              <td>吕艳</td>
            </tr>
            <tr>
              <td>玉米播种阶段防治病虫草害的措施是什么？</td>
              <td>三天前</td>
              <td>董桂英</td>
            </tr>
            <tr>
              <td>玉米苗期病虫草害防治的主要措施是什么？</td>
              <td>1小时前</td>
              <td>马超</td>
            </tr>
            <tr>
              <td>玉米拔节期病虫防治的主要措施是什么？</td>
              <td>5分钟前</td>
              <td>康芳</td>
            </tr>
            <tr>
              <td>玉米穗期病虫防治的主要措施是什么？</td>
              <td>刚刚</td>
              <td>王芳</td>
            </tr>
          </table>
        </div>
    </div>
    <!-- 引入自定义的js文件 -->
    <script src="script.js"></script>
  </body>
</html>

3.2 style.css

.bd {
    width: 25%;
    height: 400px;
    padding: 5px;
    background-size: 100% 100%;
    overflow: auto;
  }
.chart-box {
    width: 100%;
    height: 200px;
  }
  .table_wrj {
    font-size: 12px;
    table-layout:fixed;
  }
  
  .table_wrj th {
    color: #03a8f0;
  }
  
  .table_wrj td {
    color: #fff;
    white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
  }

3.3 js文件

function rollingDiv() {
  let i = 0;
  var moveScoll = function() {
    i++;
    // 临界点的判断
    if (i > 500) {
      i = 0;
    }
    console.log("move" + i);
    $("#rollingDiv").scrollTop(i);
  };
  var timer = setInterval(moveScoll, 50);
  // 鼠标移入到rollingDiv，清定时器
  $("#rollingDiv").mouseenter(function() {
    clearInterval(timer);
  });

  // 鼠标移出，重新开启定时器
  $("#rollingDiv").mouseleave(function() {
    timer = setInterval(moveScoll, 50);
  });
}

rollingDiv();

代码附件:

代码附件放在这里, 欢迎交流:

https://download.csdn.net/my

彩蛋

讲到这里,你应该要问我,为什么是前端踩坑了,坑在哪里,感兴趣可以看下文:

setTimeout与setInterval区别

参考资料

在这里祭出神文, 讲解: setTimeout与setInterval区别

The setTimeout & setInterval are the 2 timers functions of JavaScript. They can be used to create functions that executes 1 time or unlimited times. That is, if you want a function to execute 1 time then use .setTimeout(), if you want to execute a function unlimited times then use .setInterval().

You can also add time in mill-seconds to these 2 function. That means - that milli-second is the time for them to execute after.

You can use the “setTimeout() and setInterval()” functions on every JavaScript libraries and functions - jQuery, Angular, React, Vue, Knockoutjs, AngularJS, ….

Lets take examples of these 2 timer functions:

1. I want to show an alert just one time after 3 seconds.

Here I will use .setTimeout() and the code will be:

setTimeout(function(){ alert("Hi"); }, 3000);

2. I want to show an alert unlimited times after every 3 seconds.

Here I will use .setInterval() and the code will be:

setInterval(function(){ alert("Hi"); }, 3000);

There are lots of uses of these 2 function in created eye catchy effects like:

Sliding images sliders.
Animations.
Background changing effects.

If you want to learn how to create these features then I am sharing an excellent tutorial link - 4 jQuery Timer examples which all developers should know

After understanding the setTimeout() and setInterval()you would have understood the power of these 2 timer methods.

小李科技

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
4
评论
前端踩坑(三)--------------------------div轮播图(表格轮播)

3 div轮播图利用jquery 实现表格的轮播文章目录3 div轮播图一设计目标二项目参考三项目搭建3.1 Carousel.html3.2 style.css3.3 js文件代码附件:彩蛋参考资料一设计目标页面加载, 使表格轮播鼠标放入停止轮播: clearInterval(timer);清定时器鼠标放入:重启定时器: setInterval(function...
复制链接

扫一扫