关于轮播图的问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.menubar
{line-height: 24px;margin:50px 150px;}
.menubar .menuend
{clear: both;border:0px solid;}
.menuitem
{ position: relative; float: left; margin-right: 1em;text-align:center;}
.menuitem .submenu
{ position: absolute; top: 25px; left: -1px; width: 5em;}
/** 下面的控制显示和隐藏 **/
.menuitem .submenu
{display: none;}
.menuitem:hover .submenu
{display: block;}
#d1{background-color:#c50e0a;margin:50px;width:100%}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.wrap{
width: 490px;
height: 170px;
margin: 100px auto;
border: 1px solid #000000;
position: relative;
overflow: hidden;
}
#pic{
width: 3430px;
position: absolute;
}
#pic li{
float: left;
height: 170px;
}
#list{
position: absolute;
bottom: 10px;
left:150px ;
}
#list li{
float: left;
width: 15px;
height: 15px;
background: #fff;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
}
#list .on{
background: #e27a00;
}
.Prev{
top: 30px;
left: 0;
}
.Next{
top: 30px;
right: 0;
}
.Prev,.Next{
position: absolute;
font-size: 80px;
font-weight: bold;
color:#fff ;
-webkit-transition: all 0.35s ease-in-out
}
.Next:hover,
.Prev:hover{
background: #ccc;
background: rgba(204, 204, 204, 0.4);
}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap');
var pic=document.getElementById('pic');
var Li=document.getElementById('list').getElementsByTagName('li');
var prev=document.getElementById('Prev');
var next=document.getElementById('Next');
var animated=false;
var index=0;
var timer=null;
next.onclick=function(){
if(animated){//如果图片正在滚动时要返回，否则index会变化
return;
}
else{
index++;
if(index>=Li.length){
index=0;
}
}
showlist();
if(animated == false){//if(!animated)
animate(-490);
}
}
prev.onclick=function(){
if(animated){
return;
}
else{
index--;
if(index<=0){
index=Li.length-1;
}
}
showlist();
if(!animated){//判断其是否滚动完
animate(490);
}
}
for(var i=0;i<Li.length;i++){
Li[i].num=i;
Li[i].onclick=function(){
if(this.className=="on"){
return;
}
var offset = -490*(this.num-index);
if(!animated){
animate(offset);
}
index=this.num;
showlist();
}
}
//图片变换
function animate(offset){
animated=true;
var newLeft=parseInt(pic.style.left) + offset;
var time=300//位移总时间
var interval=10;//位移间隔时间
var speed=offset/(time/interval);//每次位移量
function go(){
if((speed < 0 && parseInt(pic.style.left) > newLeft )|| (speed > 0 && parseInt(pic.style.left) < newLeft)){
pic.style.left = parseInt(pic.style.left) + speed + 'px';
setTimeout(go,interval);
}else{
animated=false;
pic.style.left= newLeft + 'px';
if(newLeft > -490){
pic.style.left = -2450 + 'px';
}
if(newLeft < -2450){
pic.style.left = -490 + 'px';
}
}
}
go();
}
//圆点变换
function showlist(){
for(var i=0;i<Li.length;i++){
Li[i].className="";
}
Li[index].className="on";
}
//自动播放
function play(){
timer=setInterval(function(){
next.onclick();
},2000);
}
function stop(){
clearInterval(timer);
}
wrap.onmouseover=stop;
wrap.onmouseout=play;
play();
}
</script>
<body>
<div id="d1" class="">
<img src="==欢迎访问苏州大学网站==_files/2.jpg" width="400" height="129" border="0" alt="">
<img src="==欢迎访问苏州大学网站==_files/3.jpg" width="537" height="129" border="0" alt="" align="right">
</div>
<div class="menubar" >
<div class="menuitem" align="center">
<div><a href="">首页</a></div>
</div>
<div class="menuitem">
<div><a href="">苏大新闻</a></div>
</div>
<div class="menuitem">
<div>学校概况</div>
<div class="submenu">
<div><a target="ifrm" href="">校长致辞</a></div>
<div><a target="ifrm" href="">学校简介</a></div>
<div><a target="ifrm" href="">现任领导</a></div>
<div><a target="ifrm" href="">住址机构</a></div>
<div><a target="ifrm" href="">校园地图</a></div>
<div><a target="ifrm" href="">校园风光</a></div>
<div><a target="ifrm" href="">知名校友</a></div>
</div>
</div>
<div class="menuitem">
<div><a href="">院部设置</a></div>
</div>
<div class="menuitem">
<div>师资队伍</div>
<div class="submenu">
<div><a target="ifrm" href="">概况</a></div>
<div><a target="ifrm" href="">名师风采</a></div>
</div>
</div>
<div class="menuitem">
<div>教育教学</div>
<div class="submenu">
<div><a target="ifrm" href="">本科生教育</a></div>
<div><a target="ifrm" href="">研究生教育</a></div>
<div><a target="ifrm" href="">留学生教育</a></div>
<div><a target="ifrm" href="">继续教育</a></div>
</div>
</div>
<div class="menuitem">
<div>科学研究</div>
<div class="submenu">
<div><a target="ifrm" href="">科研项目</a></div>
<div><a target="ifrm" href="">科研机构</a></div>
<div><a target="ifrm" href="">科研成果</a></div>
<div><a target="ifrm" href="">学术期刊</a></div>
</div>
</div>
<div class="menuitem">
<div>招生就业</div>
<div class="submenu">
<div><a target="ifrm" href="">本科招生</a></div>
<div><a target="ifrm" href="">研究生招生</a></div>
<div><a target="ifrm" href="">继续教育招生</a></div>
<div><a target="ifrm" href="">留学招生</a></div>
<div><a target="ifrm" href="">港澳台招生</a></div>
<div><a target="ifrm" href="">独立学院招生</a></div>
</div>
</div>
<div class="menuitem">
<div>合作交流</div>
<div class="submenu">
<div><a target="ifrm" href="">国内合作</a></div>
<div><a target="ifrm" href="">海外合作</a></div>
<div><a target="ifrm" href="">附属医院</a></div>
</div>
</div>
<div class="menuitem">
<div>苏大经纬</div>
<div class="submenu">
<div><a target="ifrm" href="">公工服务</a></div>
<div><a target="ifrm" href="">校园文化</a></div>
</div>
</div>
<div class="main_div">
<div class="arrows">
<span title="1" class="arrow"></span>
<span title="0" class="arrow" style="float: right"></span>
</div>
<div class="wrap" id="wrap">
<ul id="pic" style="left: -490px;">
<li><a href="#"><img src="==欢迎访问苏州大学网站==_files/20180304093424_开学.jpg" alt="5"/></a></li>
<li><a href="#"><img src="==欢迎访问苏州大学网站==_files/20180209123723_恭贺新春.jpg" alt="1"/></a></li>
<li><a href="#"><img src="==欢迎访问苏州大学网站==_files/20180117080759_东吴论坛原图 (1).jpg" width="1200" height="400" border="0" alt="2"></a></li>
<li><a href="#"><img src="==欢迎访问苏州大学网站==_files/20180113162353_微信图片_20180113162130_副本.jpg" width="1200" height="796" border="0" alt=""></a></li>
</ul>
<ul id="list">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="Prev" id="Prev"><</a>
<a href="javascript:;" class="Next" id="Next">></a>
</div>
</div>
<table>
<tr colspan="2" >
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/7.jpg" width="82" height="24" border="0" alt=""></a></td>
<td align="right"><a href=""><img src="==欢迎访问苏州大学网站==_files/8.jpg" width="25" height="11" border="0" alt=""></a></td>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/ftfb.png" width="143" height="40" border="0" alt="<img src="ftfb.png" width="143" height="40" border="0" alt=""></a></td>
</tr>
<tr>
<td><a href="">我校召开校党委十二届五次全体会议及全校干部大会</a></td>
<td><a href="">我校4位教授入选第三批国家“万人计划”科技创新领军人才</a></td>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/ftfbImg2.png" width="305" height="88" border="0" alt="<img src="ftfbImg2.png" width="305" height="88" border="0" alt="">"></a></td>
</tr>
<tr>
<td>2月28日上午，我校在敬贤堂召开校党委十二届五次全体会议及全校干部大会。</td>
<td><a href="">我校召开巡视整改工作领导小组会议</a></td>
<td><a href="">第三方评价——2018中国最好大学排行榜</a></td>
</tr>
<tr>
<td><a href="">2018，再出发！</a></td>
<td rowspan="2"><a href="">我校召开新任职处级领导干部集中廉政谈话会</a></td>
<td><a href="">第三方评价——武书连2018中国大学排行...</a></td>
</tr>
<tr>
<td>日月开新元，万象始更新。在新年钟声即将敲响之际，我们向全校师生员工、离退休老同志，向广大海内外...</td>
<td><a href="">第三方评价——泰晤士高等教育2018亚洲...</a></td>
<td></td>
</tr>
<tr>
<td><a href="">“对话苏州创新（2017）”活动在苏州举行</a></td>
<td><a href="">江涌书记带队开展节后校园安全工作检查</a></td>
<td><a href="">2018苏州大学自然指数情况</a></td>
</tr>
<tr>
<td>12月18日，围绕“新时代·新思想·新征程——苏州如何创新、探索与引领”主题的2017年度“对话苏州创...</td>
<td><a href="">我校召开学生工作会议</a></td>
<td><a href="">2017年苏州大学研究生奖学金、助学金情...</a></td>
</tr>
<tr>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/15.jpg" width="84" height="24" border="0" alt="科学教研"></a></td>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/16.jpg" width="83" height="22" border="0" alt="改革之窗"></a></td>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/22.jpg" width="81" height="21" border="0" alt="苏大人物"></a></td>
</tr>
<tr>
<td><a href="">江苏高校新型城镇化与社会治理协同创新中心发展规划（2018-2020）论证会在我校举行</a></td>
<td><a href="">文正学院组织开展第二期青年教师培养系列活动</a></td>
<td rowspan="4"><a href=""><img src="==欢迎访问苏州大学网站==_files/20180226143917_微信图片_20180226143543.jpg" width="300" height="200" border="0" alt=""></a></td>
</tr>
<tr>
<td><a href="">电子信息学院沈纲祥教授受邀出任IEEE通信学会战略规划委员会成员</a></td>
<td><a href="">马克思主义学院开展 “三集”活动提升 “三进”实效</a></td>
<td></td>
</tr>
<tr>
<td><a href="">十三五国家新药创制重大专项课题启动会在苏举行</a></td>
<td><a href="">医学部：试行学生参议制度 畅通民主管理渠道</a></td>
<td></td>
</tr>
<tr>
<td><a href="">苏州大学——复鑫益蛭肽蛋白协同创新中心签约暨揭牌仪式成功举行</a></td>
<td><a href="">政治与公共管理学院：以“苏大小管家”微信公众平台创新大学生思想政治教育工作</a></td>
<td ></td>
</tr>
<tr>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/13.jpg" width="83" height="20" border="0" alt=""></a></td>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/14.jpg" width="64" height="22" border="0" alt=""></a></td>
<td><a href=""><img src="==欢迎访问苏州大学网站==_files/21.jpg" width="84" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td><a href="">《科技日报》头版：干细胞临床治疗心脏病有了“金标准”</a></td>
<td><a href="">关于复试，你想知道的都在这里</a></td>
<td rowspan="4"><a href=""><img src="==欢迎访问苏州大学网站==_files/20180302144343_1.jpg.jpg" width="300" height="200" border="0" alt=""></a></td>
</tr>
<tr>
<td><a href="">《人民日报》：在一项国际科研指数排名中，山东师大、苏州大学等表现出色地方高校...</a></td>
<td><a href="">树立理性消费观,拒绝不良“校园贷”！！！</a></td>
<td></td>
</tr>
<tr>
<td><a href="">《中国教育报》头版：苏州大学实施“互联网+”物资集中采供改革，师生不再为报销跑...</a></td>
<td><a href="">复试技巧 | 考研复试礼仪小讲堂</a></td>
<td></td>
</tr>
<tr>
<td><a href="">《中国青年报》头版关注我校参与“桑吉”轮油污治理：东海油轮事故三问</a></td>
<td><a href="">你不知道的妇女节</a></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td width="600px"><a href=""><img src="==欢迎访问苏州大学网站==_files/17.jpg" width="87" height="23" border="0" alt=""></a></td>
<td colspan="2"><a href=""><img src="==欢迎访问苏州大学网站==_files/19.jpg" width="52" height="20" border="0" alt=""></a></td>
<td></td>
</tr>
<tr>
<td><a href="">外国语学院学术讲座：「白楽天詩における老荘思想と仏教思想の変容」（日本語）</a></td>
<td rowspan="4"><img src="==欢迎访问苏州大学网站==_files/20180309153223_12.jpg" width="150" height="200" border="0" alt=""></td>
<td rowspan="4"><img src="==欢迎访问苏州大学网站==_files/20180308094907_20180308094556784_调整大小.jpg" width="150" height="200" border="0" alt=""></td>
<td><a href="">春风十里不如你——政治与公共管理学院女生节主题活动</a></td>
</tr>
<tr>
<td><a href="">功能纳米与软物质研究院学术报告：Electronic materials interfaces: Role of defects and dimensional...</a></td>
<td><a href="">沙钢钢铁学院3月团日活动</a></td>
<td></td>
</tr>
<tr>
<td><a href="">系统生物学研究中心学术报告：How to write a scientific paper</a></td>
<td><a href="">材料与化学化工学部2018年志愿者招募</a></td>
<td></td>
</tr>
<tr>
<td><a href="">现代丝绸国家工程实验室学术报告：Icephobic Coatings: current status and challenges</a></td>
<td><a href="">纺织与服装工程学院出国留学说明会</a></td>
<td></td>
</tr>
</table>
</body>
</html>
我只能写成这样，求大佬们给点帮助
