实现轮播图效果

最新推荐文章于 2023-10-13 13:17:58 发布
最新推荐文章于 2023-10-13 13:17:58 发布
阅读量63 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67542258/article/details/125920898
版权

代码部分：

<!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>

</head>

<body>

    <!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>

    <style>

        .contain{

            /* position: relative; */

            width: 1200px;

            height: 500px;

           

            /* overflow: hidden; */

         

        }

         .banner{  

            width: 100%;

            height: 100%;

            position: relative;

            /* display: flex; */

            overflow: hidden;

            /* display:inline-block; */

        }

        /* .bigmig{

            width: 100%;

            height: 100%;

             display: inline-block;

             position: relative;

            display: inline-block;

            vertical-align: middle;

            margin: 0 auto;

            display: flex;        

        } */

        .img1{

           

            width: 100%;

            height: 100%;

            /* float: left; */

            position: absolute;

            /* display: block;        */

        }    

        .img2{

            /* float: left; */

            width: 1200px;

            height: 500px;          

            position: absolute;

            display: none;        

        }    

        .img3{          

            width: 1200px;

            height: 500px;          

            position: absolute;  

            display: none;    

            /* float: left;     */

        }    

        ul{

            float: right;

            /* display: flex; */

            position: absolute;

            margin-left: 1000px;

            margin-top: 430px;

            /* background-color: aqua; */

        }

        li{

            list-style: none;

            margin-right: 5px;

            width:10px;

            height:10px;

            border-radius:50%;

            border:3px solid aqua;

            display:inline-block;

            /* float:right; */

        }

        .addcss{

            background-color: black;

        }

        .arrow1{

            font-size: 50px;

            /* color: aqua;

            position: absolute;

            margin-left: 100px;

            margin-top: 100px; */

            /* display: block; */

            /* float: left; */

        }

        .arrow2{

            /* position: absolute; */

            font-size: 50px;

            /* color: aqua;

            margin-left: 200px;

            margin-top: 200px; */

            /* display: block; */

            /* float: right; */

        }

        .arrow{

            position: absolute;

            font-size: 50px;

            margin-top: 200px;

            width: 100%;

            height: 100%;

            color: aqua;

            /* margin-left: 100px;

            margin-top: 100px; */

            /* display:inline-block; */

            /* float: right; */

            /* display: block; */

            display: flex;

            /* align-content: center;

            justify-content: center; */

           justify-content: space-between;

           /* background-color: aqua; */

        }

    </style>

</head>

<body>

<div class="contain">

    <div class="banner">

            <img src="img/banner01.jpg" alt="" class="img1">

            <div class="arrow">

                <div class="arrow1">&lt;</div>

                <div class="arrow2">&gt;</div>

            </div>

            <!-- <div class="arrow">

                <div class="arrow1">&lt;</div>

                <div class="arrow2">&gt;</div>

            </div> -->  

            <img src="img/banner02.webp" alt="" class="img2">

            <div class="arrow">

                <div class="arrow1">&lt;</div>

                <div class="arrow2">&gt;</div>

            </div>

            <img src="img/banner03.webp" alt="" class="img3">

            <div class="arrow">

                <div class="arrow1">&lt;</div>

                <div class="arrow2">&gt;</div>

            </div>      

            <ul>

                <!-- <li></li>

                <li></li>

                <li></li> -->

            </ul>

    </div>

   

    <!-- <div class="arrow">

        <div class="arrow1">&it;</div>

        <div class="arrow2">&gt;</div>

    </div> -->

    <!-- <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul> -->

   

</div>

jQuery代码部分：

    <script src="jquery-3.5.1/jquery-3.5.1.js"></script>

    <script>

        $(function(){  

           

            var j=0;  

            var i=0;

            var settime=setInterval(function(){

                if(j%3==1){

                    $("ul li:eq(0)").mouseenter();

                    $("ul li:eq(2)").mouseleave();

                }

                else if(j%3==2){

                    $("ul li:eq(1)").mouseenter();

                    $("ul li:eq(0)").mouseleave();

                }

                else if(j%3==0){

                    $("ul li:eq(2)").mouseenter();

                    $("ul li:eq(1)").mouseleave();

                }

                j++;

            },3000)

            // 动态添加小圆点

            for(var i = 0;i < $("img").length;i ++){

                $("ul").append("<li>"+"</li>");

            }

            // var k=0;

            $(".arrow2").mouseenter(function(){

                clearInterval(settime);

            })

            $(".arrow2").mouseleave(function(){

                var settime=setInterval(function(){

                if(j%3==1){

                    $("ul li:eq(0)").mouseenter();

                    $("ul li:eq(2)").mouseleave();

                }

                else if(j%3==2){

                    $("ul li:eq(1)").mouseenter();

                    $("ul li:eq(0)").mouseleave();

                }

                else if(j%3==0){

                    $("ul li:eq(2)").mouseenter();

                    $("ul li:eq(1)").mouseleave();

                }

                j++;

            },3000)

            })

           

            $(".arrow2").click(function(){

               

                // $(this).addClass("addcss");

        //    switch (i%3) {

        //      case 0:

        //      $(".img1").fadeOut();

        //      $(".img2").fadeIn();

        //      i++

        //        break;

        //      case 1:

        //      $(".img2").fadeOut();

        //      $(".img3").fadeIn();

        //      i++

        //        break;

        //      case 2:

        //      $(".img3").fadeOut();

        //      $(".img1").fadeIn();

        //      i++

        //        break;

        //    }

       if(i>=0){

        i++;

            if(i%3==1){

           $(".img1").fadeOut();

           $(".img2").fadeIn();  

           $("ul li:eq(1)").addClass("addcss");

           $("ul li:eq(1)").siblings().removeClass("addcss");

           console.log("111")  

           }

           else if(i%3==2){

               $(".img2").fadeOut();

           $(".img3").fadeIn();

           $("ul li:eq(2)").addClass("addcss");

           $("ul li:eq(2)").siblings().removeClass("addcss");

           console.log("222")          

           }

           else if(i%3==0){

               $(".img3").fadeOut();

           $(".img1").fadeIn();

           $("ul li:eq(0)").addClass("addcss");

           $("ul li:eq(0)").siblings().removeClass("addcss");

           console.log("333")    

           }        

        }

        if(i<0){

            if((-i)%3==1){

               $(".img3").fadeIn();

           $(".img2").fadeOut();  

           $("ul li:eq(2)").addClass("addcss");

           $("ul li:eq(2)").siblings().removeClass("addcss");

           console.log("111")  

           }

           else if((-i)%3==2){

               $(".img2").fadeIn();

           $(".img1").fadeOut();

           $("ul li:eq(1)").addClass("addcss");

           $("ul li:eq(1)").siblings().removeClass("addcss");

           console.log("222")          

           }

           else if((-i)%3==0){

               $(".img1").fadeIn();

           $(".img3").fadeOut();

           $("ul li:eq(0)").addClass("addcss");

           $("ul li:eq(0)").siblings().removeClass("addcss");

           console.log("333")    

           }    

            i++;  

        }

             

       })

       $(".arrow1").mouseenter(function(){

                clearInterval(settime);

            })

           

       $(".arrow1").click(function(){

        //    if(math.abs(i)%3==1){

        //        $(".img1").fadeIn();

        //    $(".img2").fadeOut();  

        //    console.log("111")  

        //    }

        //    else if(math.abs(i)%3==2){

        //        $(".img2").fadeIn();

        //    $(".img3").fadeOut();

        //    console.log("222")          

        //    }

        //    else if(math.abs(i)%3==0){

        //        $(".img3").fadeIn();

        //    $(".img1").fadeOut();

        //    console.log("333")    

        //    }    

           if(i>0)

           {

            if(i%3==1){

               $(".img1").fadeIn();

           $(".img2").fadeOut();  

           $("ul li:eq(0)").addClass("addcss");

           $("ul li:eq(0)").siblings().removeClass("addcss");

           console.log("111")  

           }

           else if(i%3==2){

               $(".img2").fadeIn();

           $(".img3").fadeOut();

           $("ul li:eq(1)").addClass("addcss");

           $("ul li:eq(1)").siblings().removeClass("addcss");

           console.log("222")          

           }

           else if(i%3==0){

               $(".img3").fadeIn();

           $(".img1").fadeOut();

           $("ul li:eq(2)").addClass("addcss");

           $("ul li:eq(2)").siblings().removeClass("addcss");

           console.log("333")    

           }    

            i--;    

           }

           if(i<=0){

            if((-i)%3==1){

               $(".img2").fadeIn();

           $(".img3").fadeOut();  

           $("ul li:eq(1)").addClass("addcss");

           $("ul li:eq(1)").siblings().removeClass("addcss");

           console.log("111")  

           }

           else if((-i)%3==2){

               $(".img1").fadeIn();

           $(".img2").fadeOut();

           $("ul li:eq(0)").addClass("addcss");

           $("ul li:eq(0)").siblings().removeClass("addcss");

           console.log("222")          

           }

           else if((-i)%3==0){

               $(".img3").fadeIn();

           $(".img1").fadeOut();

           $("ul li:eq(2)").addClass("addcss");

           $("ul li:eq(2)").siblings().removeClass("addcss");

           console.log("333")    

           }    

            i--;  

           }

       })

    //    <ul>

    //     <li></li>

    //     <li></li>

    //     <li></li>

    //    </ul>

    // var a = $(this).index();

    //             if(a == 1){

    //                 $("#img-two").siblings("img").fadeOut();

    //                 $("#img-two").fadeIn();

    //             }else if(a == 2){

    //                 $("#img-there").siblings("img").fadeOut();

    //                 $("#img-there").fadeIn();

    //             }else if(a == 0){

    //                 $("#img-one").siblings("img").fadeOut();

    //                 $("#img-one").fadeIn();

    //             }

    $("ul li:eq(0)").mouseenter(function(){

        $(this).addClass("addcss");

        $(".img1").stop().siblings("img").fadeOut();

        $(".img1").fadeIn();


 

    })

    $("ul li:eq(0)").mouseleave(function(){

        $(this).removeClass("addcss");

    })

    $("ul li:eq(1)").mouseenter(function(){

        $(this).addClass("addcss");

        $(".img2").stop().siblings("img").fadeOut();

        $(".img2").fadeIn();

    })

    $("ul li:eq(1)").mouseleave(function(){

        $(this).removeClass("addcss");

    })

    $("ul li:eq(2)").mouseenter(function(){

        $(this).addClass("addcss");

        $(".img3").stop().siblings("img").fadeOut();

        $(".img3").fadeIn();

    })

    $("ul li:eq(2)").mouseleave(function(){

        $(this).removeClass("addcss");

    })

        })

       


 

    </script>

</body>

</html>

</body>

</html>

总结：我的逻辑判断去切换图片过于麻烦，可通过siblings("img").fadeOut()去对其余兄弟图片进行淡出操作，而不需要逻辑找到具体判断哪一张图去进行特别淡入淡出操作，这样会简便简单许多；

半缘修道_半缘君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于React Native 0.52实现轮播图效果
12-11
二、实现轮播图效果 1、通过npm安装react-native-swiper npm install react-native-swiper --save 2、在recommend.js引入react-native-swiper import Swiper from 'react-native-swiper'; 3、用 react-native-...
利用iscroll4实现轮播图效果实例代码
12-29
相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效； 一、html代码,当然可以动态添加下面的小圆点 <li><strong>1....
CSS day12 移动端布局练习
qq_34620296的博客
09-13 688
<!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-U...
flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景
m0_51636525的博客
04-25 8976
1.flex-grow决定了flex items 如何扩展拉伸 可以设置任意非负数字（正小数、正整数、0），默认是0 当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才生效 三个宽度120px（3*120=360）的元素放在一个宽度400px的父级元素中，父级元素使用flex布局 <div class="container"> <div class="item item1">120px</d.
常用的几种布局方式---Flex 布局(垂直居中展示）
热门推荐
qq_23260455的博客
03-30 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 常用的几种布局方式---Flex 布局(垂直居中展示）前言一、默认使用静态布局二、flex布局1.父元素container1.1.display:flex1.2.flex-direction属性1.3.主轴与侧轴1.4.justify-content属性1.5.align-items属性1.6.flex-wrap属性2.子元素items 前言 怎样让一个元素在垂直或者水平方向居中显示，可以使用css解决，但是会出现不同浏览器的兼容性问题，
css弹性盒子二
weixin_73143398的博客
09-12 2678
以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：在父内容里面垂直居中一个块内容。使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。这些弹性盒子都可以实现。。。我草指定元素的布局为弹性盒子首先，我们需要给父元素设置display：flexdiv {}
Vue 过渡实现轮播图效果
08-31
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
js实现轮播图效果 纯js实现图片自动切换
11-19
本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片； 2. 鼠标离开，恢复自动播放； 3. 点击...
简单实现轮播图效果的实例
12-07
一、要点： 1.页面加载时，图片重合，叠在一起[绝对定位]; 2.第一张显示，其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去，显示左右...轮播图</title> <link href="css/LunBimg
flex布局总结
LOxia的博客
03-22 1955
flex基础知识及携程网布局案例全部代码
springboot：实现文件上传下载实时进度条功能【附带源码】
55555的博客
10-23 1万+
记得刚入行的时候，做了一个文件上传的功能，因为上传时间较久，为了用户友好性，想要添加一个实时进度条，显示进度。奈何当时技术有限，查了许久也没用找到解决方案，最后不了了之。 近来偶然想到这个问题，于是决定整理一下实现方式，也为和我曾经一样碰壁的同学，提供一些思路。
Flex布局详细解析
前端卷王小白的博客
04-16 9309
Flex布局完整的详细解析,轻松学会并应用Flex布局
css 实现3D效果
蓝朽的小世界
04-03 5605
css实现3d效果
vue上传文件并显示进度条
IT菜鸟
07-29 1万+
keepFileList 用来备份选择的文件列表，因取消下载后文件列表会被清空，导致不能继续上传。手动使用submit()上传。
弹性（flex）布局
qq_43679416的博客
07-09 2462
什么是Flexbox ？ Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。它可以： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将元素装入容器 在 Flexbox 模型中，有三个核心概念： ..
flex的含义
qq_43372535的博客
12-23 1587
flex的含义：flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可 选。 flex-grow ：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如 果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一 个项目的flex-gro...
vue项目实现上传进度条
qq_46344419的博客
07-04 2961
vue项目实现上传进度条
后台上传：Java+Vue+Websocket实现OSS文件上传进度条功能完整教程
最新发布
Da_zhenzai的博客
10-13 2980
通过以上步骤，我们实现了一个包含上传文件和实时显示上传进度的文件上传功能。前端使用Vue编写了上传组件，后端使用Java和Spring Boot进行文件上传处理。通过调用阿里云OSS服务和监听上传文件字节来计算进度，我们能够实时显示文件上传的进度条，提升用户体验。结束语：人生最大的浪费不是金钱的浪费，而是时间的浪费、认知的迟到。
html实现轮播图效果
09-21
HTML实现轮播图效果可以通过使用CSS的animation动画属性来实现。首先，需要设置一个轮播盒子（box），用来包裹轮播内容。然后，在轮播盒子内部，放置多个轮播元素（box1）。每个轮播元素都是一个div元素，并设置其...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值