第八节列表轮播滚动

效果图

1.html页面DIV

<div class="visual_box ak_left4Top3"  style="margin-top: 1px;height: 27%;"> 
	<div class="visual_title">
		<span class="Top_title">风险评估国家统计</span>
		<img src="css/images/lishisucai/ksh33.png">
	</div>
	<!-- 滚动列表-->
	<div class="visual_chart" id="ak_left4Top3_bar" style="height:calc(95% - 35px);cursor: pointer;" onclick="ak_left_click4.top3Click(true)"></div>
</div>

2.脚本

调用后端接口获取数据

initData: function() {
		var temp = {
			limit: 10,
			offset: 0,
			Authorization: akglobe_config.token,
		};
		var options = new Object();
		// options.url = "/manage-api/TRiskTjfxController/getRiskEvaluationUnit";
		options.url = "/manage-api/TRiskTjfxController/getRiskEvaluationCountry";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
	
		options.callback = function(data) {
			ak_left4Top3.callBackGET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
			ak_left4Top3.callBackGET(ak_ztqg.getRiskEvaluationCountry);
		}else{
			akglobe_config.ajaxQuery(options);
		}
	},

数据回调方法

callBackGET:function(data){
			if(!data) return;
			var data = data.rows;
			ak_left4Top3.initHtml(data);	// 初始化 html
		},

数据列表div拼接，以及调用滚动事件方法

initHtml: function(data) {
		var content = `
			<div class="scroll_tite">
				<div class="scroll_index">序号</div>
				<div class="scroll_name">国家名称</div>
				<div class="scroll_value">数量</div>
			</div>`;
		content += `
			<div class="scroll_container" id="scroll_box_fxpg">
				<ul id="scroll_container1">${ak_left4Top3.createUl(data)}</ul>
				<ul id="scroll_container2"></ul>
			</div>`;
		$("#ak_left4Top3_bar").html(content);
		
		ak_left4Top3.initScroll();	// 初始化滚动事件
		ak_left4Top3.initButton();	// 初始化按钮
	},
	// 生成 ul 结构
	createUl: function(data) {
		// console.log(data);
		var li = '';
		for(let i = 0; i < data.length; i++) {
			li += `<li>
				<div class="scroll_index">${i + 1}</div>
				<div class="scroll_name">${data[i].name==null ? '其他':data[i].name}</div>
				<div class="scroll_value">${data[i].num==null ? '':data[i].num}</div>
			</li>`
		}
		return li;
	},

初始化滚动事件

// 初始化滚动事件
	initScroll: function() {
		var container1 = $("#scroll_container1").html();
		$("#scroll_container2").html(container1);	// 获取 ul1 的 innerHTML, 赋值给 ul2.
		$("#scroll_box_fxpg").scrollTop(0);
		ak_left4Top3.rollStart();
	},
	rollStart: function() {
		ak_left4Top3.rollStop();
		
		// console.log('滚动事件开始.');
		var ulbox = document.getElementById("scroll_box_fxpg");
		var ul1 = document.getElementById("scroll_container1");
		ak_left4Top3.timer = setInterval(()=>{
			// 当滚动高度大于列表内容高度时恢复为0
			if (ulbox.scrollTop >= ul1.scrollHeight) {
					ulbox.scrollTop = 0;
			} else {
					ulbox.scrollTop += ak_left4Top3.speed;
			}
		}, ak_left4Top3.interval);
	},
	rollStop: function() {
		// console.log('滚动事件结束.');
		clearInterval(ak_left4Top3.timer);
	},
	

初始化按钮

// 初始化按钮
	initButton: function() {
		$("#scroll_box_fxpg").mouseover(function () {
			ak_left4Top3.rollStop();
		});
		$("#scroll_box_fxpg").mouseout(function () {
			ak_left4Top3.rollStart();
		});
	}