图片切换（小数量）

最新推荐文章于 2022-06-20 21:03:47 发布

可芭乐

最新推荐文章于 2022-06-20 21:03:47 发布

阅读量261

点赞数 1

分类专栏：小作品文章标签：图片

本文链接：https://blog.csdn.net/a839371666/article/details/52909679

版权

小作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

图片切换小数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    window.onload = function(){
        var oPrev = document.getElementById('prev');
        var oNext = document.getElementById('next');
        var oText = document.getElementById('text');
        var oSpan = document.getElementById('span1');
        var oImg = document.getElementById('img1');
        var arrUrl = ['../images/1.jpg','../images/2.jpg','../images/3.jpg','../images/4.jpg','../images/5.jpg','../images/6.jpg'];
        var arrText = ['图片1','图片2','图片3','图片4','图片5','图片6'];

        var num = 0;

        function fnTab(){
            oSpan.innerHTML = num + 1 + '/' + arrText.length;
            oImg.src = arrUrl[num];
            oText.innerHTML = arrText[num];
        }
        fnTab();
        oNext.onclick = function(){
            num ++;
            if ( num == arrText.length ) {
                num = 0;
            };
        fnTab();
        }
        oPrev.onclick = function(){
            num --;
            if ( num == -1 ) {
                num = arrText.length-1;
            };
        fnTab();
        }
    }

</script>
<style type="text/css">
    #content {
        width: 400px;
        height: 400px;
        border: 5px solid #f1f1f1;
        margin: 40px auto 0;
        position: relative;
        background: #f1f1f1;
    }
    #content a {
        width: 40px;
        height: 40px;
        background: #444;
        border: 2px solid #fff;
        position: absolute;
        top: 178px;
        line-height: 40px;
        text-decoration: none;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 30px;
        opacity: 0.4;filter:alpha(opacity:40);
    }
    #content a:hover {
        opacity: 0.8;filter:alpha(opacity:80);
    }
    #prev {
        left: 10px;
    }
    #next {
        right: 10px;
    }
    #text,#span1 {
        position: absolute;
        left: 0;
        width: 400px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background: #000;
        opacity: 0.4;filter:alpha(opacity:0.4);
    }
    #text {
        bottom: 0;
        margin: 0;
    }
    #span1 {
        top: 0;
    }
    #img1 {
        width: 400px;
        height: 400px;
    }
</style>
</head>
<body>
    <div id="content">
        <a id="prev" href="javascript:;"><</a>
        <a id="next" href="javascript:;">></a>
        <p id="text">图片加载中……</p>
        <span id="span1">数量加载中……</span>
        <img id="img1" />
    </div>
</body>
</html>

可以一张纸切换并回到开始

可芭乐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片切换（小数量）

图片切换小数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> window.onload = function(){ var oPrev = document.getElem
复制链接

扫一扫