【javascript】03 JS基础上 (轮播图特效)

原创 唯美美 随笔 JS大神之路 2291阅读 2014-08-21 15:09:32 举报

老师布置的作业03
轮播图特效,及切换顺序点击、循环点击、
代码片段 1

[code]<!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:0px; padding: 0px;}
    .big {margin: 20px 300px;}
    input {margin: 20px auto;}
    .box {width: 500px; height: 333px; background: url(http://m3.img.srcdd.com/farm5/d/2014/0821/15/507C17B29BAE68BEA787824F46757EF2_B250_400_250_166.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:30); 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:alpha(opacity:30); opacity:0.9; position: absolute;}
    p {top: 0px;}
    strong {bottom: 0px; 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>
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 id="box1" class="box"> <span>图片可从最后一张跳转到第一张循环切换</span>
<p id="p1">正在计算ing...</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>
[/code]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复