淘宝精品案例JS、jQuery

最新推荐文章于 2022-11-19 23:50:29 发布

一夕ξ

最新推荐文章于 2022-11-19 23:50:29 发布

阅读量1.1k

点赞数

分类专栏：前端学习文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_45387575/article/details/123559893

版权

JavaScript jQuery 图片切换事件监听 DOM操作

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

自己只会适用原生js来实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        .box {
            position: relative;
            width: 200px;
            height: 150px;
            background-color: pink;
            border: 1px solid rgb(247, 155, 170);
            overflow: hidden;
        }
        
        .nav {
            width: 60px;
            height: 152px;
            background-color: grey;
        }
        
        .nav li {
            list-style: none;
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: pink;
            border: 1px solid rgb(247, 155, 170);
            margin-top: -1px;
            margin-left: -1px;
        }
        
        .nav ul {
            padding-left: 0px;
            width: 60px;
            height: 150px;
            margin-top: 0px;
        }
        
        .img {
            position: absolute;
            top: 0px;
            left: 60px;
            background-color: rgb(223, 203, 203);
            width: 140px;
            height: 150px
        }
        
        .img img {
            width: 100%;
            height: 100%;
            display: none
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">
            <ul>
                <li>女鞋

                </li>
                <li>男鞋</li>
                <li>上衣</li>
                <li>下衣</li>
                <li>厨具</li>
            </ul>
        </div>
        <div class="img">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FoBmDIZzo8rcQ80fqVvxSPA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650031805&t=0f059238f8eacdc6a7e47b50771d4caf"
                alt="" class="tu1">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg12.360buyimg.com%2Fn1%2Fjfs%2Ft1%2F138967%2F7%2F21440%2F61290%2F6143001dE4829ca4d%2Ff35d802aceddf760.jpg&refer=http%3A%2F%2Fimg12.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650032113&t=2ea8f02af98cd03a62344788d8dec13e"
                alt="" class="tu2">
            <img src="http://t15.baidu.com/it/u=1918065371,3055478553&fm=224&app=112&f=JPEG?w=500&h=500" alt="" class="tu3">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.cfw.cn%2Feditors%2Fattached%2Fimage%2F20190712%2F20190712095512375.jpg&refer=http%3A%2F%2Fimg1.cfw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650032162&t=c54e0aaa3ebd78afee8cdc56da641347"
                alt="" class="tu4">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FIAPaNTjLeHGl379iETkINw.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650032186&t=8c80d833cb6035a51b2cd4528ac89218"
                alt="" class="tu5">
        </div>
    </div>
    <script>
        // $(function() {
        //     //点击某个栏目，相应的图片就显示出来
        //     $('ul>li').click(function() {

        //     })
        // })
        //原生js实现
        var lis = document.querySelectorAll('li')
        var imgs = document.querySelectorAll('img')
        for (i = 0; i < lis.length; i++) {
            //给每个图片添加自定义属性--错应该是给每个li自定义一个属性做为img的索引号
            // imgs[i].setAttribute('index', i)
            lis[i].setAttribute('index', i)
        }
        //首先默认第一个图片显示
        imgs[0].style.display = 'block'
            //添加点击事件
        for (i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function() {
                // console.log(this.getAttribute('index'))
                for (i = 0; i < lis.length; i++) {
                    imgs[i].style.display = 'none'
                    lis[i].style.color = ''
                }
                imgs[this.getAttribute('index')].style.display = 'block'
                this.style.color = 'red'
            })
        }
    </script>
</body>

</html>

jQuery实现：

核心：鼠标经过左侧盒子某个li时，就让内容区盒子相对应的图片显示，其余图片隐藏

需要得到当前li的索引号，就可以显示对应索引号的图片

jQuery得到当前元素的索引号$(this).index( )

中间对应的图片，可以通过eq(index)方法去选择

显示元素show() 隐藏元素hide()

        $(function() { //入口函数
            //经过某个栏目，相应的图片就显示出来
            $('.img img').eq(0).show()
            $('ul>li').mouseover(function() {
                //得到当前li的索引号
                var index = $(this).index()
                    //让相应索引号的图片显示
                console.log($('.img img').eq(index))
                $('.img img').hide()
                $('.img img').eq(index).show()
            })
        })

        $(function() { //入口函数
            //经过某个栏目，相应的图片就显示出来
            $('.img img').eq(0).show()
            $('ul>li').mouseover(function() {
                //得到当前li的索引号
                var index = $(this).index()
                    //让相应索引号的图片显示
                console.log($('.img img').eq(index))
                    // $('.img img').hide()
                $('.img img').eq(index).show()
                    //让其余的图片隐藏
                $('.img img').eq(index).siblings().hide()
            })
        })

一样的用到排他思想

一夕ξ

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
淘宝精品案例JS、jQuery

自己只会适用原生js来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫