简单js实例，大图轮播前身

今天主要想记录一下简单的js实例。。。。。。。。。

<script>

window.onload = function(){

        var oPrev = document.getElementById('prev');

        var oNext = document.getElementById('next');

        var oP1 = document.getElementById('p1');

        var oSpan = document.getElementById('span1');

        var oImg = document.getElementById('img1');

        var arrUrl = [ 'image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg' ];

        var arrText = [ '你好','美女','运动','附件' ];

        var num = 0;

//初始化

function fenzhuang () {

        oImg.src = arrUrl[num];

        oSpan.innerHTML = arrText[num];

        oP1.innerHTML = num+1 + '/' + arrText.length;

}

fenzhuang();//先分装一个函数

oPrev.onclick = function(){ //向前的按钮

        num --; //设置如果num值大于数组长度怎么整55555所以用条件

        if ( num == -1 ) { //这里用两个等号，是当num值等于-1时

                num = arrUrl.length-1; //这里用一个等号，是将arrUrl.length-1的值赋                               num

        }

        fenzhuang();//这里可以直接使用fenzhuang函数，如果将该函数直接放入if函数中，当num值等于-1时，就定格在arrUrl.length-1，所以要放在if函数的外面！ }

oNext.onclick = function(){

num++;

if ( num == arrUrl.length ) {

num = 0;

}

fenzhuang();}

}

</script>

<style>

#content   { width:500px; height:500px; background: #f1f1f1; margin:auto; position: relative; border:6px solid #f40; }

#content a  { width:40px; height:40px; border:3px solid #fff; background: #000; position: absolute; font-size: 30px; font-weight: bold; filter: alpha(opacity:40px); opacity:0.4; color:#fff; line-height: 40px; text-align: center; text-decoration: none; }

#content a:hover  { filter:alpha(opacity:90px); opacity:0.9; }

#prev{ position: absolute; left:0px; top:222px; }

#next{ position: absolute; right:0px; top:222px; }

#p1,#span1{ width:500px; height:60px; background: #000; filter:alpha(opacity:80px); opacity:0.8; font-size: 30px; position: absolute; color:#fff; line-height: 60px; text-align: center; text-decoration: none; }

#p1{ top:0px; margin:0; }

#span1{ bottom:0px; }

#img1{ width:500px; height:500px; }

</style>

<div id="content>

        <img src="img/1.jpg id="img1">

        <a id="prev" href="javascript" > > </a>

        <a id="next" href="havascript"> < </a>/*实际上这里可以下载一个左右键的图       片，不会做出来这么糙哈哈。。。当然css样式也可以随便改啦*/

        <p id="p1">图片正在加载中....</p>

        <span id="span1">这是第一张图片...</span>

/*其实这里的名字起的不太好语义化不行

 *这里为什么不写成  1/4，运动员  的形式

 *其实是怕网页加载不好的时候，图片加载不出来时

 *不至于一片空白，也能让用户知道这片空白是什么

 *就类似于淘宝在加载不出来图片信息时，用户也能购买想要的东西

 */

</div>

其实，第一次是去年暑假直接写的大图轮播，当时没有什么语言基础，能读懂大神们写好的代码已经不容易了，哈哈哈当然现在里轮播还有距离，这个案例只是学习if语句的使用。