<!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" />
<title>Jquery滚动插件–Xslider：支持水平滚动和垂直滚动的多种效果！_滚动代码_JS代码_一流资源网 </title>
<meta name="keywords" content="Jquery滚动插件–Xslider：支持水平滚动和垂直滚动的多种效果！" />
<meta name="description" content="可以实现上下、左右切换的4种常见滚动效果形式！最少仅需传入两个参数： />
<br />
$(".productshow").Xslider({ unitdisplayed:3, numtoMove:3});写滚动效果的html结构可能" />
<link rel="stylesheet" type="text/css" href="http://www.16css.com/skin/mb001/images/demo.css" />
<style type="text/css">
body{margin: 0 auto;text-align: center;color: #616161;font: 12px/1.5 arial, \5b8b\4f53;}
ul, p{margin: 0;padding: 0;}
li{list-style-type: none;}
img{border: 0;}
:focus{outline: 0;}
h1{color: #000;margin-bottom: 30px;font-size: 30px;}
h2{color: #000;background-color: #eee;width: 540px;margin-left: auto;margin-right: auto;text-align: left;padding-left: 5px;}
a:link, a:visited{color: #333;text-decoration: none;}
a:hover{color: #000;}
a.abtn{position: absolute;top: 4px;display: block;height: 132px;width: 6px;overflow: hidden;text-indent: -20000px;background: url(images/arrow3.gif) 0px center no-repeat;}
a.aleft{left: 7px;}
a.agrayleft{cursor: default;background-position: -12px center;}
a.aright{right: 7px;background-position: -6px center;}
a.agrayright{cursor: default;background-position: -18px center;}
.productshow{width: 540px;height: 132px;padding: 4px 0;margin: 20px auto;position: relative;text-align: center;font-family: 微软雅黑, 黑体;background: url(images/productshow.png) no-repeat;}
.productshow .scrollcontainer{width: 486px;height: 130px;overflow: hidden;position: relative;margin: 0 auto;}
.productshow .scrollcontainer ul{width: 20000px;position: absolute;left: 0px;top: 0px;}
.productshow .scrollcontainer li{float: left;width: 162px;height: 130px;text-align: center;}
.productshow .scrollcontainer li.last{background: none;}
.productshow .scrollcontainer li div{height: 95px;width: 162px;overflow: hidden;text-align: center;}
.productshow .scrollcontainer a:hover img{filter: alpha(opacity=86);-moz-opacity: 0.86;opacity: 0.86;}
.productshow .scrollcontainer li p{margin: 0;line-height: 32px;}
.vscroll{width: 540px;height: 120px;overflow: hidden;margin: 20px auto;position: relative;text-align: left;line-height: 20px;}
.vscroll .vscrollobj{position: absolute;left: 0px;top: 0px;}
.vscroll a.abtn{background-color: #f1f1f1;border: 1px solid #666;height: 110px;}
.videolistwraper{width: 206px;height: 243px;margin: 0 auto;overflow: hidden;text-align: center;position: relative;}
.videolist{text-align: center;width: 106px;height: 200px;overflow: hidden;margin: 25px auto 25px;position: relative;}
.videolist ul{position: absolute;left: 0px;top: 0px;}
.videolist li{height: 100px;overflow: hidden;}
.videolist .img{position: relative;width: 106px;height: 53px;cursor: pointer;}
.videolist .img img{width: 100px;height: 47px;border: 3px solid #fff;}
.videolist .img a{display: block;width: 106px;height: 53px;position: absolute;left: 0;top: 0;filter: alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}
.videolist .img a:hover{display: block;filter: alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.videolist .img a.now{background: none;}
.videolist p{margin-bottom: 0;font-family: 微软雅黑;}
.newslistwraper{width: 540px;margin: 0 auto 150px;position: relative;}
.newslistwraper a.abtn{height: 20px;top: 0;}
.newslist{height: 20px;line-height: 20px;overflow: hidden;position: relative;}
.newslist ul{position: absolute;left: 0px;top: 0px;width: 540px;}
</style>
</head>
<body>
<div id="dtit"><a href="http://www.16css.com/scroll/439.html" target="_blank" style="float:left">Jquery滚动插件–Xslider：支持水平滚动和垂直滚动的多种效果</a><a href="http://www.16css.com/scroll/439.html" target="_blank" style="float:right">下载地址 | 使用教程</a></div>
<div class="ad">
<script src=http://www.16css.com/d/js/acmsd/thea8.js></script></div>
<div id="demotit"><span>效果演示</span></div>
<div align="center">
<!--////////////////////////////////////// 代码开始 www.16css.com ///////////////////////////////////////-->
<h2 id="101">一、左右切换：每次移动固定距离</h2>
<div class="productshow">
<div class="scrollcontainer">
<ul>
<li>
<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
<p><a href="">1.家电彩涂钢板</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
<p><a href="">2.幻彩变色彩涂钢板</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
<p><a href="">3.环保彩涂钢板</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
<p><a href="">4.家电彩涂钢板</a></p>
</li>
</ul>
</div>
<a class="abtn aleft" href="#left">左移</a>
<a class="abtn aright" href="#right">右移</a>
</div>
<h2 id="102">二、左右切换：最后一个显示在最右侧</h2>
<div class="productshow">
<div class="scrollcontainer">
<ul>
<li>
<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
<p><a href="">1.家电彩涂钢板</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
<p><a href="">2.幻彩变色彩涂钢板</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
<p><a href="">3.环保彩涂钢板</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
<p><a href="">4.家电彩涂钢板</a></p>
</li>
</ul>
</div>
<a class="abtn aleft" href="#left">左移</a>
<a class="abtn aright" href="#right">右移</a>
</div>
<h2 id="103">三、自动切换</h2>
<div class="productshow">
<div class="scrollcontainer">
<ul>
<li>
<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
<p><a href="">1.家电彩涂钢板 first</a></p>
</li>
<li>
<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
<p><a href="">2.幻彩变色彩涂钢板</a></p>
</li>
<li>
Jquery div、图片水平滚动，最后一张停止.zip （23个子文件） 
Jquery滚动插件–Xslider images 
animat_icon_ie6.png 543B
video2.jpg 2KB temp_pro2.jpg 8KB download_ico.jpg 1009B video7.jpg 2KB video8.jpg 2KB video5.jpg 2KB video3.jpg 2KB head.jpg 8KB
arrow3.gif 91B animat_icon_6.png 1KB temp_pro1.jpg 2KB video6.jpg 3KB
Thumbs.db 42KB productshow.png 1KB video4.jpg 2KB video1.jpg 2KB productshow.gif 121B
index.html 19KB js jquery.Xslider.js 7KB Xslider.js 6KB jquery-1.4.1.min.js 69KB demo.html 6KB资源评论
