用js实现轮播切换（2）

来源：互联网发布：java线程与进程的区别编辑：程序博客网时间：2024/06/05 05:34
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        ul{padding: 0;margin: 0;}        li{list-style: none}        a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }        a:hover { filter:alpha(opacity:30); opacity:0.3; }        #prev { left:10px; }        #next { right:10px; }        #pic{width: 400px;height: 500px;position: relative;margin: 0 auto;background: url(img/loader_ico.gif) no-repeat center;}        #pic img{width: 400px;height: 500px;}        #pic ul{position: absolute;top: 0;right: -50px;width: 40px;}        #pic li{width: 40px;height: 40px;margin-bottom: 4px;background-color: #666;}        #pic .active{background: #fc3;}        #pic p,#pic span{position: absolute;left: 0;width: 400px;height: 30px;line-height: 30px;text-align: center;color: #fff;}        #pic span{top: 0;}        #pic p{bottom: 0;}        #pic li img{position:absolute;width:80px;height: 100px;left: -80px;background: red;display: none;}    </style>    <script>        window.onload=function () {            var oPrev=document.getElementById('prev');            var oNext=document.getElementById('next');            var oDiv=document.getElementById('pic');            //var oDiv1=document.getElementById('thumb');            //var oThumb=oDiv1.getElementsByTagName('img')[0];            var oImg=oDiv.getElementsByTagName('img')[0];            var oSpan=oDiv.getElementsByTagName('span')[0];            var oP=oDiv.getElementsByTagName('p')[0];            var oUl=oDiv.getElementsByTagName('ul')[0];            var aLi=oDiv.getElementsByTagName('li');            var aImg=oUl.getElementsByTagName('img');            var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];            var arrText=['小宠物','图片二','图片三','面具',];            var num=0;           // var onOff=ture;           // var oldLi=null;            for(var i=0;i<arrUrl.length;i++){                oUl.innerHTML+='<li><img src="img/'+(1+i)+'.png"></li>';            }           // oldLi=aLi[num];            //初始化            function fnTab() {                oImg.src = arrUrl[num];                oSpan.innerHTML = 1 + num + '/' + arrUrl.length;                oP.innerHTML = arrText[num];                aLi[num].className = 'active';            }            //清除当前            function clc() {                for(var i=0;i<aLi.length;i++){                    aLi[i].className='';                    aImg[i].style.display='none';                }            }            fnTab();            for(var i=0;i<aLi.length;i++){                aLi[i].index=i;                aLi[i].onclick=function () {                    oImg.src=arrUrl[this.index];                    oP.innerHTML=arrText[this.index];                    oSpan.innerHTML=1+this.index+'/'+arrText.length;                    num=this.index;                    //全部清空，当前添加                    clc();                    this.className='active';                   //思路二：清空上一个，当前添加                   /* oldLi.className='';                    oldLi=this;                    this.className='active';*/                }                aLi[i].onmouseover=function () {                    for(var i=0;i<aLi.length;i++){                        aImg[i].style.display='none';                    }                    aImg[this.index].style.display='block';                }                aLi[i].onmouseout=function () {                    aImg[this.index].style.display='none';                }            }            oPrev.onclick=function () {                num--;                if(num==-1){                    num=arrText.length-1;                }                clc();                fnTab();            };            oNext.onclick = function (){                num ++;                if( num == arrText.length ){                    num = 0;                }                clc();                fnTab();            };        };    </script></head><body><div id="pic">    <!--<img src="img/1.png">-->    <a id="prev" href="javascript:;"><</a>    <a id="next" href="javascript:;">></a>    <img src="">    <span>数量正在加载中......</span>    <p>文字说明正在加载中......</p>    <ul>        <!--<li></li>        <li></li>        <li></li>-->    </ul></div></body></html>
用到的图片：
0 0