jQuery 如何实现轮播图

最新推荐文章于 2024-03-14 19:48:19 发布
最新推荐文章于 2024-03-14 19:48:19 发布
阅读量4.1k 收藏 42
点赞数 7
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qi_JC/article/details/111500731
版权

如何用 jQuery 实现轮播图

直接点击 对应的链接看对应具体代码
注释很详细了，就不做赘述了

一定一定不要忘记加入 jQuery

顶部

html代码
css代码
js代码

方便你们复制，直接来一个全部的

全部在一起的代码

html代码

回到顶部查看其他代码

<div class="div">
        <ul class="ul">
            <li><a href=""><img src="./jQuery_轮播/img/01.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_轮播/img/02.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_轮播/img/03.jpg" alt=""></a></li>
        </ul>
        
        <!-- 设置点击原点，切换相应的图片 -->
        <ul class="ul_2">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>


        <!-- 设置下一张上一张 -->
        <button class="back"><</button>
        <button class="next">></button>

    </div>

回到顶部查看其他代码

css代码

回到顶部查看其他代码

*{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        /* 图片样式 */
        /* 注：将所有图片先隐藏，第一个图片显示 */
        img{
            width: 350px;
        }
        .ul >li{
            position: absolute;
            display: none;
        }
        .ul :first-child{
            display: block;
        }

        /* 小圆点样式 */
        .ul_2{
            position: absolute;
            margin-left: 114px;
            bottom: 30px;
        }
        .ul_2 >li{
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, 0.6);
            float: left;
            margin-right: 30px;
        }
        .ul_2 >.active{
            background: rgba(255, 0, 0, 0.6);
        }
        .div{
            position: relative;
            height: 622px;
            width: 350px;
        }


        /* 下一张，上一张效果 */
        .back{
            position: absolute;
            width: 25px;
            height: 25px;
            left: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }
        .next{
            position: absolute;
            width: 25px;
            height: 25px;
            right: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }

回到顶部查看其他代码

JavaScript代码

回到顶部查看其他代码

//设置一个下标 
        var index=0;
        

        //封装轮播的函数
        function move(){
            //让下标每次增加
            index+=1;

            //判断，因为图片只有三张，所以下标大于2时，让其再等于0
            //拓展，当图片数不确定时，就是 下标大于等于长度 时，让 index 等于0
            if( $( ".ul >li" ).length <= index ){
                index=0
            }

            //利用动画效果，让一个图片显示，其他隐藏
            $( ".ul li" ).eq( index ).show( 1000 ).siblings().hide( 1000 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
            // console.log( index )

            
        }


        //利用计时器达到轮播效果
        var x=setInterval( move,3000 )


        //鼠标移入 ul 时，停止轮播，也就是清除计时器
        //鼠标移出 ul 时，继续轮播，重新加入计时器
        //使用 jQuery 中的 hover
        $( ".ul" ).hover( function(){
            clearInterval( x )
        },function(){
            //这里必须写 x=上面的计时器 
            //单独写的话计时器都会执行，轮播会加速
            x=setInterval( move,3000 )
        } )
        

        //设置点击方块/圆点，切换相应的图片
        //设置点击事件 或者 进入事件，随机而动
        $( ".ul_2 li" ).on( "click",function(){
            //设置下标等于点击时候的下标
            index=$( this ).index();
            console.log( index )

            //根据点击时候的下标，显示对应的图片，其他图片隐藏
            $( ".ul >li" ).eq( index ).show( 500 ).siblings().hide( 500 );
            //点击的小方块，添加样式，其他删除
            $( this ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因为点击方块不属于装图片的 ul，所以需要再加一下
        $( ".ul_2 li" ).hover( function(){
            clearInterval( x )
        },function(){
            //这里必须写 x=上面的计时器 
            //单独写的话计时器都会执行，轮播会加速
            x=setInterval( move,3000 )
        } )
        //返回上面，给 move 方法中对应的 点击方块 设置样式
        

        //设置上一张下一张的效果
        // 下一张，直接调用
        $( ".next" ).on( "click",function(){
            move();
        } )

        //上一张
        $( ".back" ).on( "click",function(){
            //点一次，下标减一
            index--;

            //第一种、当 下标 小于0时，让下标等于0，也就是第一张图
            // if( index < 0 ){
            //     index=0
            // }

            //第二种、当 下标 小于0时，让下标再等于最后一个图对应的下标，也就是跳转到最后一个图
            if( index < 0 ){
                //下标等于 图片个数减一，即 length-1
                index=$( ".ul li" ).length-1
            }
            console.log( index );

            
            //同上
            $( ".ul li" ).eq( index ).show( 500 ).siblings().hide( 500 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因为上一个，下一个不属于装图片的 ul，所以需要再加一下停止循环
        $( "button" ).hover( function(){
            clearInterval( x )
        },function(){
            //这里必须写 x=上面的计时器 
            //单独写的话计时器都会执行，轮播会加速
            //重要的事情说三遍
            x=setInterval( move,3000 )
        } )

回到顶部查看其他代码

全部代码

回到顶部查看其他代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.5.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        /* 图片样式 */
        /* 注：将所有图片先隐藏，第一个图片显示 */
        img{
            width: 350px;
        }
        .ul >li{
            position: absolute;
            display: none;
        }
        .ul :first-child{
            display: block;
        }

        /* 小圆点样式 */
        .ul_2{
            position: absolute;
            margin-left: 114px;
            bottom: 30px;
        }
        .ul_2 >li{
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, 0.6);
            float: left;
            margin-right: 30px;
        }
        .ul_2 >.active{
            background: rgba(255, 0, 0, 0.6);
        }
        .div{
            position: relative;
            height: 622px;
            width: 350px;
        }


        /* 下一张，上一张效果 */
        .back{
            position: absolute;
            width: 25px;
            height: 25px;
            left: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }
        .next{
            position: absolute;
            width: 25px;
            height: 25px;
            right: 0;
            top: 45%;
            background: rgba(255, 255, 255, 0.6);
            color: rgba(255, 0, 0, 0.6);
        }
    </style>
</head>
<body>
    <div class="div">
        <ul class="ul">
            <li><a href=""><img src="./jQuery_轮播/img/01.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_轮播/img/02.jpg" alt=""></a></li>
            <li><a href=""><img src="./jQuery_轮播/img/03.jpg" alt=""></a></li>
        </ul>
        
        <!-- 设置点击原点，切换相应的图片 -->
        <ul class="ul_2">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>


        <!-- 设置下一张上一张 -->
        <button class="back"><</button>
        <button class="next">></button>

    </div>
    

    <script>
        //设置一个下标 
        var index=0;
        

        //封装轮播的函数
        function move(){
            //让下标每次增加
            index+=1;

            //判断，因为图片只有三张，所以下标大于2时，让其再等于0
            //拓展，当图片数不确定时，就是 下标大于等于长度 时，让 index 等于0
            if( $( ".ul >li" ).length <= index ){
                index=0
            }

            //利用动画效果，让一个图片显示，其他隐藏
            $( ".ul li" ).eq( index ).show( 1000 ).siblings().hide( 1000 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
            // console.log( index )

            
        }


        //利用计时器达到轮播效果
        var x=setInterval( move,3000 )


        //鼠标移入 ul 时，停止轮播，也就是清除计时器
        //鼠标移出 ul 时，继续轮播，重新加入计时器
        //使用 jQuery 中的 hover
        $( ".ul" ).hover( function(){
            clearInterval( x )
        },function(){
            //这里必须写 x=上面的计时器 
            //单独写的话计时器都会执行，轮播会加速
            x=setInterval( move,3000 )
        } )
        

        //设置点击方块/圆点，切换相应的图片
        //设置点击事件 或者 进入事件，随机而动
        $( ".ul_2 li" ).on( "click",function(){
            //设置下标等于点击时候的下标
            index=$( this ).index();
            console.log( index )

            //根据点击时候的下标，显示对应的图片，其他图片隐藏
            $( ".ul >li" ).eq( index ).show( 500 ).siblings().hide( 500 );
            //点击的小方块，添加样式，其他删除
            $( this ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因为点击方块不属于装图片的 ul，所以需要再加一下
        $( ".ul_2 li" ).hover( function(){
            clearInterval( x )
        },function(){
            //这里必须写 x=上面的计时器 
            //单独写的话计时器都会执行，轮播会加速
            x=setInterval( move,3000 )
        } )
        //返回上面，给 move 方法中对应的 点击方块 设置样式
        

        //设置上一张下一张的效果
        // 下一张，直接调用
        $( ".next" ).on( "click",function(){
            move();
        } )

        //上一张
        $( ".back" ).on( "click",function(){
            //点一次，下标减一
            index--;

            //第一种、当 下标 小于0时，让下标等于0，也就是第一张图
            // if( index < 0 ){
            //     index=0
            // }

            //第二种、当 下标 小于0时，让下标再等于最后一个图对应的下标，也就是跳转到最后一个图
            if( index < 0 ){
                //下标等于 图片个数减一，即 length-1
                index=$( ".ul li" ).length-1
            }
            console.log( index );

            
            //同上
            $( ".ul li" ).eq( index ).show( 500 ).siblings().hide( 500 )
            $( ".ul_2 >li" ).eq( index ).addClass( "active" ).siblings().removeClass( "active" )
        } )


        //因为上一个，下一个不属于装图片的 ul，所以需要再加一下停止循环
        $( "button" ).hover( function(){
            clearInterval( x )
        },function(){
            //这里必须写 x=上面的计时器 
            //单独写的话计时器都会执行，轮播会加速
            //重要的事情说三遍
            x=setInterval( move,3000 )
        } )
    </script>
</body>
</html>

回到顶部查看其他代码

简化就是 封装一些重复的
好啦eveyone,今天的就结束啦，下期再见，拜拜

雲上琅琅
关注
  • 7
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
使用jQuery实现轮播图
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
JQuery实现轮播图
闲时不练功，忙时一场空
10-10 874
index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"> ...
jquery实现轮播图
qq_40707650的博客
10-13 3644
今天来讲一讲jquery如何实现轮播图 首先，什么是轮播图，给个图片一看即知 这个就是轮播图，实现图片的自动播放，并且点击小圆点是也可以切换图片。 首先来讲一讲它的原理：HTML静态页面就不用我说了吧，这里直接给出代 index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
jQuery实现轮播图
qq_58460470的博客
11-21 4046
jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法 实现广告图片的轮播展示效果
轮播图
qq_41188719的博客
11-29 260
$(function(){     //获取Ul     var ul = $('.all ul');     var li = $(".all ol li");     //获取所有的ul li     var ili = $(".all ul li");     //获取ul的宽度     var liwidth = $(".all ul li").eq(0).width();
基于JQuery实现的轮播图
EarlEcho
08-18 706
HTML代码<div class="carousel-figure clearfix"> <div class="carsoul-box clearfix"> <a class="ig" href="#"><img src="image/carsoul1.png"/></a> <a class="ig" href="#"><img src="image/6.p
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
JQuery实现轮播图完整源码
09-13
【jQuery实现轮播图完整源码】是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或者用户手动操作来实现循环播放。在网页设计中，轮播图是提高用户体验、节省空间并吸引用户注意力的有效工具。这个...
jquery实现轮播图特效
11-20
本文实例为大家分享了jquery实现轮播图的具体代码，供大家参考，具体内容如下 一、实现功能： 1、通过定时实现图片自我轮播 2、当图片轮播到最后一张时，会从第一张开始继续轮播 3、点击小圈圈图标能自动切换到对应...
jQuery 实现轮播图
11-11
使用jQuery实现的简单轮播图。。
用jQuery实现轮播图
最新发布
m0_59302271的博客
03-14 1226
使用jQuery实现简单的轮播图
jQuery实现轮播图片
有点儿文绉绉的小赖的博客
07-26 1505
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图片&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery-1.8.3.js"&a
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值