简单的图片切换demo

最新推荐文章于 2021-07-23 15:36:46 发布

蓝色清晨_

最新推荐文章于 2021-07-23 15:36:46 发布

阅读量328

点赞数

分类专栏： Jquery 笔记

本文链接：https://blog.csdn.net/yingleiming/article/details/80779665

版权

Jquery 笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

思路：
1.获取a标签href的值
2.点击底部导航的时候，将与之对应的href值赋给img标签的src.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wrapimglist</title>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 690px;
            height: 286px; 
            overflow: hidden;           
            margin: 0 auto;
            position: relative;
        }
        #list{
            bottom: 2px;
            position: absolute;
        }
        #content ul li{
            list-style: none;
            cursor: pointer;
        }
        .clear{
            content: "";
            display: block;
            clear: both;
        }
        #list>ul>li{
            float: left;
            display: inline-block;
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #fff;
        }
        #list>ul>li>a{
            color: #fff;
        }

    </style>
</head>
<body>

<div id="content">
    <img id="showpig" src="../../images/arts/art-1.jpg">
    <div id="list">
        <ul>
            <li><a href="../../images/arts/art-1.jpg">1</a></li>
            <li><a href="../../images/arts/art-2.jpg">2</a></li>
            <li><a href="../../images/arts/art-3.jpg">3</a></li>
            <li><a href="../../images/arts/art-4.jpg">4</a></li>
            <li><a href="../../images/arts/art-5.jpg">5</a></li>
            <li><a href="../../images/arts/art-6.jpg">6</a></li>
            <li><a href="../../images/arts/art-7.jpg">7</a></li>
            <li><a href="../../images/arts/art-8.jpg">8</a></li>
            <li><a href="../../images/arts/art-9.jpg">9</a></li>
            <li><a href="../../images/arts/art-10.jpg">10</a></li>  
            <div style="clear:both;"></div>     
        </ul>
    </div>
</div>
<script src="../../scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript"> 
    $(function(){
        // 让底部导航居中
        var pwidth=$("#content").width();
        var lwidth=$("#list").width();
        var marginLeft=(pwidth-lwidth)/2;
        $("#list").css("margin-left",marginLeft);

        //图片切换
        $("#list ul li").on("click",function(){
            //获取与之对应的a标签的href值，保存在变量href中
            var href=$(this).find("a").attr("href");
            //获取img标签的src属性，并将变量href的值赋给它
            $("#showpig").attr("src",href);
            //阻止默认跳转
            return false;
        });
    });
</script>
</body>
</html>