注册 登录
编程论坛 jQuery论坛

关于轮播图的问题

a1148213579 发布于 2018-03-11 15:13, 2936 次点击
只有本站会员才能查看附件,请 登录
只有本站会员才能查看附件,请 登录

<!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>

我只能写成这样,求大佬们给点帮助

1 回复
#2
jqr2018-05-25 17:45
1