图片切换实例_html-js-css

概述<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>ul { padding:0; margin:0; }li { list-style:none; }body { backgr

<!DOCTYPE HTML><HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"><Title>无标题文档</Title><style>ul { padding:0; margin:0; }li { List-style:none; }body { background:#333; }#pic { wIDth:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }#pic img { wIDth:400px; height:500px; }#pic ul { wIDth:40px; position:absolute; top:0; right:-50px; }#pic li { wIDth:40px; height:40px; margin-bottom:4px; background:#666; }#pic .active { background:#FC3; }#pic span { top:0; }#pic p { bottom:0; margin:0; }#pic p,#pic span { position:absolute; left:0; wIDth:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }</style><script>window.onload = function (){    var odiv = document.getElementByID(‘pic‘);    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 = oul.getElementsByTagname(‘li‘);        var arrUrl = [ ‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘ ];    var arrText = [ ‘小宠物‘,‘图片二‘,‘图片三‘,‘面具‘ ];    var num = 0;    var oldli = null;        for( var i=0; i<arrUrl.length; i++ ){        oul.INNERHTML += ‘<li></li>‘;    }
　　//一定要在 li 创建 后    oldli = ali[num];        // 初始化    oimg.src = arrUrl[num];    oSpan.INNERHTML = 1+num+‘ / ‘+arrUrl.length;    oP.INNERHTML = arrText[num];    ali[num].classname = ‘active‘;        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;                        /*                <li ></li>                <li></li>                <li></li>                <li></li>            */                        // 思路一：全部清空，当前添加            // for( var i=0; i<ali.length; i++ ){            //     ali[i].classname = ‘‘;            // }            // this.classname = ‘active‘;                                    // 思路二：清空上个，当前添加            oldli.classname = ‘‘;            oldli = this;            this.classname = ‘active‘;                    };    }};</script></head><body><div ID="pic">    <img src="" />  <span>数量正在加载中……</span>  <p>文字说明正在加载中……</p>  <ul></ul></div></body></HTML>

总结

以上是内存溢出为你收集整理的图片切换实例全部内容，希望文章能够帮你解决图片切换实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1031376.html

图片切换实例

发表评论

评论列表（0条）