最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果，整理如下：
前段代码：
复制代码 代码如下:
<!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=gb2312" />
<link href="https://www.jb51.net/css/css.css" type="text/css" />
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/kxbdSuperMarquee.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/indexPic.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('.indexNews div.core').kxbdSuperMarquee({
isEqual:false,
distance:18,
time:4,
//btnGo:{up:'#goU',down:'#goD'},
direction:'up'
});
});
</script>
</script>
<title></title>
</head>
<body>
<div>
<div>
<div>
<ul >
<li><a target="_blank" href="#"><img alt="首页AD-1" src="https://www.jb51.net/Images/ad-1.jpg"></a></li>
<li><a target="_blank" href="#"><img alt="首页AD-2" src="https://www.jb51.net/images/ad-2.jpg"></a></li>
<li><a target="_blank" href="#"><img alt="首页AD-3" src="https://www.jb51.net/images/ad-3.jpg"></a></li>
<li><a target="_blank" href="#"><img alt="首页AD-4" src="https://www.jb51.net/Images/ad-4.jpg"></a></li>
</ul>
</div>
</div>
<div>
<strong><a href="#">新闻中心</a></strong>
<div>
<ul>
<li><a href="#" title="新闻1">新闻标题1</a></li>
<li><a href="#" title="新闻2">新闻标题2</a></li>
<li><a href="#" title="新闻3”">新闻标题3</a></li>
<li><a href="#" title="新闻4">新闻标题4</a></li>
<li><a href="#" title="新闻5">新闻标题5</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var len = $(".img-box li").length;
var imgW = $(".img-box li").width() * len;
$(".img-box").width(imgW);
$(".info_slide_dots span").hide();
})
$("#fadImgs").slideImg({
speed: "slow",
timer: 5000
});
</script>
</body>
</html>
css文件夹包含一个样式表css.css：
复制代码 代码如下:
/* reset.css */
body{background:#fff;color:#444;height:100%;line-height:1.4;}
html{height:100%;overflow-y:scroll;-webkit-text-size-adjust:none;}
body,input,button,textarea,select,h1,h2,h3,h4,h5,h6{font:12px/1.5 Arial,Tahoma,Helvetica,"\5b8b\4f53",sans-serif;}
body,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td{margin:0;padding:0;}
img{vertical-align:bottom;}
/* base.css */
a:link,a:visited,a:hover,a:active{cursor:pointer;text-decoration:none;}
a:active,a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}
a:hover {text-decoration:underline;}
li {list-style:none;}
ol li {display:inline;}
/*common.css*/
.outer{position:relative; overflow:hidden; background:url(../images/line.gif) repeat-x bottom; border-bottom:solid 1px #fff; margin:0 auto;}
.banner{position:absolute; left:50%; top:0; margin-left:-990px; height:400px; width:1980px;overflow:hidden;}
.flash_img {
overflow: hidden;
width: 1980px;
height: 400px;
position: relative
}
.banner{height:400px;}
.flash_img .img-box {
position: absolute;
}
.flash_img .img-box li{float:left;}
.flash_img img {
display: block;
}