87,915
社区成员
发帖
与我相关
我的任务
分享jquery图片切换
帮看看为什么当图片从第5张转到第1张时，会同时切换中间的4张，最后才返回到第1张。也就是说会从5到4到3到2到1依次翻过，我想从5翻到1时，只有1张图片切换。应该说是每次切换图片都只有1张切换。顺便帮看看图片有点溢出。
<!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>
<style type="text/css">
.ad{
margin-bottom:10px;
width:600px;
height:296.9px;
position:relative;
overflow:hidden;
border:1px solid #999999;}
.slider ,.num{
position:absolute;}
.slider li{
list-style-type:none;}
.num{
right:5px;
bottom:5px;}
.num li{
list-style-type:none;
float:left;
margin-right:10px;
border:1px solid #666666;
color:#FFFFFF;
background-color:#333333;
text-align:center;
font-size:15px;
width:20px;}
.num li.on{
background-color:#FF0000;
font-weight:bold;}
</style>
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript">
$(function() {
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function() {
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
$('.ad').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index++;
if (index == len) { index = 0; }
}, 3000);
}).trigger("mouseleave");
})
function showImg(index) {
var adHeight = $(".ad").height();
$(".slider").stop(true, false).animate({ bottom: -adHeight * index-28 }, 1000); //翻滚效果
//$(".slider").css("top", -adHeight * index); //跳转效果
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="ad">
<ul class="slider">
<li><img src="11.jpg" alt="这是标题1"/></li>
<li><img src="22.jpg"/></li>
<li><img src="33.jpg"/></li>
<li><img src="44.jpg"/></li>
<li><img src="55.jpg"/></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
pxxaish9527 2012-09-03
- 打赏
- 举报
楼上的效果不错的哦
scscms太阳光 2012-09-03
- 打赏
- 举报
ld191474639 2012-09-02
- 打赏
- 举报
大哥求详细代码，不会啊
泡泡鱼_ 2012-09-02
- 打赏
- 举报
哦，执行动画的操作也要相对应的修改
泡泡鱼_ 2012-09-02
- 打赏
- 举报
将第1个li对象复制至slider尾
//因此，你需要为此在showImg(index)中额外的做出逻辑判断，并执行相对应的操作
$(".slider li").eq(0).clone().appendTo($(".slider"));index=0;
$(".slider").css({bottom:0});//因此，你需要为此在showImg(index)中额外的做出逻辑判断，并执行相对应的操作
