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

jQuery实现带缩略图的渐显渐隐图片幻灯切换效果

2011-10-28 08:49 781 查看 
<!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>jQuery实现带缩略图的渐显渐隐图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
div,ul,li{margin:0;padding:0;}
body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑";line-height:1.2;}
a{color:#047;text-decoration:none;}
a:hover{color:#a40000;text-decoration:none;}
ul,li{list-style:none;}
#i_focus{width:460px;height:231px;background:#eee;padding:5px 5px 0 5px;margin:0 auto;}
#i_focus_pic{width:376px;height:226px;display:inline;position:relative;float:left;overflow:hidden;}
#i_focus_piclist{position:absolute;}
#i_focus_piclist li{width:378px;height:226px;overflow:hidden;display:none;}
#i_focus_piclist img{width:374px;height:224px;border:1px solid #fff;}
#i_focus_btn {float:right;width:77px;}
#i_focus_btn li {cursor:pointer;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
#i_focus_btn img{width:75px;height:70px;border:1px solid #fff;margin-bottom:2px;}
#i_focus_btn .i_cur {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
#i_focus_opdiv{position:absolute;left:0;bottom:0;width:374px;height:40px;background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);border:1px solid #fff;border-top:0;}
#i_focus_tx span{font-family:"微软雅黑";font-size:16px;font-weight:bold;line-height:22px;display:block;}
#i_focus_tx{position:absolute;left:8px;bottom:2px;color:#FFF;}
#i_focus_tx .normal {display:none;}
</style>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="i_focus">
<div id="i_focus_pic">
<ul id="i_focus_piclist" style="left:0;top:0;">
<li><a href="http://www.CsrCode.cn" target="_blank"><img src="/images/m01.jpg" alt=""></a></li>
<li><a href="http://www.33567.cn" target="_blank"><img src="/images/m02.jpg" alt=""></a></li>
<li><a href="http://www.7caidy.com" target="_blank"><img src="/images/m03.jpg" alt=""></a></li>
</ul>
<div id="i_focus_opdiv"></div>
<!--slide大图374*224-->
<ul id="i_focus_tx">
<li class="normal"><span>红叶传情</span>红叶传情 ☆ 芯晴网页特效：www.CsrCode.cn</li>
<li class="normal"><span>野花绽放</span>野花绽放 ★ 珊珊影视在线：www.33567.cn</li>
<li class="normal"><span>往事如茶</span>往事如茶 ☆ 七彩影视：www.7caidy.com</li>
</ul>
</div>
<!--slide右侧小缩略图75*70-->
<ul id="i_focus_btn">
<li class="i_cur" id="p0"><img src="/images/s1.jpg" alt=""></li>
<li id="p1"><img src="/images/s2.jpg" alt=""></li>
<li id="p2"><img src="/images/s3.jpg" alt=""></li>
</ul>
</div>
<script src="/images/jquery-1.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
var i_curIndex = 0;
var beauBeauSlide;//函数对象
var i_curID = 0;//取得鼠标下方的对象ID
var pictureID = 0;//索引ID
$("#i_focus_piclist li").eq(0).show();//默认
autoScroll();
$("#i_focus_btn li").hover(function() {
StopScrolll();
$("#i_focus_btn li").removeClass("i_cur")//所有的li去掉当前的样式加上正常的样式
$(this).addClass("i_cur");//而本身则加上当前的样式去掉正常的样式
i_curID = $(this).attr("id");//取当前元素的ID
pictureID = i_curID.substring(i_curID.length - 1);//取最后一个字符
$("#i_focus_piclist li").eq(pictureID).fadeIn("slow");//本身显示
$("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide();//除了自身别的全部隐藏
$("#i_focus_tx li").hide();
$("#i_focus_tx li").eq(pictureID).show();

},
function() {
//当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
i_curID = $(this).attr("id");//取当前元素的ID
pictureID = i_curID.substring(i_curID.length - 1);//取最后一个字符
i_curIndex = pictureID;
autoScroll();
});
//自动滚动
function autoScroll() {
$("#i_focus_btn li:last").removeClass("i_cur");
$("#i_focus_tx li:last").hide();
$("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
$("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
$("#i_focus_tx li").eq(i_curIndex).show();
$("#i_focus_tx li").eq(i_curIndex - 1).hide();
$("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
$("#i_focus_piclist li").eq(i_curIndex - 1).hide();
i_curIndex++;
i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex;
beauBeauSlide = setTimeout(autoScroll, 2000);
}
function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
{
clearTimeout(beauBeauSlide);
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航