首页 > 代码库 > 每日案例3
每日案例3
<!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=http://www.mamicode.com/‘循环切换‘/>"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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。