滑动轮播图

最新推荐文章于 2023-03-21 10:27:05 发布
最新推荐文章于 2023-03-21 10:27:05 发布
阅读量711 收藏
点赞数 1
分类专栏： 小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zk13721151124/article/details/53443855
版权

自己写了个简单的滑动轮播特效分享给大家：

代码如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
    *{margin:0px;padding:0px;list-style: none;}
    /*先对所有的li进行绝对定位，然后通过改变left和top属性实现滑动效果*/
    body{position: relative;}
    .left{position: relative;width:300px;height:340px;margin:100px 00px;border: 1px solid;overflow: hidden;float:left;}
    .up{position: relative;width:340px;height:300px ;margin:120px 100px;border: 1px solid;overflow: hidden;float:left;}

    ul li{width:300px;height: 300px;float:left;position: absolute;font-size: 50px;line-height: 300px;text-align: center;color:white;}

    .left ul li{top:20px;left:300px;}
    .up ul li{top:-300px;left:20px;}

    ol{position: absolute;z-index: 100;}
    ol li{margin: 5px;background: white;cursor: pointer;}
    .left ol{bottom:20px;left:10px;}
    .left ol li{width:20px;height: 5px;float:left;}

    .up ol{top:20px;right:20px;}
    .up ol li{width:5px;height: 20px;}

    .top{z-index: 99;}
    </style>
    <body>
        <!-- 左右滑动部分 -->
        <div class='left'>
            <!-- ul和ol下的li数量一致 -->
            <ul class='banner'>
                <li style='background-color:#FF99CC;left:0px;'>would</li>
                <li style='background-color: #CCCCFF;'>you</li>
                <li style='background-color: #99CC33;'>marry</li>
                <li style='background-color: #99CCCC;'>me</li>
                <li style='background-color: #CC99CC;'>?</li>
            </ul>
            <ol>
                <li style='background-color:black;'></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>

        <!-- 上下滑动部分 -->
        <div class='up'>
        <!-- ul和ol下的li数量一致 -->
            <ul class='banner2'>
                <li style='background-color: #FF99CC;top:0px;'>would</li>
                <li style='background-color: #CCCCFF;'>you</li>
                <li style='background-color: #99CC33;'>marry</li>
                <li style='background-color: #99CCCC;'>me</li>
                <li style='background-color: #CC99CC;'>?</li>
            </ul>
            <ol>
                <li style='background-color:black;'></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </body>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            (function(){
                // 左右滑动 leftright()
                function lr(){
                    var num=0;
                    var asd=0;
                    var length=$('.banner li').length;
                    var clock;
                    clock=setInterval(auto,3000)
                    function auto(){
                        asd=num;
                        num+=1;
                        if(num>=length){
                            num=0
                        }
                        change();
                    }
                    function change(){
                        $('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top');
                        $('.left ul li').eq(asd).animate({left:'-300px'},1000,function(){
                            $(this).css('left','300px')
                        }).removeClass('top');

                        $('.left ol li').css('background','white');
                        $('.left ol li').eq(num).css('background','black');
                    };

                    $('.left ol li').click(function(){
                        asd=num;
                        clearInterval(clock);
                        num=$(this).index();
                        if(num<asd){
                            $('.left ul li').eq(num).css('left','-300px');
                            $('.left ul li').eq(asd).animate({left:'300px'},1000).removeClass('top');
                            $('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top');

                            $('.left ol li').css('background','white');
                            $('.left ol li').eq(num).css('background','black');
                        }else if(num==asd){
                            return false;
                        }else{
                            change();
                        };

                        clock=setInterval(auto,3000);
                    });
                    $('.left').mouseover(function(){
                        clearInterval(clock);
                    });
                    $('.left').mouseout(function(){
                        clearInterval(clock);
                        clock=setInterval(auto,3000);
                    });

                };

                // 上下滑动 updown()
                function ud(){
                    var num2=0;
                    var asd2=0;
                    var length2=$('.banner2 li').length;
                    var clock2; 
                    clock2=setInterval(auto2,3000)
                    function auto2(){
                        asd2=num2;
                        num2+=1;
                        if(num2>=length2){
                            num2=0
                        }
                        change2();
                    }
                    function change2(){
                        $('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top');

                        $('.up ul li').eq(asd2).animate({top:'300px'},1000,function(){
                            $(this).css('top','-300px')
                        }).removeClass('top');

                        $('.up ol li').css('background','white');
                        $('.up ol li').eq(num2).css('background','black');
                    };

                    $('.up ol li').click(function(){
                        asd2=num2;
                        clearInterval(clock2);
                        num2=$(this).index();
                        if(num2<asd2){
                            $('.up ul li').eq(num2).css('top','300px');
                            $('.up ul li').eq(asd2).animate({top:'-300px'},1000).removeClass('top');
                            $('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top');
                            $('.up ol li').css('background','white');
                            $('.up ol li').eq(num2).css('background','black');
                            // $('ul li').css('top','300px');
                        }else if(num2==asd2){
                            return false;
                        }else{
                            change2()
                        };


                        clock2=setInterval(auto2,3000);
                    });


                    $('.up').mouseover(function(){
                        clearInterval(clock2);
                    });
                    $('.up').mouseout(function(){
                        clearInterval(clock2);
                        clock2=setInterval(auto2,3000);
                    });
                };
                lr();
                ud();
            })();
        });

    </script>
</html>

这里写图片描述

宗科
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS实现左右滑动轮播图
qq_45670042的博客
07-14 9064
效果图 轮播图的功能 轮播图需要实现左右无缝切换 需要实现跳转（放在圆点显示对应图片） 当前位置的小圆点样式需要突出
js实现滑动轮播图
zhenzuo_x的博客
10-26 8506
最近做项目总是只会调用别人做好的各种插件效果，想起很久没来自己写点小插件，久了会忘记的，就赶紧来补一下，前端程序员必备，实现一个js轮播图。 html代码： &lt;!DOCTYPE HTML&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type="text/css" href=&qu
html自动滑动轮播代码,html+css+js 实现自动滑动轮播图
weixin_30228803的博客
05-30 521
轮播图*{margin: 0 auto;padding: 0;list-style: none; //去圆点}.one {width: 1200px;height:350px;margin: 0 auto;overflow: hidden; //设定好的宽度多余的进行隐藏}.one ul{width: 3600px;position: relative;}.one ul li{float...
自动滑动图片html5,html+css+js 实现自动滑动轮播图
weixin_29338361的博客
05-30 541
轮播图*{margin: 0 auto;padding: 0;list-style: none; //去圆点}.one {width: 1200px;height:350px;margin: 0 auto;overflow: hidden; //设定好的宽度多余的进行隐藏}.one ul{width: 3600px;position: relative;}.one ul li{float...
基于Vue实现左右滑动轮播图
m0_56733780的博客
06-01 3292
<!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>D.
html手指滑动滚动图片,js原生实现移动端手指滑动轮播图效果的示例
weixin_36022526的博客
06-04 378
Documenthtml{height:100%;}body{width: 100%;height:100%;margin:0;overflow: hidden;}.wrap{position: relative;overflow: hidden;}.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}....
vue移动端可滑动轮播图
qq_53972864的博客
03-21 544
滑动判断标准为超过容器1/2 X轴距离表成功下一张或上一张。
移动端自动轮播可滑动轮播图
baidu_38027860的博客
04-13 1511
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播demo&lt;/title&gt;      &lt;meta name="viewport" content="initial-scale=1.0, maximum-s
android viewpager滑动图片轮播,使用ViewPager实现图片轮播
weixin_39631295的博客
05-31 836
前言首先我们来看一下运行的效果，如下所示：这是在我们的项目中经常会用到的图片轮播效果，一般用于广告图片的展示。它要求主要实现以下功能：1)自动播放；2)无限滑动；3)手指拖拽图片时暂停自动轮播，松开后继续自动轮播；4)含动画效果的小圆点指示器。本文将介绍利用ViewPager实现无限轮播图片，图片下方加上小圆点指示器标记当前位置，并利用Handler实现自动轮播图片。正文1、实现自动播放思路：没隔...
原生JS无缝滑动轮播图
10-16
【原生JS无缝滑动轮播图】是一种常见的网页动态效果，用于展示一系列图片或内容。在本实例中，我们将探讨如何使用纯JavaScript实现一个淡入淡出的无缝轮播图，无需依赖任何外部库如jQuery。以下是实现该功能的关键...
移动端滑动轮播图
06-08
在移动端开发中，滑动轮播图是一种常见的用户体验设计元素，用于展示多张图片或内容。本项目基于Zepto.js库构建了一个移动端滑动轮播图插件，它具有独特的视觉效果：当用户滑动时，中间的图片会放大，而两侧的图片则...
原生js实现滑动轮播图
07-06
本文将详细讲解如何使用原生JavaScript实现一个具备基础功能的滑动轮播图，包括点击左右按钮切换图片、点击小圆点定位到相应图片以及自动播放与鼠标悬停暂停的功能。我们将涉及到的主要技术栈是HTML、CSS和...
自己写了一个小小的双色球号码随机生成器
青枫浦
12-10 7030
只为娱乐：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双色球摇奖</title> </head> <style> div{ width:500px; height:200px; margin:200px auto; b
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
手动切换和左右滑动轮播图
06-10
手动切换轮播图是指用户可以通过点击或者滑动的方式手动切换轮播图的展示内容。一般来说，手动切换的轮播图会在轮播图下方或者旁边添加小圆点或者数字等控制按钮，用户可以点击这些按钮来切换轮播图的内容。 左右滑动轮播图是指用户可以通过左右滑动的手势来进行轮播图的切换。这种轮播图通常用于移动端的网页设计中，比如在手机上可以通过左右滑动来切换轮播图的内容。在实现这种轮播图的过程中，需要使用JavaScript技术来监听用户的手势操作，并根据手势的方向来判断轮播图的切换方向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值