源生js轮播图组件

最新推荐文章于 2024-07-30 12:21:21 发布
最新推荐文章于 2024-07-30 12:21:21 发布
阅读量1.6k 收藏 27
点赞数 2
分类专栏： javascript 文章标签： javascript轮播图 轮播图js代码 js轮播图 轮播图 轮播图组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wp7021/article/details/79205749
版权

原生javascripts 轮播图


一、无缝滚动轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box {
            width: 600px;
            height: 200px;
            margin:100px auto;
            overflow: hidden;
            position: relative;
        }
        .box ul {
            list-style: none;
            width: 2000px;
            height: 200px;
            position: absolute;
            top:0;
            left:0;
            overflow: hidden;
        }
        li {
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="images/01.jpg" alt=""></li>
        <li><img src="images/02.jpg" alt=""></li>
        <li><img src="images/03.jpg" alt=""></li>
        <li><img src="images/04.jpg" alt=""></li>
        <li><img src="images/01.jpg" alt=""></li>
        <li><img src="images/02.jpg" alt=""></li>
    </ul>
</div>
</body>
<script>
    window.onload = function(){
        var divbox = document.getElementsByClassName('box')[0];
        var ulbox = divbox.children[0];
        var timer = setInterval(go,100);
        var num = 0;
        function go(){
            num -= 10;
            num<=-1200 ? num=0 :num;
            ulbox.style.left = num + "px";
        }
        divbox.onmouseover = function(){
            clearInterval(timer);
        }
        divbox.onmouseout = function(){
            timer = setInterval(go,100)
        }
    }
</script>
</html>

二、左右按钮轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右按钮轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 520px;
            height: 280px;
            border:1px solid #ccc;
            margin:100px auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            list-style: none;
            width:500%;
            position: absolute;
            left:0;
        }
        ul li{
            float: left;
        }
        img{
            display: block;
        }
        .barBox {
            width: 100%;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top:50%;
            margin-top:-25px;
            left:0;
            display: none;
        }
        .bar {
            width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            font-size:38px;
            color: #ccc;
        }
        .lbar {
            float: left;
        }
        .rbar {
            float: right;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="images/0001.jpg" alt=""></li>
        <li><img src="images/0002.jpg" alt=""></li>
        <li><img src="images/0003.jpg" alt=""></li>
        <li><img src="images/0004.jpg" alt=""></li>
        <li><img src="images/0005.jpg" alt=""></li>
    </ul>
    <div class="barBox">
        <span class="bar lbar"><</span>
        <span class="bar rbar">></span>
    </div>
</div>
<script type="text/javascript">
    window.onload = function(){
        var box = document.querySelector(".box");
        var ulBox = box.children[0];
        var barBox = box.children[1];
        var leftBar = barBox.children[0];
        var rightBar = barBox.children[1];
        console.log(barBox)
        box.onmouseover = function(){
            barBox.style.display = "block";
        }
        box.onmouseout = function(){
            barBox.style.display = "none";
        }
        var target = 0,leader = 0;
        leftBar.onclick = function(){
            target += 520;
        }
        rightBar.onclick = function(){
            target -= 520;
        }
        var timer = setInterval(function(){
            if(target > 0 ) {
                target = 0
            }
            if(target <= -2080 ) {
                    target = -2080
            }
            leader = leader + (target - leader)/10;
            ulBox.style.left = leader + "px";
        }, 10)
    }
</script>
</body>
</html>

三、简单焦点轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单焦点轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .screen{
            width:520px;
            height:200px;
            border:1px solid #ccc;
            margin:100px auto;
            position: relative;
            overflow: hidden;
        }
        ul,ol{
            list-style: none;
        }
        ul{
            width:600%;
            position: absolute;
            left:0;
        }
        ul li{
            float: left;
        }
        img{
            display: block;
        }
        .circle {
            width: 150px;
            height: 25px;
            position: absolute;
            left: 50%;
            bottom:10px;
            margin-left:-75px;
        }
        .circle li {
            width: 25px;
            height: 25px;
            line-height: 25px;
            background-color: rgba(0,0,0,.6);
            border-radius:50%;
            float: left;
            text-align: center;
        }
        .circle li+li {
            margin-left:5px;
        }
        .circle .current {
            background-color: #ff0;
        }
    </style>
</head>
<body>
<div class="screen">
    <ul>
        <li><img src="images/0001.jpg" alt=""></li>
        <li><img src="images/0002.jpg" alt=""></li>
        <li><img src="images/0003.jpg" alt=""></li>
        <li><img src="images/0004.jpg" alt=""></li>
        <li><img src="images/0005.jpg" alt=""></li>
    </ul>
    <ol class="circle">
    </ol>
</div>
<script type="text/javascript">
    window.onload = function(){
//      获取元素
        var screenBox = document.querySelector(".screen");
        var ulBox = screenBox.children[0];
        var olBox = screenBox.children[1];
        var ulLis = ulBox.children;
        var imgWidth = ulLis[0].offsetWidth;
        console.log(ulLis[0].cloneNode(true));
//      因为要做无缝滚动  ，所以要克隆第一张，放到最后一张后面去
        ulBox.appendChild(ulLis[0].cloneNode(true));
//      创建小圆点
        var len = ulLis.length;
        for(var i = 0; i < len -1; i++){
            var li = document.createElement("li");
            li.innerHTML = i + 1;
            olBox.appendChild(li);
        }
        olBox.children[0].className = "current";
        var olLis = olBox.children;
        console.log(olLis);
//      开始动画部分
//      1.鼠标移动到小圆点，当前原点背景改变,轮播图滑动到与当前小雨点索引号对应的图片
        for(var i = 0; i < len-1; i++){
            olLis[i].index = i;
            olLis[i].onmouseover = function(){
                for(var j = 0; j < len-1; j++) {
                    olLis[j].className = "";
                }
                this.className = "current";
                console.log(-this.index * imgWidth)
                animate(ulBox,-this.index * imgWidth)
            }
        }
        var timer = null;
        var num = 0, circle = 0;   //控制播放张数和小圆点动画
        timer = setInterval(autoPlay, 2000);
//      自动播放轮播图函数
        function autoPlay(){
            num++;
            if(num > len-1){
               ulBox.style.left = 0;
               num = 1;
            }
            animate(ulBox,-num*imgWidth);
            circle++;
            if(circle > len-2){
                circle = 0;
            }
            for(var j = 0; j < len-1; j++) {
                olLis[j].className = "";
            }
            olLis[circle].className = "current";
        }
        screenBox.onmouseover = function(){
            clearInterval(timer);
        }
        screenBox.onmouseout = function(){
            timer = setInterval(autoPlay, 2000)
        }


//      轮播图动画函数
        function animate(obj,target){
            clearInterval(obj.timer);
//          设置每次走的步长
            var speed = obj.offsetLeft < target ? 15 : -15;
//          用于标记是否已经走到相应位置了
            obj.timer = setInterval(function() {
                var result = target - obj.offsetLeft;   // 绝对值不会小于15
                obj.style.left = obj.offsetLeft + speed + "px";
                if(Math.abs(result) <= 15){
                    clearInterval(obj.timer);
                    obj.style.left = target + "px";  // 有15像素差距时直接跳转目标位置
                }
            },10)
        }
    }
</script>
</body>
</html>
 

四、旋转木马轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul {
            list-style: none;
        }
        .wrap{
            width:1200px;
            margin:100px auto;
        }
        .slide {
            height: 500px;
            position: relative;
        }
        .slide li {
            position: absolute;
            left: 200px;
            top:0;
        }
        .slide li img{
            width:100%;
        }
        .arrow {
            position: relative;
            opacity: 0;
            z-index:100;
        }
        .prev,.next {
            width:76px;
            height:112px;
            position: absolute;
            top:50%;
            margin-top:-56px;
            background: url(images/prev.png) no-repeat;
            z-index: 99;
        }
        .next {
            right:0;
            background: url(images/next.png) no-repeat;
        }
    </style>
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a class="prev"></a>
            <a class="next"></a>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function(){
//      获取元素
        var wrap = document.querySelector(".wrap"); // 大盒子
        var slideBox = document.querySelector(".slide");
        var ulBox = slideBox.children[0];
        var arrowBox = slideBox.children[1];  // 三角
        var arrows = arrowBox.children;
        var lis = document.querySelectorAll("li");  // 所有要操作的盒子
//      显示三角控制按钮
        wrap.onmouseover = function(){
            animate(arrowBox,{"opacity": 100});
        }
        wrap.onmouseout = function(){
            animate(arrowBox,{"opacity": 0});
        }
        //  存储了每个图片的信息
        var json = [
            {   //  1
                width:400,
                top:20,
                left:50,
                opacity:20,
                z:2
            },
            {  // 2
                width:600,
                top:70,
                left:0,
                opacity:80,
                z:3
            },
            {   // 3
                width:800,
                top:100,
                left:200,
                opacity:100,
                z:4
            },
            {  // 4
                width:600,
                top:70,
                left:600,
                opacity:80,
                z:3
            },
            {   //5
                width:400,
                top:20,
                left:750,
                opacity:20,
                z:2
            }
        ];
        var jieliu = true;
        change();
        for (var k in arrows) {
            arrows[k].onclick = function(){
               if(this.className === "prev") {
                   if(jieliu == true){
                       change(true);
                       jieliu = false;
                   }
               }else{
                   if(jieliu == true){
                       change(false);
                       jieliu = false;
                   }
               }
            }
        }


//      动画函数
        function animate(obj,json,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var flag = true;
                for(var key in json){
//                    json[attr]目标位置,current现在值
                    var current = 0;
                    if(key == "opacity"){
                        current = Math.round(parseInt(getStyle(obj,key)*100)) || 0;
                    }
                    else{
                        current = parseInt(getStyle(obj,key))
                    }
                    var step = (json[key] - current) / 10;
                    step > 0 ? Math.ceil(step) : Math.floor(step);
                    if(key === "opacity") { //  判断用户有没有输入opacity
                        if("opacity" in obj.style){ // 判断 我们浏览器是否支持opacity
                            obj.style.opacity = (current + step)/100;
                        }else {
                            obj.style.filter = "alpha(opacity = "+ (current + step)*10 + ")";
                        }
                    }
                    else if(key === "zIndex") {
                        obj.style.zIndex = json[key];
                    }
                    else {
                        obj.style[key] = current  + step + "px" ;
                    }
                    if(current != json[key]){  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                        flag = false;
                    }
                }
                if(flag) {
                    clearInterval(obj.timer);
                    if(fn) {     //动画就结束了  如果有回调，就应该执行回调
                        fn()
                    }
                }
            },10)
        }


//      获取某个元素的某个属性的函数
        function getStyle(obj,attr) {
            if(obj.currentStyle){  // ie 等
                return obj.currentStyle[attr];
            }
            else{
                return window.getComputedStyle(obj,null)[attr];
            }
        }


//      点击执行动画函数
        function change(flag) {
//            根据flag判断左滑还是右滑
            if(flag) {
                json.unshift(json.pop());
            }
            else{
                json.push(json.shift());
            }
            for(var i = 0, len = json.length; i < len; i++ ) {
                animate(lis[i], {
                    width: json[i].width,
                    top: json[i].top,
                    left: json[i].left,
                    opacity: json[i].opacity,
                    zIndex: json[i].z
                },function(){jieliu = true;})
            }
        }
    }
</script>
</body>
</html>

五、轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .w-slider{
            width:310px;
            height: 265px;
            position: relative;
            margin:100px auto;
            overflow: hidden;
        }
        .slider {
            width:310px;
            height: 220px;
        }
        .slider-main {
            width: 620px;
            height: 220px;
        }
        .slider-main-img{
            width: 310px;
            height: 220px;
            position: absolute;
            left: 0;
            top:0;
        }
        .slider-main-img img {
            width: 100%;
        }
        .slider-ctrl {
            text-align: center;
            padding-top:5px;
        }
        .slider-ctrl-con {
            width: 24px;
            height: 20px;
            display:inline-block;
            background:url(images/icon.png) no-repeat -24px -782px;
            margin: 0 5px;
            cursor: pointer;
            text-indent: -100em;
        }
        .current {
            background-position: -24px -762px;
        }
        .slider-ctrl-prev,
        .slider-ctrl-next {
            position: absolute;
            top: 50%;
            margin-top: -35px;
            background:url(images/icon.png) no-repeat 6px top;
            width: 30px;
            height: 35px;
            opacity: 0.8;
            cursor: pointer;
        }
        .slider-ctrl-prev {
            left: 0;
        }
        .slider-ctrl-next {
            right: 0;
            background-position: -6px -44px;
        }
    </style>
</head>
<body>
<div class="w-slider" id="js_slider">
    <div class="slider">
        <div class="slider-main" id="slider_main_block">
            <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""/></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""/></a></div>
        </div>
    </div>
    <div class="slider-ctrl" id="slider_ctrl">
        <span class="slider-ctrl-prev"></span>
        <span class="slider-ctrl-next"></span>
    </div>
</div>
<script type="text/javascript">
    window.onload = function() {
//        动画函数
        function animate(obj,json,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var flag = true;
                for(var key in json){
                    var current = 0;
                    if(key === "opacity"){
                        current = Math.round(parseInt(getStyle(obj,key)*100)) || 0
                    }
                    else{
                        current = parseInt(getStyle(obj,key))
                    }
                    var step = (json[key] - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if(key === "opacity"){ // 判断用户输入的是否为opacity
                        if("opacity" in obj.style){ // 判断浏览器是否支持opacity属性
                            obj.style.opacity = (current + step) / 100
                        }
                        else{
                            obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";
                        }
                    }
                    else if(key === "zIndex"){
                        obj.style.zIndex = json[key];
                    }
                    else{
                        obj.style[key] = current + step + "px";
                    }
                    if(current != json[key]){
                        flag = false;
                    }
                }
                if(flag){
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }
            },10)
        }
//        获取元素样式函数
        function getStyle(obj,attr) {
            if(obj.currentStyle){  // ie 等
                return obj.currentStyle[attr];
            }
            else{  // w3c 浏览器
                return window.getComputedStyle(obj,null)[attr];
            }
        }
//      获取元素
        function $(id) {
            return document.getElementById(id);
        }


        var js_slider = $("js_slider"); // 大盒子
        var slider_main_block = $("slider_main_block");
        var imgBox = slider_main_block.children;
        var imgWidth = js_slider.clientWidth;
        console.log(imgWidth);
        console.log(imgBox);
        var slider_ctrl = $("slider_ctrl");  // 三角
        var len = imgBox.length;
        console.log(len);
        var prev = slider_ctrl.children[0];
        var next = document.querySelector('.slider-ctrl-next') ;
//      生成小条形按钮
        for (var i = 0; i < len; i++) {
            var span = document.createElement("span");
            span.innerHTML = len - i;
            span.className = "slider-ctrl-con";
            slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
        }
        var spans = slider_ctrl.children;
//        将第一个小条形按钮设置为选中状态
        spans[1].setAttribute("class","slider-ctrl-con current");
//        先将除了第一张外的所有图片都移动到最右边
        for(var i = 1; i < len; i++){
            imgBox[i].style.left = imgWidth + "px";
        }
        var iNow = 0;
        for(var k in spans){ // 三种按钮，前、后、小条形按钮
            spans[k].onclick = function(){
                if(this.className === "slider-ctrl-prev"){
                    animate(imgBox[iNow],{left:imgWidth});
                    --iNow < 0 ? iNow = len - 1 : iNow;
                    imgBox[iNow].style.left = -imgWidth + "px";
                    animate(imgBox[iNow],{left:0});
                    setSquare();
                }
                else if(this.className === "slider-ctrl-next"){
                   autoPlay();
                }
                else{
                    var that = this.innerHTML - 1;
                    if(that > iNow){
                        animate(imgBox[iNow],{left:-imgWidth})
                        imgBox[that].style.left = imgWidth + "px";
                    }
                    else if(that < iNow){
                        animate(imgBox[iNow],{left:imgWidth})
                        imgBox[that].style.left = -imgWidth + "px";
                    }
                    iNow = that;
                    animate(imgBox[iNow],{left:0});
                    setSquare();
                }
            }
        }
        var timer = null;
        timer = setInterval(autoPlay,2000);
        function autoPlay() {
            animate(imgBox[iNow],{left: -imgWidth});
            ++iNow > len -1 ? iNow = 0 : iNow;
            imgBox[iNow].style.left = imgWidth + "px";
            animate(imgBox[iNow],{left: 0});
            setSquare();
        }
        function setSquare(){ // 设置小条形按钮选中样式
            for(var i = 1; i <= len; i++){
                spans[i].className = "slider-ctrl-con";
            }
            spans[iNow+1].setAttribute("class","slider-ctrl-con current");
        }
        slider_main_block.onmouseover = function(){
            clearInterval(timer);
        }
        slider_main_block.onmouseout = function(){
            clearInterval(timer);
            timer = setInterval(autoPlay,2000);
        }
    }
</script>
</body>
</html>


wp1119
关注
专栏目录
Js_demo:源生js轮播图demo
05-18
本示例"Js_demo:源生js轮播图demo"将深入讲解如何利用纯JavaScript（非jQuery或其他库）创建一个基本的轮播图效果。 轮播图是一种常见的网页元素，用于展示一组图片或内容，用户可以通过点击按钮或自动切换来浏览。...
JavaScript代码实现简单的轮播图效果
Web_Struggle的博客
10-05 1729
JavaScript中的轮播图在许多网站中能够经常看到，如淘宝京东首页等。轮播图还是比较简单的，只要理解动画原理以及定时器函数 setTimeout()和clearTimeout() setInterval()和clearInterval() 这四个函数都是属于window对象的。Window是可以省略的。 使用格式： SetTimeout(函数，时间); SetInterva
完全指南：如何使用 Swiper 插件实现强大的轮播效果
阿猫故乡的博客
12-04 9042
使用 Swiper 插件有以下好处：简单易用：Swiper 核心库提供了丰富的 API 供使用者随意配置，同时支持自定义事件和回调函数，使得使用起来非常方便。多种轮播效果：Swiper 支持多种轮播效果，如滑动、淡入淡出等，且易于定制。高性能：Swiper 对于移动端设备做了很好的兼容性处理，通过 CSS3 实现动画，使得页面流畅、响应迅速。支持响应式布局：Swiper 提供了响应式布局解决方案，可以轻松适配不同尺寸设备并保持良好的用户体验。
前端Vue组件化实践：自定义轮播图组件的探索与应用
最新发布
chenchuang0128的博客
07-30 323
轮播图作为前端应用中常见的功能之一，其设计和实现往往涉及到图片展示、动画效果、用户交互等多个方面。在Vue框架中，我们可以通过自定义组件的方式，实现一个功能丰富、可定制的轮播图组件。效果图如下:组件功能概述本文介绍的Vue自定义轮播图组件包括swiper轮播图、dot轮播图指示器以及轮播图条目的点击事件处理。通过传入轮播数组和图片字段，组件能够自动渲染出轮播图效果，并提供用户交互功能。组件实现细节（1）swiper轮播图实现swiper轮播图是实现轮播效果的核心部分。
组件封装 - 轮播图组件
hmxs_hmbb的博客
10-11 2075
轮播图组件封装
JS常用插件 Swiper插件 实现轮播图
christmassss的博客
01-15 2801
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架中文官网地址:点击查看Swiper演示，里面的功能和样式十分丰富，根据自己的需求选择确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码。
使用Vue实现 “轮播图” 组件
司马懿的西山居
05-29 2654
通过使用Vue的特性，我们可以很方便地实现一个轮播图组件。我们利用了生命周期钩子、数据绑定和计算属性等功能，使得轮播图的切换和渲染变得简单而灵活。希望本篇博客能对你理解Vue实现轮播图组件有所帮助！如果你有任何问题或疑问，欢迎提出。
原生js实现旋转木马轮播图效果
12-09
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css">...left:
小程序demo--轮播图2
03-08
轮播图组件（swiper）是小程序内置的基础组件之一，它可以用来展示一系列的图片或者卡片，通过自动切换或者用户手动滑动来浏览。轮播图组件通常用于首页广告位、产品推荐等场景。 二、创建轮播图组件 1. 在小程序的...
JavaScript源生拼图
11-20
JavaScript源生拼图是一款基于JavaScript实现的互动游戏，它允许用户通过移动图片碎片来完成一幅完整的图像，类似于经典的纸质拼图游戏。这个压缩包包含一个`img`文件夹和一个`demo`文件，使得将其集成到任何Web项目...
源生js实现验证码功能
07-21
源生js实现验证码功能，附带源码，可以参考学习，
vue实现轮播图详解
热门推荐
蓑笠翁
10-04 1万+
vue实现轮播图效果，vant使用轮播图效果，实现图片轮播效果详解。
r-swiper2 极致丝滑的 Vue2轮播组件
zywr012345的博客
08-01 1346
-----### r-swiper 含有丝滑模式，禁止滑动块模式，完美解决移动/PC端轮播需求。
轮播图组件—Vue项目中共用全局组件的使用
qq_53985958的博客
06-17 2264
轮播图组件—Vue项目中共用全局组件的使用
一个通用轮播图组件
05-06 170
自定义轮播图插件，显示3个或5个，循环切换，具有3d样式效果，支持自动播放设置时间间隔，支持click事件和change事件，含全部源码方便自由发挥...
js使用swiper实现轮播图
m0_73481765的博客
06-30 1901
至此，使用Swiper实现轮播图的基本步骤已经完成。你可以按照自己的需要修改Swiper选项和CSS样式以达到更好的效果。Swiper是一个流行的轮播图插件，它可以在移动端和PC端使用。以上代码会创建一个Swiper实例，并将其绑定到。是轮播图下方的分页器。选项将轮播图循环播放，是Swiper容器，
【Vue3 组件封装】vue3 轮播图组件封装
一个前端开发者
02-10 5340
项目中会多次使用到轮播图组件，但是轮播图渲染的数据是不一样的。但是轮播图的基本功能都是一样的，比如图片切换，自动播放等等。（1）父传子的方式将数据传给通用轮播图组件。（4）覆盖样式，控制箭头和小圆点的位置。目标: 基于pinia获取轮播图数据。文件中封装接口，用于获取轮播图数据。因此需要封装一个通用的轮播图组件。文件中定义轮播图数据的类型声明。（4）通过开发者工具查看数据。（1）通用轮播图的基本结构。（2）全局注册通用轮播图。（1）父组件传值给轮播图。（3）在广告组件中使用。（3）轮播图的播放逻辑。
轮播图组件的开发与使用
weixin_59875068的博客
07-18 102
1.使用components api方式，使组件和BtterScroll配合。slideWillChange事件：当currentPage改变时即触发。onmounted函数中初始化新建BtterScroll。BtterScroll实现轮播图（slide插件）2.用ref api拿到dom结构。onUnmounted销毁。
源生mysql封装工具类
09-13
在Spring Framework中，有一个非常实用的工具类包org.springframework.util，它提供了许多常用的工具类。然而，这些工具类与源生的MySQL封装工具类并没有直接的关系。如果你需要使用源生的MySQL封装工具类，你可以使用JDBC来连接和操作MySQL数据库。在Java中，JDBC提供了一套API来与数据库进行交互，包括连接数据库、执行SQL语句、处理结果等。你可以使用java.sql包中的类和接口来实现这些功能。对于MySQL数据库，你可以使用com.mysql.jdbc.Driver作为驱动程序来连接数据库。当然，在使用JDBC连接MySQL时，你也可以使用一些第三方的封装工具类，如Apache的DBUtils、MyBatis等，它们提供了更加简洁和方便的方式来操作数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值