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

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);
}

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

前端摩天轮效果实现，鼠标移入停止，移出继续转动。
最近实现了摩天轮的效果,记录下实现原理与过程,备忘,分享. 兼容性不高,IE10,11,Chrome41. 360浏览器(急速模式会有卡顿的感觉) 使用css3+js控制了摩天轮旋转,以及鼠标移入移出 ...
jq 实现无缝轮播图
工作中经常会用到轮播图,这里记载两种轮播图,供大家参考一.自动播放的无缝轮播图(一张图片占满屏) 首先是HTML, <div class='bannerCon'><ul class ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
左右无缝轮播图的实现
无缝轮播图: <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.ba ...
【案例】图片无缝轮播效果
知识点: 1.scrollLeft属性 2.克隆节点 3.定时器 4.鼠标移入移除事件 <!DOCTYPE html> <html lang="en"> & ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
手把手教你用 jQuery 制作无缝轮播
Web 开发已经离不开轮播图,目前轮播的样式五花八门,如:淡入淡出型.上下滑动型.左右滑动型.左右滑动无缝型,对比用户体验的话,无缝轮播方式是最好的,因为在播放多张图片的情况下不会出现间断感,该课程用 ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...

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

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

最新文章

热门文章