效果图：
<!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>
<title></title>
<script type="text/javascript" src="jquery-1.5.min.js" language="javascript"></script>
<title>点击滚动</title>
<style type="text/css">
*{margin:0;padding:0}
li{list-style-type:none;}
img{border:0;}
#container{height:180px;background-color:#D0D7DA;width:810px;position:relative;background:url(h300.png) repeat-x left top ;overflow:hidden;}
.ui-slider-prev,.ui-slider-next{text-indent:-9999px;width:30px;height:30px;cursor:pointer;position:absolute;z-index:1000;top:50%;margin-top:-15px;}
.ui-slider-prev{background:url(hori_large.png) repeat-x left top ;}
.ui-slider-next{background:url(hori_large.png) repeat-x left -30px ;right:0;}
.ui-slider-pic{width:750px;height:180px;position:absolute;left:30px;overflow:hidden;}
.ui-slider-pic ul{width:2550px; height:180px;}
.ui-slider-pic ul li{float:left;width:150px;text-align:center;}
.ui-slider-pic ul li img{width:120px; height:150px;background-color:#ffffff;padding:2px;}
</style>
<script type="text/javascript">
$(function () {
var ti = 0;
var ul = $(".ui-slider-pic ul");
var li = ul.find("li");
var width = li.eq(0).width();
var num = 5;
$("#container .ui-slider-prev").click(function () {
ti--;
go(ti);
});
$("#container .ui-slider-next").click(function () {
ti++;
go(ti);
});
function go(i) {
var move = width * num * i;
if (move < 0) { ti = 0; return }
if (move > width * li.length) { ti = i - 1; return; }
$(".ui-slider-pic ul").animate({ marginLeft: -move }, 1000);
}
});
</script>
</head>
<body>
<div id="container">
<a class="ui-slider-prev" title="向左滚动" >左</a>
<a class="ui-slider-next" title="向右滚动" >右</a>
<div class="ui-slider-pic">
<ul>
<li><img src="http://img.ffffound.com/static-data/assets/6/f8a9dd53720bf31b5917915e8222c27370a3681c_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/68e9a7a8476e26a1022fa5e39ccdda669a5d4f08_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/20417dfc945bae6c720a660625e9652a154c2c94_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/f4a9f29299f3dba6e7af0ac3c5aff93e01f874d3_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/ca6f0c9ac0c6e3bfce827cd92833e1db620b6377_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/809fcfbb8a1f58d1d47a760fd4283556cce201ef_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
<li><img src="http://img.ffffound.com/static-data/assets/6/49d6ae8901500f473a2e3e58e5b5ddc0e788bc9d_m.jpg" alt="demo" title="demo" /></li>
</ul>
</div>
</div>
<p>
</p>
<p>
</p>
</body>
</html>
扫一扫
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
