您的位置：首页 > Web前端 > JQuery

jquery制作向上滚动图片幻灯片

2011-04-03 22:44 441 查看

效果图：

<!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>
<style type="text/css">
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img{border:0;}
.pic-show{width:360px;height:190px;overflow:hidden;position:relative;}
.ui-pic{position:absolute;}
.ui-pic li{height:190px;overflow:hidden;}
.pic-show .ui-btn{position:absolute;right:2px;bottom:2px;}
.pic-show .ui-btn li{float:left;width:15px;height:15px;margin-right:3px;border:1px solid #eee;background-color:#ffffff;line-height:15px;font-size:12px;text-align:center;}
.pic-show .ui-btn li.on{background-color:#ee6921;color: #ffffff}
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js" language="javascript"></script>
<script type="text/javascript">
$(function () {
var ui_pic = $(".ui-pic");
var ui_btn = $(".ui-btn");
var li_btn = ui_btn.find("li");
var li_pic = $(".ui-pic").find("li");
var h = ui_pic.find("li").eq(0).height();
var n = 1;
var timer;
li_btn.eq(0).addClass("on");
li_pic.slice(0, 1).clone().appendTo(ui_pic);
startGo();
li_btn.mouseover(function () {
var index = li_btn.index(this);
go(index);
n = index;
});
li_btn.hover(stopGo, startGo);

function go(i) {
ui_pic.stop().animate({ "top": -h * i }, 400, function () { if (n == 6) ui_pic.css("top", 0); });
li_btn.eq(i % 5).addClass("on").siblings().removeClass("on");
}

function startGo() {
timer = setInterval(function () {
if (n >= 6) {
n = 0;
}

go(n);
n++;
}, 2000);
}
function stopGo() {
clearInterval(timer);
}
});
</script>
</head>
<body>
<div class="pic-show">
<ul class="ui-pic">
<li><a href="" title="" target="new"><img src="images/01.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/02.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/03.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/04.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/05.jpg" /></a></li>
</ul>
<ul class='ui-btn'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航