图片轮播，a连接有问题，解决方案，橡树的小屋代码细节修改

来源：互联网发布：linux下创建新项目编辑：程序博客网时间：2024/04/30 07:25

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片轮播切换效果-橡树小屋</title><style type="text/css">#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}#banner_list img {border:0px;}#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px; }#banner_info{position:absolute; bottom:0; left:5px; line-height:30px;color:#fff;z-index:1001}#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=75);opacity:0.75; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;}#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#fff 1px solid;background-color:#6f4f67;cursor:pointer}#banner ul li.on{ background-color:#900}#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->#banner a {text-decoration:none;}</style><script type="text/javascript" src="babyzone.js"></script><script type="text/javascript" language="javascript">window.onload=function(){//babyzone.scroll(5,"banner_list","list","banner_info");}</script></head><body><div id="banner"><div id="banner_bg"></div>  <!--标题背景--><a href="#" id="banner_info"></a> <!--标题-->    <ul id="list"></ul>   <div id="banner_list">        <a href="#x1" target="_blank"><img src="imgs/p1.jpg" title="橡树小屋的blog1" alt="橡树小屋的blog" /></a>        <a href="#x2" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog2" alt="橡树小屋的blog" /></a>        <a href="#x3" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog3" alt="橡树小屋的blog" /></a>        <a href="#x4" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog4" alt="橡树小屋的blog" /></a><a href="#x5" target="_blank"><img src="imgs/p2.jpg" title="橡树小屋的blog4" alt="橡树小屋的blog" /></a></div></div></body></html>

遇到的问题：图片轮播没有问题的，效果也挺好，但是你会发现超链接对不上，一直显示的最后一个的超链接，这是层的问题

解决方法：把当前显示的图片对应的层的z-index设置最上层，就完美解决了。

点击左下角的文字，如果该轮播div显示在一个frame里面，会出现只在那个frame打开，弹出新页面加上 self.info.target = "_blank"; 就行了。

ps：上面只是html代码，具体的代码我上传到资源中了，有需要的可以去下载。

已经解决该问题的代码下载地址：点击下载文档中源码

里面还有图片像左滚动的代码。

该文章来自：http://www.cnblogs.com/babyzone2004/archive/2010/09/02/1816090.html