jq轮播图（淡入淡出）

最新推荐文章于 2024-04-19 18:24:22 发布
最新推荐文章于 2024-04-19 18:24:22 发布
阅读量430 收藏 2
点赞数
分类专栏： jQuery 文章标签： jq 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39454316/article/details/101387260
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #viewBox{
            position: relative;
            width: 1226px;
            height: 460px;
            margin: 50px auto;
        }
        ul{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        ul li{
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0;
        }
        img{
            width: 1226px;
            height: 460px;
        }
        #pre,
        #next{
            position: absolute;
            width: 41px;
            height: 69px;
            background-image: url("img/icon-slides.png");
            background-repeat: no-repeat;
            color: #fff;
            top: 50%;
            font-size: 20px;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }
        #pre{
            left: 0;
            background-position: -84px 50%;
        }
        #pre:hover{
            background-position: 0 50%;
        }
        #next{
            right: 0;
            background-position: -125px 50%;
        }
        #next:hover{
            background-position: -42px 50%;
        }
        #dot{
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
        #dot span{
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #7d7d7d;
            margin-left: 10px;
            border:2px solid rgba(0,0,0,.4);
        }
        #dot span.active{
            background-color: #e1e1e1;
        }
    </style>
</head>
<body>

<div id="viewBox">
    <ul>
        <li style="display: block"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32cadfb485a10bdcae1f7c20cbee52ba.jpg?w=2452&h=920" alt=""/></li>
        <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/30e16d3039339544df124e1f093b2e07.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
        <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ac6bc74d8ad846e759471ffce1f53202.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
        <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1b1d3d2a8e50d6445d471322b70d3aea.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
        <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f8d27f0498561818146b7ef78392f33.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
    </ul>
    <p id="dot"> <span class="active"></span><span></span><span></span><span></span><span></span> </p>
    <span id="pre"> </span>
    <span id="next"> </span>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    var index=0;
    var timer;
    /*-----------下一页---------*/
    $("#next").click(function(){
        $("ul li").eq(index).fadeOut(600);
        index++;
        if(index>=$("ul li").length){index=0}
        $("ul li").eq(index).fadeIn(600);
        $("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");
    });

    /*-----------上一页---------*/
    $("#pre").click(function(){
        $("ul li").eq(index).fadeOut(600);
        index--;
        if(index<0){index=$("ul li").length-1}
        $("ul li").eq(index).fadeIn(600);
        $("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");
    });

    /*-----------定时轮播---------*/
    timer=setInterval(function (){
        $("ul li").eq(index).fadeOut(600);
        index++;
        if(index>=$("ul li").length){index=0}
        $("ul li").eq(index).fadeIn(600);
        $("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");

    },3000);

    /*---------移入停止定时器---------*/
    $("#viewBox").hover(function(){
        clearInterval(timer);
    },function(){
        timer=setInterval(function (){
            $("ul li").eq(index).fadeOut(600);
            index++;
            if(index>=$("ul li").length){index=0}
            $("ul li").eq(index).fadeIn(600);
            $("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");

        },3000);
    })


    /*-----------鼠标滑过改变banner-------------------*/
    $("#dot span").mouseover(function () {
        index=$(this).index();
        $("ul li").fadeOut(600);
        $("ul li").eq(index).fadeIn(600);
        $(this).addClass("active").siblings("span").removeClass("active");

    })
</script>
</body>
</html>

效果图

dream worker
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现图片轮播（淡入淡出效果）
Linustw的博客
07-29 2147
实现思路：用一个容器把图片都放进去，容器的overflow为hidden，设一个定时器，每间隔一段时间就将其中一张图片的display设为block，其他的都为none。
js图片轮播（淡入淡出）
ICY___的博客
01-21 1425
关于图片轮播，有太多的方法去实现，不同的样式，用的主要思想也不同，但不管怎么说，图片轮播离不开计时器。 关于要注意的，要解释的，我都备注好了，说的可能不是很标准，但我尽量说的通俗，欢迎留言讨论，只要我看到的，都会回复的。 &lt;!-- 核心思想：利用层级关系 计时器和css3动画来实现这个功能完善的图片轮播案例 --&gt; &lt;!-- 基本覆盖了轮播的所有功能 --&gt; ...
jQuery实现淡入淡出效果轮播图
zsl15039718107的博客
12-05 434
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>淡入淡出轮播图</title> <style> ul{ list-style: none; } img{ width:100%; height:500px...
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
最新发布
VIP129370的博客
04-19 338
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片，切换到第 6 张后从头开始切换，在图片的下方显示 6 个小圆点，一一对应 6 张图片，图片切换时，图片对应的小圆点的颜色同时发生变化。使用 setInterval() 方法每隔 2 秒执行一次图片切换操作 在图片切换的函数中，根据索引值找到当前需要切换的图片，然后使用 fadeIn() 方法淡入，同时找到当前图片的兄弟节点，然后使用 fadeOut() 方法淡出。在 HTML 页面中，添加 6 个。
使用jQuery实现淡入淡出轮播图（含完整源码）
lzy_55的博客
09-04 697
使用jQuery实现这个效果其实很简单，先看效果：话不多说，直接上代码！
jquery淡入淡出轮播图
08-31
用jquery封装的通用轮播图插件！兼容各种jquery版本！不受HTML布局影响！
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
02-27
代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一...
jq大图淡入淡出特效.zip
07-04
【jq大图淡入淡出特效】是一种使用jQuery库实现的网页动态效果，它主要用于展示一组图片，通过淡入淡出的方式实现图片的平滑切换，为网站添加一种优雅的视觉体验。这种特效常见于网站的首页或者产品展示区域，能够...
淡入淡出图片轮播特效
08-18
淡入淡出图片轮播特效是一种常见的网页设计技术，它为网站添加了动态视觉效果，增强了用户体验。这种特效使得多张图片能够按照预设的时间间隔依次出现，通过逐渐淡化的方式过渡，让整个过程平滑而自然。在网页设计中...
京东商城轮播图切换淡入淡出效果jq实现
10-24
在本文中，我们将深入探讨如何使用jQuery库来实现京东商城风格的轮播图切换效果，这种效果具有平滑的淡入淡出动画。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及动画效果的创建，使得开发人员...
基于jQuery实现淡入淡出效果轮播图
10-21
主要为大家详细介绍了基于jQuery淡入淡出效果轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery 实现淡入淡出图片轮播效果
热门推荐
u013993319的博客
07-13 1万+
1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）<body> <div class="out "> <ul class="img "> <li> <a href="# "> <img src="image/1.jpg " alt=" ">
html图片淡入淡出轮播图,基于jQuery实现淡入淡出效果轮播图
weixin_34377744的博客
06-08 321
用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用ul替换了之前用的div。html结构如下：<>css设置：*{margin: 0;padding: 0;text-decoration: none;}ul{list-style: none;}#container{position: r...
jquery下的淡入淡出轮播图
weixin_45747619的博客
07-18 132
jQuery代码 $(function(){ var index=0; var num=$("#carousel img").length; $("#carousel img").css("display","none"); $("#carousel img").eq(index).css("display","inline"); $("#carousel .gt").click(f...
jq写轮播图_淡入淡出
li3196672779的博客
06-12 393
> --------------------------------------------------------------------------------------------------------------------------------------------
自己写的淡入淡出轮播图基本实现(jq)
sqfbeijing的专栏
09-17 2015
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { padding: 0; margin: 0; } .lunboBlock {
jq简单的淡入淡出图片切换
sikey的专栏
11-21 2246
无标题文档 body,ul,li{ margin:0; padding:0;} .divbox{ width: 1000px; margin:0 auto; position: relative;} .div_a{ width: 510px;border:1px solid #eee; margin:0 auto; position: relative; height: 500px;
Jq实现淡入淡出轮播图效果
qq_43581857的博客
12-10 498
如题所述，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style>
jQuery实现淡入淡出轮播图带左右按钮及下方小圆点
02-08 360
2017新年，我的第一个工作日，对于jQuery掌握不成熟的我写了一个轮播图，鼓励我在新的一年加油工作，掌握新的知识。 轮播图有自动播放功能，左右按钮切换图片，还有下方小圆点也可点击切换图片。 代码写的不够成熟，请各位看官指出不足，共同进步(*^__^*)。 html代码 1 <body> 2 <div class="carousel"...
vue轮播图淡入淡出效果
12-08
以下是一个使用Vue实现淡入淡出效果的轮播图例子： ```html template> <div class="slider"> <transition-group name="fade" tag="div"> <div :key="currentIndex"> <img :src="images[currentIndex]" alt=""> </div> </transition-group> </div> </template> <script> export default { data() { return { currentIndex: 0, images: [ 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/238/200/300', 'https://picsum.photos/id/239/200/300' ] } }, mounted() { setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.images.length }, 2000) } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 在这个例子中，我们使用了Vue的`<transition-group>`组件来实现淡入淡出效果。`<transition-group>`组件会在子元素发生变化时自动应用过渡效果。我们将要轮播的图片放在一个`<div>`元素中，并将其绑定到`<transition-group>`组件上。在CSS中，我们定义了`.fade-enter-active`和`.fade-leave-active`类来设置过渡效果，同时使用`.fade-enter`和`.fade-leave-to`类来设置元素的初始和结束状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值