使用jQuery插件实现消息资讯列表信息滚动
2021-05-07 本文已影响0人
兰觅
一.效果图
效果图
二.使用流程
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>
