jQuery实现轮播图效果

最新推荐文章于 2024-09-28 11:04:27 发布
最新推荐文章于 2024-09-28 11:04:27 发布
阅读量2.5k 收藏 29
点赞数 9
文章标签： jquery 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43700362/article/details/103244707
版权

大概思路：

在div里存放ul（li），注意div设置相对定位，ul设置绝对定位，因为ul到了后面需要轮播移动。li需要设置float：left。设置li里的img宽高分别为560px，300px。最后面需要拼接一个假的图0（方便最后图和第一图的转变）。
在div里存放另一个div，左右按钮。通过绝对定位，定位到左右两边合适的距离。
在div里存放另一个div，轮播图下面的小圆点，图片移动的时候，小圆点的颜色也会跟着“移动”。

最初，设置index为0。
当点击右按钮的时候，index++。ul移动的距离为（-560index）。当点击最后图的时候，假0显示完全后，直接回到真0的位置
当点击左按钮的时候，index–。ul移动的距离为（-560index）。当点击第一图的时候，瞬间来到假0的位置（方便来到最后一个图）。index设置为最后一个图的index。

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big  ul li{
        float: left;
        list-style: none;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:20px;
        bottom:15px;
    }
    .circle ul{
        overflow: hidden;
        list-style: none;

    }
    .circle ul li{
        background: white;
        float: left;
        margin-right:10px;
        width:20px;
        height:20px;
        border-radius: 50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>

        <li> <img src="img/0.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<script>
    $('.circleUl li').eq(0).css("background","red");
    var index = 0;

    $(".leftbtn").click(function(){
        index--;
        if(index<0){
//            当图0按左按钮，瞬间来到假0的位置，方便来到最后一个图。
            index = 3;
            $(".move").css("left",-560*4);
        }
        $(".move").animate( {left:-560*index} ,1000);
        $('.circleUl li').eq(index).css("background","red").siblings().css("background","white");;
    });

    $(".rightbtn").click (function() {
        index++;
        $(".move").animate({left:-560*index},1000,function(){
            if(index == 4){
//                当到最后一个图的时候(真的图三)，在按右按钮，假0显示完全后，回到真0的位置
                index = 0;
                $(".move").css("left",0);
            }
        });
        $('.circleUl li').eq(index==4?0:index).css("background","red").siblings().css("background","white");
    });



    $('.circleUl li').click(function(){
        console.log( $(this).index() );
        $('.circleUl li').eq( $(this).index()).css("background","red").siblings().css("background","white");

        var index = $(this).index();
        $('.move').animate({left:index*(-560)},1000);
    })

</script>

</body>
</html>

运行结果：

在这里插入图片描述

相同功能代码封装函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big  ul li{
        float: left;
        list-style: none;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:20px;
        bottom:15px;
    }
    .circle ul{
        overflow: hidden;
        list-style: none;

    }
    .circle ul li{
        background: white;
        float: left;
        margin-right:10px;
        width:20px;
        height:20px;
        border-radius: 50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>

        <li> <img src="img/0.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<script>
    $('.circleUl li').eq(0).css("background","red");
    var index = 0;

    $(".leftbtn").click(function(){
        index--;
        move();
    });

    $(".rightbtn").click (function() {
        index++;
        move();
    });


    function move(){
//        左边按钮部分
        if(index<0){
//            当图0按左按钮，瞬间来到假0的位置，方便来到最后一个图。
            index = 3;
            $(".move").css("left",-560*4);
        }
//        其中，左边按钮部分的ul移动和小圆点变色与右边按钮的ul移动和小圆点变色“合并”了。
//        右边按钮部分
        $(".move").animate({left:-560*index},1000,function(){
            if(index == 4){
//                当到最后一个图的时候(真的图三)，在按右按钮，假0显示完全后，回到真0的位置
                index = 0;
                $(".move").css("left",0);
            }
        });
        $('.circleUl li').eq(index==4?0:index).css("background","red").siblings().css("background","white");

    }



//    小圆点点击事件
    $('.circleUl li').click(function(){
        console.log( $(this).index() ); 
        $(this).css("background","red").siblings().css("background","white");
//被点击的小圆点的index索引值 赋值给index，为了左右按钮里的index值得正确性。
        var index = $(this).index();
        $('.move').animate({left:index*(-560)},1000);
    })

</script>

</body>
</html>
weixin_43700362
关注
jquery实现简单自动轮播图效果
10-15
主要为大家详细介绍了jquery实现简单自动轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Jquery实现轮播图
Qzhou_的博客
08-27 1448
在本文中我们将使用Jquery库来实现一个简单的轮播图效果。
jQuery与JavaScript轮播图实现：原理与技巧
最新发布
weixin_34438187的博客
09-28 1114
本文还有配套的精品资源，点击获取 简介：轮播图是一种网页展示技术，通过自动切换图片或内容，为用户提供动态且节省空间的展示方式。本文深入探讨了使用jQuery和纯JavaScript实现轮播图的方法和原理，包括DOM操作、动画制作、事件监听和逻辑控制。通过案例讲解了如何创建轮播组件、实现动画效果、添加事件监听器，并实现自动播放和循环功能。同时比较了jQuery和纯JavaSc...
jQuery实现轮播图
依古比古的博客
06-16 1171
jQuery实现轮播图 学习了js原生实现轮播图，今天我们尝试用jQuery库来实现，给你不一样的感觉。 上代码！！！ HTML中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
JQuery实现轮播图
weixin_44540343的博客
08-07 331
首先我们先来讲一下思路： 自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对于显示框绝对位置的left值及变化时间实现图片的滑动;使用setInterval()方法设置定时器,达到自动播放效果;无缝连续播放的重点在于,第一张图片与最后一张图片要相同,这样播放完最后一张图片后将大div框的lef...
jquery实现轮播图效果
10-20
总的来说，这个jQuery实现的轮播图效果利用了CSS和JavaScript的结合，通过简单的代码实现了图片的自动切换和用户交互。它展示了如何用jQuery处理DOM操作、动画和事件监听，是学习和理解jQuery应用的一个好例子。
jQuery实现轮播图效果demo
01-19
本文实例为大家分享了jQuery实现轮播图效果的具体代码，供大家参考，具体内容如下 效果展示： 编程思路： 1. 首先是基础的布局，使用”子绝父相”等页面布局方法，将图片、左右按钮以及每张图片下方对应的标识小...
jQuery实现图片切换效果
01-22
本文实例为大家分享了jQuery实现图片切换效果的具体代码，供大家参考，具体内容如下 动画：点击左右按钮实现图片切换 jQuery方法：animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr...
JQuery(1)：使用JQuery实现轮播图效果
偉ing的博客
06-18 1929
JQuery(1)：使用JQuery实现轮播图效果 1.前言 ​ 使用JQuery实现轮播图的效果，我还用原生JS实现了轮播图，效果和功能都是一样，参考文章《JavaScript(3)：使用JS实现轮播图效果》。 ​ 如有侵权下方评论联系作者删除 2.实现功能 ​ (1) 轮播图上有两个按钮，分别位于左侧和右侧，实现跳转到上一张图片和下一张图片的功能。 ​ (2) 图片右下角有三个小圆点，会随着图片的变化而变化，和图片相对应。鼠标放入小圆点，实现图片更换。 ​ (3) 实现自动播放，没隔2000毫秒自动更换
jQuery 实现轮播图
11-11
使用jQuery实现的简单轮播图。。
jquery实现轮播图
02-19
jquery实现轮播图，方便开发轮播图。谢谢大家下载，该插件基于jquery开发，现阶段很多PC网站都需要用到轮播图切换的效果
用jQuery实现轮播图
m0_59302271的博客
03-14 1469
使用jQuery实现简单的轮播图
jQuery 实现轮播图效果
weixin_52378257的博客
10-02 534
jQuery 实现轮播图效果 html部分 <!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
使用jQuery实现轮播图
热门推荐
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值