每日案例3

標籤：style   blog   http   color   java   os   io   strong   ar   

<!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">        *{margin: 0;padding:0;}        .big{margin: 20px 400px;}        input{margin: 20px auto;}        .box{width: 500px;height: 333px;background: url(http://m1.img.srcdd.com/farm4/d/2014/0821/15/E86FC29B93DE3A534A25F0037AB56259_B1280_1280_500_333.jpeg) no-repeat;position: relative;}        a{width: 45px;height: 38px;display: block;background: #31004a;color: #fff;line-height: 38px;text-align: center;font-size: 24px;text-decoration: none;font-weight: bold;filter:alpha(opacity:30);opacity: 0.3;}        a:hover{filter:alpha(opacity:80);opacity: 0.8}        .left{position: absolute;top: 150px;left: 30px;}        .right{position: absolute;top: 150px;right: 30px;}        p,strong{width: 500px;height: 32px;background: #606060;line-height: 32px;text-align: center;color: #fff;filter:(opacity:30);opacity: 0.9;position: absolute;}        p{top: 0}        strong{bottom:0;font-weight: normal;}        #img1{width:500px;height: 333px;}        span{position: absolute;width: 400px;height: 30px;line-height: 30px;text-align: center;top: -25px;left: 0;font-family: "微軟雅黑";}        </style>        <script type="text/javascript">        window.onload=function(){            var oP=document.getElementById(‘p1‘);            var oStrong=document.getElementById(‘text‘);            var oNext=document.getElementById(‘right1‘);            var oPrev=document.getElementById(‘left1‘);            var oImg=document.getElementById(‘img1‘);            var aBtn=document.getElementsByTagName(‘input‘);            var arrUrl=[‘http://m1.img.srcdd.com/farm4/d/2014/0821/15/E86FC29B93DE3A534A25F0037AB56259_B1280_1280_500_333.jpeg‘,‘http://m3.img.srcdd.com/farm5/d/2014/0821/15/54ABBEFCCC59B1CCA1C784330558B161_B1280_1280_500_333.jpeg‘,‘http://m2.img.srcdd.com/farm5/d/2014/0821/15/B07314A517906738D61B8A91BB28C756_B1280_1280_500_333.jpeg‘,‘http://m2.img.srcdd.com/farm5/d/2014/0821/15/F59226553539AD59A3F0B10F2E3BE230_B1280_1280_500_333.jpeg‘,‘http://m2.img.srcdd.com/farm5/d/2014/0821/15/E1ED0ADB8146F9AE638694214B26879B_B1280_1280_500_333.jpeg‘];            var arrText=[‘如果沒有回應那就不是愛情 ‘,‘我為什麼喜歡獨自旅行 ‘,‘關於版本及購買  ‘,‘健身教練教我的事 ‘,‘張佳瑋身上不為人知的超能力 ‘];            var num=0;            var onOff=true;            aBtn[0].onclick=function(){onOff=true;document.getElementsByTagName(‘span‘)[0].innerHTML=‘列表迴圈‘;};            aBtn[1].onclick=function(){onOff=false;document.getElementsByTagName(‘span‘)[0].innerHTML=‘順序迴圈‘;};            function fnTab(){                oStrong.innerHTML=arrText[num];                oP.innerHTML=num+1+‘/‘+arrText.length;                oImg.src=arrUrl[num];            }            fnTab();            oPrev.onclick=function(){                num--;                if (num==-1) {                    if (onOff) {                        num=arrText.length-1                    }else{                        alert("已經是最後一張");                        num=0;                    }                }                fnTab();            }            oNext.onclick=function(){                num++;                if (num==arrText.length) {                    if (onOff) {                        num=0;                    }else{                        alert("已經是最後一張");                        num=arrText.length-1;                    }                }                fnTab();            }        }        </script></head><body>    <div class="big">        <input type=‘button‘ value=‘迴圈切換‘/>        <input type=‘button‘ value=‘順序切換‘/>        <div class="box"><span>列表迴圈</span>        <p id="p1">1/5</p>        <a id="left1" class="left" href="javascript:"><</a>        <a id="right1" class="right" href="javascript:">></a>        <strong id="text">如果沒有回應那就不是愛情</strong>        <img id="img1"/>    </div>    </div></body></html>

每日案例3