一.效果圖
二.使用流程
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>