Jquery实现的ul垂直滚动(可文字+图片滚动)

前言

现在大部分博客讲的实现或多或少都有些问题（比如：滚动是实现了，但是是全部li展示出来的滚动，我都全部展示出来了，还要滚动干嘛？） ，小编就分享一个及其好用的滚动插件，代码量就在100左右，可以拿来就用。

演示视频

https://githubs.xyz/show/115.mp4

代码引入

首先要引入依赖的jquery

<script src="js/jquery-1.8.3.min.js"></script>

然后引入主插件代码

<script src="js/jquery.scroll.js"></script>

js代码

$(function(){
	$('.hadluo').JqueryScroll({
		showItems: 3, // 可视化展示li个数
		pause: 2000   //滚动速度
	});
});

html代码

<div class="hadluo">
		<ul>
			<li>1、<a href="#" target="_blank">11111111111111111</a></li>
			<li>2、<a href="#" target="_blank">2222222222222222222222</a></li>
			<li>3、<a href="#" target="_blank">33333333333333333333333</a></li>
			<li>4、<a href="#" target="_blank">444444444444444444444</a></li>
			<li>5、<a href="#" target="_blank">555555555555555555555</a></li>
			<li>6、<a href="#" target="_blank">666666666666666666</a></li>
			<li>7、<a href="#" target="_blank">777777777777777777</a></li>
			<li>8、<a href="#" target="_blank">88888888888888888888</a></li>
			<li>9、<a href="#" target="_blank">99999999999999999999</a></li>
			<li>10、<a href=#" target="_blank">10000000000000000000</a></li>
		</ul>
	</div>

这样就是实现了文字的滚动。

插件的一些其他的设置

      var defaults = {
            speed: 700,  // 一次滚动 要的时间
            pause: 4000,   // 多久滚动一次
            showItems: 3,  // 可视化li个数
            animation: '',
            mousePause: true, // 鼠标移动上去是否暂停滚动
            isPaused: false,
            direction: 'up',  // 滚动方向 up:向上 down:向下
            height: 0
        };
       // 插件源码git：   gitee.com/hadluo/html_code.git 

关键代码

return this.each(function () {
            var obj = $(this);
            var maxHeight = 0;

            obj.css({ overflow: 'hidden', position: 'relative' })
			.children('ul').css({ position: 'absolute', margin: 0, padding: 0 })
			.children('li').css({ margin: 0, padding: 0 });

            if (options.height == 0) {
                obj.children('ul').children('li').each(function () {
                    if ($(this).height() > maxHeight) {
                        maxHeight = $(this).height();
                    }
                });

                obj.children('ul').children('li').each(function () {
                    $(this).height(maxHeight);
                });

                obj.height(maxHeight * options.showItems);
            }
            else {
                obj.height(options.height);
            }
          
         //......................
        });

有任何问题欢迎私聊~

结尾语

我是分享教程源码的老罗，欢迎关注

源码下载

https://githubs.xyz/y115.html