会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 118924个问题
WEB前端全系列/第三阶段:jQuery编程模块/jQuery基础 2楼

3_淡入淡出轮播图(二).zip

老师,我这里的小圆点的下标怎么获取呢

WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用 5楼
WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用 6楼
WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用 7楼

JQuery.zip

为什么我点击小圆点的时候,照片切换不对呢?

WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用 9楼
WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用 10楼
WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用 11楼

<!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>
    <link rel="stylesheet" href="../../Swiper动画插件/swiper-bundle.min.css">
    <style>
        .swiper-container {
    width: 600px;
    height: 300px;
   
   
}


img{
    width: 100%;
}
    </style>
</head>
<body>
    <!-- 存放内容  -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="imges/0.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="imges/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="imges/2.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
       
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
       
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>




    <script src="../../Swiper动画插件/swiper-bundle.min.js"></script>

    <script>
        var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
   
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
   
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
   
 
   
})        
    </script>
</body>
</html>

老师为啥我轮播图图片是平铺的 不是重叠的 要我自己改样式吗

WEB前端全系列/第三阶段:jQuery编程模块/Swiper(旧) 13楼

老师为啥我方案一 我click事件绑定在li标签的 为啥离开了li标签 存内容的div就会向上收起

<!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>
    <link rel="stylesheet" href="../Css/初始化.css">
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        .container {
            width: 800px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .container ul{
            list-style: none;
        }
        .container ul li{
            border-bottom: 1px dotted black;
        }
        .container ul li h3{
            position: relative;
            background-color: skyblue;
        }
        .container ul li h3 span{
            position: absolute;
            right: 6px;
        }
        .count{
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <h3>看!2021中国经济新气象<span>></span></h3>
                <div class="count">
                    2021年,是党和国家历史上具有里程碑意义的一年!
                    这一年,我国经济发展保持全球领先地位,国家战略科技力量加快发展,产业链韧性和优势得到提升,改革开放向纵深推进,民生保障有力有效,生态文明建设持续推进。
                    这一年,我们从容应对百年变局和世纪疫情,奋力完成改革发展艰巨任务,实现“十四五”良好开局。
                </div>
            </li>
            <li>
                <h3>拜登“吃不了亏的把戏”,被识破了<span>></span></h3>
                <div class="count">
                     据塔斯社莫斯科12月8日报道,普京和拜登7日举行视频双边会谈。
                    双方确认两国在网络安全和战略稳定问题上取得进展,但就乌克兰问题的讨论谈不上具有建设性。俄罗斯国际事务理事会主任安德烈·科尔图诺夫在访谈中表达了上述观点。
                </div>
            </li>
            <li>
                <h3>最严“防沉迷”实施百天:未成年人卸载退游,租号产业受挫<span>></span></h3>
                <div class="count">
                     网友称之为“史上最严防沉迷”政策的实施,让亚楠有些沮丧。这项由国家新闻出版署发布,
                    防止未成年人沉迷网络游戏的通知,明确要求了自2021年9月1日起,所有网络游戏企业仅能在周五、周六、周日和法定节假日的晚8时至晚9时向未成年人提供1小时的服务。
                </div>
            </li>
            <li>
                <h3>以前啃老如今啃小:萌娃网红沦为父母赚钱机器<span>></span></h3>
                <div class="count">
                    在短视频行业,这样的网红萌娃账号并不在少数,其中大部分是记录日常生活或做育儿科普
                    ,少数剑走偏锋,比如无节制喂食、引导孩子说成人“毒鸡汤”等。近期,据央视新闻报道,小红书中还出现了对未成年人隐私部位拍摄的短视频。
                </div>
            </li>
        </ul>
    </div>
    <script>
        //方案一
        // $lis=$('.container ul li');
        // $lis.click(function(){
         
        //     $(this).find('.count').fadeIn();
        //     console.log($(this).height());
        // });
        // $lis.mouseout(function(){
        //    $(this).find('.count').fadeOut()
        // });

        //方案二
        $lis=$('.container ul li');
        $lis.click(function(){
            console.log(1111);
            if($(this).find('.count').is(':visible')){          
                $(this).find('.count').slideUp();
                $(this).siblings().find('.count').slideUp();
                $(this).find('span').html('>');
            }else{
                $(this).siblings().find('.count').slideUp();
                $(this).find('.count').slideDown();
               
                $(this).find('span').html('<');
            }
        })
       
    </script>
</body>

</html>


WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用(旧) 14楼

百战程序员微信公众号

百战程序员微信小程序

©2014-2023 百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2020212637