JavaScript+CSS+html【练习题】用jQuery实现轮播图2.0

最新推荐文章于 2024-01-10 22:08:10 发布

辣辣写代码_nanaProgrammer

最新推荐文章于 2024-01-10 22:08:10 发布

阅读量398

点赞数

文章标签： js javascript css html jquery

本文链接：https://blog.csdn.net/qq_39455275/article/details/108727998

版权

JavaScript+CSS+html【练习题】用jQuery实现轮播图2.0

题目
代码实现
效果展示

之前，用JavaScript实现了轮播图1.0：

JS实现轮播图1.0

学习了jQuery之后，我们用jQuery实现轮播图2.0。
jQuery实际上是JS代码（大概1万多行JS代码），将许多常见的JS原生操作封装在了一个个函数里，让我们写代码更加简洁高效。

注意：要先将jQuery文件放置在代码所在文件夹里，并在html文件的head部分引入jQuery文件，这样才能使用jQuery。

关于jQuery的使用，请见中文API文档：
jQuery中文API文档（非官方）

题目

在这里插入图片描述
京东首页
使用 HTML+CSS 布局出如上图所示页面效果。
嵌入代码，定时轮换显示图片。
添加鼠标移入移出事件，完成暂停和继续轮换效果。
为左右按钮添加点击事件，完成手动轮换商品图片效果展示。
完成左下角圆点点击轮换商品图片展示。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实现轮播图</title>

    <style>
        div,img{margin:0px;padding:0px;}
        #did{
            width:325px;
            height:427px; 
            /*内部采用相对定位*/
            position: relative;
            /*超出的部分隐藏*/
            overflow: hidden;
            
        }
        img{
            width: 325px;
            position: absolute;
        }
        /*页面刚加载时，只显示第一张图片*/
        #did img{display:none;}
        #did img:first-child{display:block}

        /* 左右箭头  */
        .arrowhead-left,
        .arrowhead-right {
            position: absolute;
            width: 40px;
            height: 40px;
            font-size: 30px;
            line-height: 35px;
            text-align: center;
            color:white;
            background-color: rgba(0,0,0,.2);
            border-radius: 20px 20px 20px 20px;

            top:193px;/*427/2-40/2*/
            cursor: pointer;
            
        }
        .arrowhead-right {
            left:295px;/*325-30*/
        }
        .arrowhead-left{
            right:295px;
        }
 
        /* 小圆点所在的容器 */
        #radius { 
            position:absolute;          
            width: 320px;
            height: 20px;
            bottom: 10px;
            left:5px;
            text-align:left;          
            
        }

        /* 小圆点 */
        span {
            width: 20px;
            height: 20px;
            display: inline-block;
            background-color: rgba(0,0,0,.4);
            border-radius: 50%;
            cursor: pointer;
        }

        .active {
            background-color: rgba(0,0,0,.1);
        }

    </style>
    <script src="./jquery-3.5.0.min.js"></script>
</head>
<body>
    <h1>jQuery实现轮播图</h1>
    <div id="did">
        <img src="./images/1.jpg"/>
        <img src="./images/2.jpg"/>
        <img src="./images/3.jpg"/>
        <img src="./images/4.jpg"/>
        <img src="./images/5.jpg"/>
        <img src="./images/6.jpg"/>

        <!-- 左右箭头 -->
        <div class="arrowhead-left" id="al">&nbsp<</div> 
        <div class="arrowhead-right" id="ar">>&nbsp</div>

        <!--小圆点所在的容器-->
        <div id="radius"></div>
    </div>
</body>
<script>
    $(function (){
        var m = 1;//当前图片序号
        var mytime = null;
        
        //图片个数
        picNum =$("img").length;

        //添加span标签（小圆点），个数为图片个数
        str="";
        for (var i = 0; i < picNum; i++) {
            str += ' <span></span>'
        }
        //设置标签内的html内容
        $("#radius").html(str);

        //将第一个小圆点的class设置为active
        $("span:first-child").addClass("active");

        
        //定义函数展示对应的图片
        //到该图片了，就要展示该图片，其他图片不显示
        //以及对应的小圆点被点亮，其他小圆点没有点亮
        function show(x){  
            for(var i=1; i<=picNum; i++){
                if(x == i){
                    //注意下面应该使用i而非i-1作为索引，从第1个孩子节点开始，没有第0个孩子节点
                    $("img:nth-child("+i+")").show();
                    $("span:nth-child("+i+")").addClass("active");
                }else{
                    $("img:nth-child("+i+")").hide();
                    $("span:nth-child("+i+")").removeClass("active");
                }
            }
            
        }

        //开启定时轮播图片
        function doStart(){
            if(mytime == null){
                mytime = setInterval(function(){
                    m++;
                    if(m>picNum){
                        m=1;
                    }
                    console.log("m:"+m);
                    show(m);
                    
                }, 2000);
            }
        }

        doStart();

        //停止轮播图片
        function doStop(){
            if(mytime != null){
                clearInterval(mytime);
                mytime = null;
            }
        }
        
        $("#did").hover(function(){
            //鼠标移入，停止播放
            console.log("鼠标移入...");
            doStop();

        },function(){
            //鼠标移出，继续播放
            console.log("鼠标移出...");
            doStart();

        });

        //点击左箭头
        $("#al").click(function(){
            m--;
            if(m<=0){
                m=picNum;
            }

            show(m);
        });

        //点击右箭头
        $("#ar").click(function(){
            m++;
            if(m>picNum){
                m=1;
            }
            
            show(m);
        });

        //鼠标移入移出时，改变左右箭头背景颜色
        $("#al").mouseover(function(){
            $("#al").css("background-color","rgba(0,0,0,.4)");
        });

        $("#ar").mouseover(function(){
            $("#ar").css("background-color","rgba(0,0,0,.4)");
        });

        $("#al").mouseout(function(){
            $("#al").css("background-color","rgba(0,0,0,.2)");
        });

        $("#ar").mouseout(function(){
            $("#ar").css("background-color","rgba(0,0,0,.2)");
        });

        //给每个小圆点绑定事件
        $("span").each(function(i){//i从0开始
            $(this).click(function(){
                m=i+1;
                console.log("点击小圆点时m："+m);
                show(m);  
            });
        });


    });
</script>
</html>

效果展示

在这里插入图片描述

辣辣写代码_nanaProgrammer

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+CSS+html【练习题】用jQuery实现轮播图2.0

JavaScript+CSS+html【练习题】用jQuery实现轮播图2.0题目代码实现效果展示之前，用JavaScript实现了轮播图1.0：JS实现轮播图1.0学习了jQuery之后，我们用jQuery实现轮播图2.0。jQuery实际上是JS代码（大概1万多行JS代码），将许多常见的JS原生操作封装在了一个个函数里，让我们写代码更加简洁高效。注意：要先将jQuery文件放置在代码所在文件夹里，并在html文件的head部分引入jQuery文件，这样才能使用jQuery。关于jQuery的
复制链接

扫一扫