zoukankan      html  css  js  c++  java
  • 轮播图片切换(函数合并)

    <!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>
    *{ margin:0; padding:0}
    li{ list-style:none}
    body{ background:#333}
    #pic{ 400px; height:500px; position:relative; margin:40px auto; background:#fff; border:1px solid #fff}
    #pic img{ 400px; height:500px;}
    #pic span,#pic p{ position:absolute; left:0; background:#000; text-align:center; color:#fff; height:30px; line-height:30px; 100% }
    #pic span{ top:0}
    #pic p{ bottom:0 }
    #pic ul{ position:absolute; 30px; top:0; right:-50px}
    #pic ul li{ 30px; height:30px; background:#ccc; margin-bottom:10px}
    #pic ul li.active{ background:#F60;}
    </style>
    <script>
    window.οnlοad=function(){
    var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
    var arrText=['第一张图','第二张图','第三张图','第四张图']
    var oDiv=document.getElementById('pic');
    var oImg=oDiv.getElementsByTagName('img')[0];
    var oSpan=oDiv.getElementsByTagName('span')[0];
    var oText=oDiv.getElementsByTagName('p')[0];
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    //初始化
    var num=0;
    for(var i=0; i<arrUrl.length; i++){
    oUl.innerHTML+='<li></li>'
    }
    function fnTab(){
    oImg.src=arrUrl[num];
    oText.innerHTML=arrText[num];
    oSpan.innerHTML=num+1+'/'+arrUrl.length;
    for(var i=0; i<aLi.length; i++){
    aLi[i].className='';
    }
    aLi[num].className='active';
    }
    fnTab();
    for(var i=0; i<aLi.length; i++){
    aLi[i].index=i;
    aLi[i].οnclick=function(){
    num=this.index;
    fnTab();
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="pic"> <img src="" /> <span>程序正在计算中</span>
    <P>图片文字介绍</P>
    <ul>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    软件工程15 结对编程作业
    软工网络15个人阅读作业2——提问题
    软件工程网络15个人阅读作业1
    第15周-反射与JSP
    Java课程设计-定时器(团队)
    Java课程设计-定时器
    第14周-数据库
    网络15软工个人作业5——软件工程总结
    软工网络15个人作业4——alpha阶段个人总结
    软工网络15个人作业3——案例分析
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/12050862.html
Copyright © 2011-2022 走看看