使用jQuery插件实现消息资讯列表信息滚动

作者: 兰觅 | 来源:发表于2021-05-07 18:03 被阅读0次

使用jQuery插件实现消息资讯列表信息滚动
vue移动端设置出生日期
基于 jquery.nicescroll 实现瀑布流
jQuery相关插件
05_jQuery_无缝滚动轮播效果插件封装
17_day 整屏幕滚动
整屏幕滚动
前端的整屏滚动
整屏幕滚动
整屏幕滚动

一.效果图

效果图

二.使用流程

1.导入插件
2.引入插件到Html页面
3.编写属性信息
插件后续安排上链接

三.HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="images/ilogo.png" type="image/x-icon">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- 导入消息滚动插件 -->
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript">
$(function() {
    $(".demo1").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible: 6,  //显示行数
        auto:2000,  //滚动时间间隔2秒
        speed:1500
    });

});
</script>
</head>
<body>
<div class="mainWarp">
  <div class="mainLeft">
    <div class="divbox">
      <div class="titbox">
        <p class="ccsl">公司产品</p>
      </div>
      <div class="demo1"> 
      <ul>
        <li><a href="piclist.html" class="ccsl">川酒</a></li>
        <li><a href="piclist.html" class="ccsl">贵酒</a></li>
        <li><a href="piclist.html" class="ccsl">苏酒</a></li>
        <li><a href="piclist.html" class="ccsl">京酒</a></li>
        <li><a href="piclist.html" class="ccsl">鄂酒</a></li>
    <li><a href="piclist.html" class="ccsl">川酒</a></li>
    <li><a href="piclist.html" class="ccsl">贵酒</a></li>
    <li><a href="piclist.html" class="ccsl">苏酒</a></li>
    <li><a href="piclist.html" class="ccsl">京酒</a></li>
    <li><a href="piclist.html" class="ccsl">苏酒</a></li>
    <li><a href="piclist.html" class="ccsl">京酒</a></li>
    <li><a href="piclist.html" class="ccsl">鄂酒</a></li>
      </ul>
      </div>
    </div>
  </div>
</body>
</html>