jq 无缝轮播，鼠标移入停止，移出滚动。

最新推荐文章于 2022-10-24 15:41:22 发布

默默无闻的FYH

最新推荐文章于 2022-10-24 15:41:22 发布

阅读量781

点赞数

文章标签： javascript 前端 ajax jquery

本文链接：https://blog.csdn.net/weixin_46263815/article/details/122448955

版权

1：首先，jq 和 myScroll.js 及 scroll.css 这是必须要引入的。别的js文件和css文件是你自己写的请求数据，样式等…
在这里插入图片描述

2：这个是页面的结构 — 样式的话ul不能设置高度，给li设置高度。

 <div class="container">
          <div class="rs-scroll">
                <ul class="cityRank" id="cityRank-1">
                </ul>
          </div>
  </div>

3：把你要渲染的数据给ul后，然后在函数里面放下面的进行滚动的代码。（ajax获取数据及下面的是写在你自己的js文件中的。）

    $('.rs-scroll').scroll({
    speed: 70, //数值越大，速度越慢
    rowHeight: 330 //li的高度
});

4：jq文件自己网上搜一下就可以下载，剩下的两个我贴到下面。

（1）：mySroll.js 文件

// JavaScript Document
(function ($) {
	var intId = [];
	var bakObj = '';
	$.fn.myScrollStop = function () {
		$.each(intId, function (i, item) {
			console.log(item);
			clearInterval(item);
		})
	};

	$.fn.scroll = function (options) {
		//默认配置
		var defaults = {
			speed: 40,
			rowHeight: 24
		};

		var opts = $.extend({}, defaults, options);

		function marquee(obj, step) {
			obj.find("ul").animate({
				marginTop: '-=1'
			}, 0,
				function () {
					// console.log('animate');
					var s = Math.abs(parseInt($(this).css("margin-top")));
					// console.log(s, step)
					if (s >= step) {
						let li = $(this).find("li:nth-child(1)");
						console.log(li)
						li.remove();
						$(this).css("margin-top", 0);
					}
				});
		}

		//备份
		function bak(obj) {
			bakObj = obj.html();
		}

		//恢复
		function restore(obj) {
			obj.html(bakObj);
		}

		//滚动定时(到底时持续3秒后重置列表, 再次滚动)
		function setMyInterval(i, obj, rowHeight, speed) {
			intId[i] = setInterval(function () {
				if (obj.find("ul").height() <= obj.height()) {
					console.log(obj.find("ul").height(), obj.height())
					// clearInterval(intId[i]);
					if (obj.find("ul").height() < 550) {
						return
					} else {
						setTimeout(function () {
							restore(obj);
							clearInterval(intId[i]);
							setMyInterval(i, obj, rowHeight, speed);
						}, 3000);
					}

				} else {
					marquee(obj, rowHeight);
				}
			}, speed);

			obj.hover(function () {
				clearInterval(intId[i]);
			}, function () {
				clearInterval(intId[i]);
				setMyInterval(i, obj, rowHeight, speed);
			});
		}

		this.each(function (i) {
			var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
			bak(_this);
			setMyInterval(i, _this, sh, speed);
		});

	}

})(jQuery);

（2）：scroll.css 文件其实里面的样式，好多都用不上，自己可以酌情删除。

/* CSS Document */
*{margin:0;}
.res-punish-list ul,
.res-punish-list li,
.res-punish-list dl,
.res-punish-listol{
	list-style:none;
}

.res-punish-list{ 
	overflow-y: scroll;
    width: 101%;
}
.res-punish-list li{ 
	padding: 4px 10px;
	color: #efefef;
	/*font-size: 35px;*/
}
.res-punish-list li.lieven{ 
	/*background: rgba(239, 239, 239, 0.09); */
	color: #efefef;
}
.res-punish-list li{ 
	height:40px; 
	line-height:40px;
}

.res-punish-list div.link{
	cursor: pointer;
}
.res-punish-list div{
	text-align: center;
	color:#f5f6f7;
	font-size: 20px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.link{
	color: #55b5fe;
}
.res-punish-list div.scroll-25{
	float: left;
	width: 24%;
    padding: 0 2px;
}

div.scroll-title{
	color: #fff !important;
	font-size: 22px;
}
.res-punish-list div.scroll{
	text-overflow: ellipsis;
    overflow: hidden;
}
.res-punish-list div.scroll-20{
	float: left;
	width: 19%;
}

.res-punish-list div.scroll-30{
	float: left;
	width: 29%;
}

.res-punish-list div.scroll-40{
	float: left;
	width: 39%;
}

.res-punish-list div.scroll-10{
	float: left;
	width: 9%;
}
.res-punish-list div.scroll-50{
	float: left;
	width: 49%;
}
.res-punish-list div.scroll-60{
	float: left;
	width: 59%;
}
.res-punish-list div.scroll-15{
	float: left;
	width: 14%;
	cursor: pointer;
}
.scroll-bg{
	background: rgba(57, 84, 111, 0.28);
	margin:auto 2px;
}

.scroll-bg-sel{
	background-color:rgba(212, 56, 86,1) ;
	margin:auto 2px;
}

/*.res-punish-list a:focus{
	background: url(../../../zhsz/images/selected.png) no-repeat;
	background-size: 100% 100%;
}*/
.res-punish-list a {
	 margin:auto 2px;
	 text-decoration: none;
	 float: left;
	 width: 12%;
	 text-align: center;
	 color: #FFF3F3;
	 font-size: 13px;
}

.gas-li  a {
	 margin:auto 2px;
	 text-decoration: none;
	 float: left;
	 width: 10%;
	 text-align: center;
	 color: #FFF3F3;
	 font-size: 13px;
}
.gas-div{
	/*background-color: black;*/
	background: url(../../../zhsz/images/selected.png) no-repeat;
	background-size: 100% 100%;
}
.gas-a{
	 background: rgba(57, 84, 111, 0.28);
}

#scroll-list2 ul li:nth-of-type(odd) div{ 
	background:rgba(57, 84, 111, 0.28);
}

#scroll-list2 ul li:nth-of-type(even) div,#scroll-list-title ul li div{ 
	background:rgba(115, 143, 195, 0.35);
}