轮播图

最新推荐文章于 2023-04-01 13:12:47 发布
最新推荐文章于 2023-04-01 13:12:47 发布
阅读量143 收藏 2
点赞数
分类专栏： 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouyy919/article/details/80417738
版权

使用JQuery实现轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style lang="">
        /*滑动轮播*/
        
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .window,
        .window2 {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
            text-align: center;
            margin: 0 auto;
        }
        
        .window>.pic {
            width: 1520px;
            position: absolute;
        }
        
        .window>.pic>li {
            float: left;
        }
        
        .pic img {
            width: 500px;
            height: 300px;
        }
        
        .btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.5);
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            color: white;
            font-family: '微软雅黑';
            font-size: 20px;
            margin-top: 140px;
            top: -20px;
            cursor: pointer;
        }
        
        .btn-prev {
            left: 10px;
        }
        
        .btn-next {
            right: 10px;
        }
        
        /* 计数 */
        .indexCt {
            display: inline-block;
        }
        
        .pageIndex {
            position: relative;
            top: 240px;
        }
        
        .pageIndex>li {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: white;
            float: left;
            margin: 0 6px;
            cursor: pointer;
        }
        
        .pageIndex>.active {
            background-color: gray;
        }
        /*渐变轮播*/
        .window2>.pic {
            position: absolute;
        }
        
        .window2>.pic>li {
            position: absolute;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="window">
        <ul class="pic">
            <li>
                <a href="javascript:;"><img src="http://upload-images.jianshu.io/upload_images/3360875-5625658440cb542d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="http://upload-images.jianshu.io/upload_images/3360875-b70e9d81d26e2a27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="http://upload-images.jianshu.io/upload_images/3360875-dc724649454c2ddc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="http://upload-images.jianshu.io/upload_images/3360875-d2148a1bb7ea9d21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></a>
            </li>
        </ul>
        <a href="javascript:;" class="btn btn-prev"><</a>
        <a href="javascript:;" class="btn btn-next">></a>
        <div class="indexCt">
            <ul class="pageIndex clearfix">
            </ul>
        </div>
    </div>
    <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'>
    </script>
    <script>
        function Carousel($node) {
            this.$pic = $node.find('.pic')
            this.$picWidth = this.$pic.children().width()
            this.picLength = this.$pic.children().length
            this.$btnPrev = $node.find('.btn-prev')
            this.$btnNext = $node.find('.btn-next')
            this.$pageIndex = $node.find('.pageIndex')
            this.mark = 0
            this.lock = false

            this.init()
            this.bind()
            this.autoPlay()
        }


        Carousel.prototype = {
            init: function() {
                var $picFirst = this.$pic.children().eq(0).clone(),
                    $picLast = this.$pic.children().eq(this.picLength - 1).clone()

                this.$pic.prepend($picLast)
                this.$pic.append($picFirst)
                this.$pic.width(this.$picWidth * this.$pic.children().length)
                this.$pic.css({
                    'left': -this.$picWidth
                })
                console.log(this.picLength)
                for (var i = 0; i < this.picLength; i++) {
                    var $li = $('<li></li>')
                    this.$pageIndex.append($li)
                }

                this.$pageIndex.children().eq(0).addClass('active')
            },
            // 播放下一张
            playNext: function() {
                var _this = this
                if (this.lock) {
                    return
                } else {
                    this.lock = true
                    this.$pic.animate({
                        'left': '-=' + this.$picWidth
                    }, function() {
                        _this.mark++
                            if (_this.mark === _this.picLength) {
                                _this.$pic.css('left', -_this.$picWidth)
                                _this.mark = 0
                            }
                        _this.lock = false
                        _this.showBullet()
                    })
                }
            },
            // 播放上一张
            playPrev: function() {
                var _this = this
                if (this.lock) {
                    return
                } else {
                    this.lock = true
                    this.$pic.animate({
                        'left': '+=' + this.$picWidth
                    }, function() {
                        _this.mark--
                            if (_this.mark < 0) {
                                _this.$pic.css('left', -(_this.picLength * _this.$picWidth))
                                _this.mark = _this.picLength - 1
                            }
                        _this.lock = false
                        _this.showBullet()
                    })
                }
            },
            /* 展示选中状态 */
            showBullet: function() {
                this.$pageIndex.children().removeClass('active')
                this.$pageIndex.children().eq(this.mark).addClass('active')

            },
            /* 增加事件处理 */
            bind: function() {
                var _this = this

                this.$btnNext.on('click', function() {
                    _this.playNext()
                })

                this.$btnPrev.on('click', function() {
                    _this.playPrev()
                })

                this.$pageIndex.on('click', 'li', function() {
                    _this.mark = _this.$pageIndex.children().index($(this))
                    _this.showBullet()
                    _this.$pic.animate({
                        'left': -(_this.mark + 1) * _this.$picWidth
                    })
                })
            },
            /* 自动播放 */
            autoPlay: function() {
                var _this = this
                setInterval(function() {
                    _this.playNext()
                }, 3000)
            }
        }

        new Carousel($('.window'))
    </script>
</body>

</html>


使用vue实现轮播图

<!DOCTYPE html>
<html>
<head>
    <title>vue实现轮播图</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .clearfix {
        content: '';
        clear: both;
        display: block;
    }
    .carousel {
        width: 500px;
        height: 300px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }
    .slide {
        width: 500px;
        height: 300px;
    }
    li {
        position: absolute;
    }
    img {
        width: 500px;
        height: 300px;
    }
    /*切换图片按钮*/
    .bullet {
        width: 100%;
        position: absolute;
        bottom: 10px;
        margin: 0 auto;
        text-align: center;
        z-index: 10;
    }
    span {
        width: 20px;
        height: 5px;
        border: 1px solid;
        background: white;
        display: inline-block;
        margin-right: 10px;
    }

    .active {
        background: red;
    }
    .image-enter-active {
        transform: translateX(0);
        transition: all 1s ease;
    }
    .image-leave-active {
        transform: translateX(-100%);
        transition: all 1s ease;
    }
    .image-enter {
        transform: translateX(100%);
    }
    .image-leave {
        transform: translateX(0);
    }
    </style>
</head>
<body>
<div class="carousel">
    <transition-group tag="ul" class="clearfix slide" name="image">
        <li v-for='(image,index) in img' :key='index' v-show="index === mark">
            <a><img :src="image"></a>
        </li>
    </transition-group>
    <div class="bullet">
        <span v-for="(item,index) in img.length" :class="{'active':index === mark}" @click='change(index)'></span>
    </div>
</div>

<script src='https://unpkg.com/vue'></script>
<script type="text/javascript">
new Vue({
    el: '.carousel',
    data: {
        mark: 0,
        timer: null,
        img: ['http://upload-images.jianshu.io/upload_images/3360875-5625658440cb542d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
            'http://upload-images.jianshu.io/upload_images/3360875-b70e9d81d26e2a27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
            'http://upload-images.jianshu.io/upload_images/3360875-dc724649454c2ddc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
            'http://upload-images.jianshu.io/upload_images/3360875-d2148a1bb7ea9d21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240']
    },
    created() {
        this.play();
    },
    methods: {
        change(i) {
            this.mark = i;
        },
        autoPlay() {
            this.mark++;
            if(this.mark === 4) {
                this.mark = 0;
                return;
            }
        },
        play() {
            setInterval(this.autoPlay, 3000)
        }
    }
});
</script>

</body>
</html>

Zhouy2_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轮播图实现
sinat_33940108的博客
06-11 185
步骤 定义轮播图数组 测试接口 将接口获取到的数据赋值给轮播图数组。 渲染到界面上。 进行图片大小调试。 index.wxml <view class="pyg_index"> <!-- 轮播图 开始 --> <view class="index_swiper"> <swiper autoplay indicator-dots circular> <!-- 1. swiper标签存在默认的宽度和高度 100%
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
纯div+css轮播图片切换图片
11-07
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
图片切换，轮播图
03-17
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
css轮播图片百叶窗切换
12-29
在网页设计中，动态效果的使用可以极大地提升用户体验，其中轮播图（Slider）是一种常见的展示方式，它能够以优雅的方式展示多张图片或内容。而“百叶窗”切换效果则是轮播图动画中的一种独特设计，它模拟了百叶窗...
IOS轮播图合集（视频+图片）
02-16
在iOS开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或视频，常用于广告、推荐内容或者展示多种产品。本资源“IOS轮播图合集（视频+图片）”显然是一个包含了实现这种功能代码示例的...
轮播图大全
06-13
实用的轮播图demo，里面有各种各样的布局样式，可以设置广告语，也可以隐藏，一键集成，简单实用。
轮播图源代码
06-17
用JavaScript做的轮播图，最新的思路，比较适合小白观看
html轮播图
08-26
这是我在学习web前端制作中，自己用jQuery封装的插件，所用图片来源于网络，仅供志同道合的朋友一起学习。
图片轮播,javascript
10-10
图片轮播，一个通过点击按钮实现，一个通过定时器实现，代码比较简单
轮播图·实现
m0_70217633的博客
04-01 1005
https://pan.baidu.com/s/1d0_o5I81CrVJ12kfa52gjw
轮播图图片切换背景根据图片颜色渐变怎么弄
最新发布
07-22
要实现轮播图图片切换背景根据图片颜色渐变的效果，可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码： HTML部分： ```html <div class="slideshow"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分： ```css .slideshow { position: relative; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slideshow img { width: 100%; height: auto; } .slideshow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: -1; } ``` JavaScript部分： ```javascript const slides = document.querySelectorAll('.slide'); let currentIndex = 0; function changeSlide() { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); } setInterval(changeSlide, 3000); ``` 上述代码中，通过CSS设置了轮播图容器的样式以及背景渐变效果。JavaScript部分实现了切换轮播图的逻辑，并使用setInterval函数定时调用changeSlide函数来切换图片。每次切换图片时，会为当前显示的图片添加active类，从而使其显示出来。 你可以根据实际需要修改CSS样式和JavaScript代码，来适应你的项目需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值