<!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>
<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="#" target="_blank"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201011/2010110814520452.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201011/2010110814520444.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201011/2010110814520422.jpg" alt=""></a></li>
</ul>
<div id="i_focus_opdiv"></div>
<!--slide大图374*224-->
<ul id="i_focus_tx">
<li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li>
<li class="normal"><span>HAHAHAHAAH HAHA haha OHOH</span>THINK EVERY DAY</li>
<li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li>
</ul>
</div>
<!--slide右侧小缩略图75*70-->
<ul id="i_focus_btn">
<li class="i_cur" id="p0"><img src="http://www.zzsky.cn/effect/images/201009021045/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt=""></li>
<li id="p1"><img src="http://www.zzsky.cn/effect/images/201009021045/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt=""></li>
<li id="p2"><img src="http://www.zzsky.cn/effect/images/201009021045/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt=""></li>
</ul>
</div>
<script src="http://www.zzsky.cn/effect/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> |
注册 登录
