切换图片两种状态转换全选

最新推荐文章于 2023-08-21 13:55:36 发布

菲允龙歌

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量316

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100592588

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

改变图片src

btn.onclick = function(){
   div.innerHTML=' <img src="images/'+txt.value+'.jpg" alt="" id="pic">'
}

点击切换图片

<img src="./image/1.jpg" alt="" id="im"><br>
<button id="btn01" value="">上一张</button>
<button id="btn02" value="">下一张</button>

<script>
    var im = document.getElementById('im')
    var btn01 = document.getElementById('btn01')
    var btn02 = document.getElementById('btn02')
    var i = 1
    btn02.onclick=function() {
       i++
       if(i>3) {
           i=3
       }
       console.log(i)
       console.log(typeof im)
       im.src='./image/'+i+'.jpg'
    }
    btn01.onclick=function() {
       i--
       if(i<1) {
           i=1
       }
       console.log(i)
       console.log(typeof im)
       im.src='./image/'+i+'.jpg'                 
    }
</script>

灯开关

<img src="./image/off.png" alt="" id="pic">
<button id="btn">开关</button>
<script>
        var pic = document.getElementById('pic')
        var btn = document.getElementById('btn')
        var flag = false
        btn.onclick= function() {
            if(flag) {
                pic.src='./image/off.png'
                flag = false    
                console.log(pic.src)
                console.log(flag)
        }else {
                pic.src='./image/on.png'
                flag = true
                console.log(pic.src)
                console.log(flag)
            }
        }
</script>

滑过切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;margin: 0;
        }
        div {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 0 auto;
            overflow: hidden;
        }
        img{
            width: 300px;
            height: 200px;
        }
        p {
            position: absolute;
            bottom: 10px;
        }
        p span {
            display: inline-block;
            border: 5px solid #fff;
            border-radius: 50%
        }
        p .red {
            color: red;
        }
    </style>
</head>
<body>
    <div>

        <img src="./image/1.jpg" alt="">
        <img src="./image/2.jpg" alt="">
        <img src="./image/3.jpg" alt="">
        <img src="./image/4.jpg" alt="">
        <p>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
    <script>
        var pic = document.querySelectorAll('img')
        console.log(pic)
        var spans = document.getElementsByTagName('span')
        console.log(spans)
        for(i=0;i<spans.length;i++){
            spans[i].index = i
            spans[i].onmouseover=function() {
                for(i=0;i<spans.length;i++){
                    spans[i].className=''
                    pic[i].style.display = 'none'
                }                
                this.className='red'
                pic[this.index].style.display = 'block'
            }
        }
    </script>
</body>
</html>

图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        img{ display:block;}
        .box{ width: 700px; height: 525px; margin: 10px auto; border: 1px solid #000; position: relative;}
        .list{ position: absolute;  left: 0; top:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
        .list span{ color: #fff; font-size: 20px;}
        .nav{ position: absolute; left: 0; bottom: 40px; text-align: center; width: 100%;}
        .nav span{ cursor: pointer; display: inline-block; width: 0; height: 0; border: 6px solid #eee; border-radius:50%; margin-right:5px; }
        .nav .active{ border: 6px solid #f60;}
        .content{ position: absolute;  left: 0; bottom:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
        button{ width: 30px; height: 50px; position: absolute; top: 50%; margin-top: -25px; cursor: pointer;}
        .prev{ left: 0;}
        .next{ right: 0;}
    </style>
</head>
<body>
    <div class="box">
        <p class="list"><span>1</span>/<span>4</span></p>
        <img src="images/1.jpg" alt="">
        <p class="nav">
            <!-- <span class="active"></span>
            <span></span> -->
        </p>
        <p class="content">美女1</p>
        <button class="prev"><</button>
        <button class="next">></button>
    </div>
    <script>
        var box = document.querySelector('.box');
        var lists = document.querySelectorAll('.list span');
        // console.log(lists)
        var imgs = document.querySelectorAll('.box img')[0];
        var nav = document.querySelector('.nav');
        var content = document.querySelector('.content');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var piclist = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]
        var contlist = ['美女1','美女2','美女3','美女4']
        var len = piclist.length;
        var str = '';
        for(i=0;i<len;i++){
            str +='<span></span>' 
        }
        nav.innerHTML = str;
        lists[1].innerHTML = len
        var spans = document.querySelectorAll('.nav span');
        spans[0].className = 'active';
        for(i=0;i<len;i++){
            spans[i].index = i
            spans[i].onmouseover=function(){
                for(i=0;i<len;i++){
                    spans[i].className=''
                }
                num = this.index
                this.className = 'active';
                imgs.src = piclist[this.index];
                content.innerHTML = contlist[this.index];
                lists[0].innerHTML = this.index+1
            }
        }
        //  下一个按钮  和  划过的索引值  对应    num = this.index
        var num = 0;
        next.onclick = function(){
            num++;
            if(num>3){
                num=0;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num+1;
            for(i=0;i<len;i++){
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
        prev.onclick = function(){
            num--;
            if(num<0){
                num=3;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num+1;
            for(i=0;i<len;i++){
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
    </script>
</body>
</html>

点击全选选中全部，选中全部自动勾选全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" class="all">全选
    <hr>
    <div id="box">
       <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox">
    </div>
    <script>
        var all = document.querySelector('.all')
        var inp = document.getElementById('box').getElementsByTagName('input')
        all.onclick = function(){
            if(all.checked==true){
                for(var i=0;i<inp.length;i++){
                    inp[i].checked = all.checked
                }
            }else{
                for(var i=0;i<inp.length;i++){
                    inp[i].checked = all.checked
                }
            }
        }
       for(var i=0;i<inp.length;i++){
            inp[i].onclick = function(){
                var x = 0
                for(var i=0;i<inp.length;i++){
                    if(inp[i].checked == true){
                        x++
                        console.log(x)
                    }
                }
                if(x==inp.length){
                    all.checked = true  
                }else{
                    all.checked = false  
                }
            }
        }
        // if(this.checked == true){
        //             x++
        //             console.log(x)
        //             if(x==inp.length){
        //                 all.checked = true;
        //             }
        //         }else{
        //             x--
        //             if(x!=inp.length){
        //                 all.checked = false;
        //             }
        //         }

    </script>
</body>
</html>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
切换图片两种状态转换全选

改变图片srcbtn.onclick = function(){ div.innerHTML=' <img src="images/'+txt.value+'.jpg" alt="" id="pic">'} 点击切换图片<img src="./image/1.jpg" alt="" id="im"><br><button id="btn...
复制链接

扫一扫