前端踩坑（三）--------------------------div轮播图（表格轮播）利⽤jquery 实现 表格的轮播
⽂章⽬录
⼀设计⽬标
1. 页⾯加载, 使表格轮播
2. ⿏标放⼊停⽌轮播: clearInterval(timer)；清定时器
3. ⿏标离开：重启定时器: setInterval(function(){ }, 50)
⼆项⽬参考
1. 利⽤JQ函数
1. mouseenter
2. mouseleave
2. 核⼼代码
这⾥⽤到了函数式的写法, 将滚动代码放⼊⼀个函数 , 然后在 事件中调⽤函数
1. setInterval
2. mouseenter
3. 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)
})
}
三项⽬搭建
1. 引⼊ jq ⽂件
2. 新建css样式
3. 定义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>
jquery自动轮播图代码
<div class="chartBox">
<div class="bd"id="rollingDiv" 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>
<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>
<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论