JavaScript图片切换实现

绝地灬酷狼 2022-09-30 15:59 230阅读 0赞

![效果图][SouthEast]

### html代码 ###

<div id="pic">
            <img src="" alt="" />
            <p>正在加载中...</p>
            <span>数量正在加载中...</span>
            <ul></ul>
        </div>

--------------------

### CSS代码 ###

ul, p { margin: 0; padding: 0; }
            body{ background: #333; }
            li{ list-style: none; width: 40px; height: 40px; margin-bottom: 10px; background: #000; }
            .active{ background: #c6f6f6; }
            #pic{ width: 390px; height: 480px; margin: 30px auto 0; background: #fff url(img/img/loader_ico.gif) no-repeat center; position: relative; }
            ul{ position: absolute; top: 10px; left: 400px; }
            img{ width: 390px; height: 480px; }
            p, span{ width: 390px; font-size: 16px; line-height: 20px; color: #fff; text-align: center; background: #000; filter: (opacity: 60); opacity: 0.6; position: absolute; left: 0; }
            p{ bottom: 0; }
            span{ top: 0; }

--------------------

### JavaScript代码 ###

window.onload = function (){                                 // 要是写上面 就要写上window.onload 
                                                                    //不然他妈的读不到下面的数据啊
            var oDiv = document.getElementById('pic');
            var oImg = oDiv.getElementsByTagName('img')[0];
            var oP = oDiv.getElementsByTagName('p')[0];
            var oSpan = oDiv.getElementsByTagName('span')[0];
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oDiv.getElementsByTagName('li');
            var arrUrl = ['img/img/1.png','img/img/2.png','img/img/3.png','img/img/4.png'];
            var arrText = ['Image 1','Image 2','Image 3','Image 4'];
            var num = 0;
            var oldLi = null;
            /* 初始化 */
            oSpan.innerHTML = 1 + num + '/' + arrUrl.length;
            oP.innerHTML = arrText[num];
            oImg.src = arrUrl[num];
            for(var i=0; i<arrUrl.length; i++){   //添加四个元素 多个元素就要用for循环
                oUl.innerHTML += '<li></li>';           
            }
            oldLi = aLi[0];
            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 + '/' + arrUrl.length;
                    oldLi.className = '';
                    oldLi = this;
                    this.className = 'active';
                };
            }
        };

--------------------

其中`li` 的 `active` 思路是 `oldLi` 存放上一个 `active`， 清空上一个， 然后给当前的 `li` 加上 `className`

[SouthEast]: /images/20220705/483908354ee4435cb4457947027faf7f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现图片自动切换

JavaScript实现图片自动切换 1、 HTML <div class="slider_box"> <ul>

青旅半醒/ 2023年10月06日 18:38/ 0 赞/ 7 阅读

相关 JavaScript图片切换实现

![效果图][SouthEast] html代码 <div id="pic"> <img src="" alt="" />

绝地灬酷狼/ 2022年09月30日 15:59/ 0 赞/ 231 阅读

相关 js实现切换图片

描述：鼠标点击下一张，图片切换到下一张图片可替换 <style> body{ t

墨蓝/ 2022年09月11日 15:26/ 0 赞/ 190 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 286 阅读

相关用JavaScript实现点击循环切换图片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <

忘是亡心i/ 2022年06月09日 09:57/ 0 赞/ 272 阅读

相关原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

曾经终败给现在/ 2022年05月20日 10:26/ 0 赞/ 257 阅读

相关 JavaScript实现图片切换

实例代码如下： 1 JS 代码： <script type="text/javascript"> //页面加载后加载JS window.οnlοad=func

逃离我推掉我的手/ 2022年05月17日 01:46/ 0 赞/ 227 阅读

相关 CSS3&JavaScript 图片分隔切换

![在这里插入图片描述][20181116173203280.gif] 这个切换效果在firebox上测试正常，但到了chrome上就没有切换效果了。原因可能是它们在处理t

柔情只为你懂/ 2022年04月16日 04:16/ 0 赞/ 137 阅读

相关 JavaScript 图片滑动切换效果

序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做

本是古典何须时尚/ 2022年04月14日 01:50/ 0 赞/ 304 阅读

相关 jquery实现图片切换

<div> <img class="imgclick" src="img/pic1.png" /> </div>

布满荆棘的人生/ 2021年09月19日 10:10/ 0 赞/ 439 阅读