jQuery实现轮播图的总结

最新推荐文章于 2022-09-03 10:39:40 发布
最新推荐文章于 2022-09-03 10:39:40 发布
阅读量854 收藏 2
点赞数 1
分类专栏： js案例 文章标签： jquery
@By-蓝猫
本文链接：https://blog.csdn.net/qq_43355930/article/details/104923472
版权

目录

jQ实现轮播

思路:

jQ思路:

关于轮播图加快点击bug问题

源码记录

jQ实现轮播

思路:

1.轮播图在网页内运用的非常常见。今天我就来总结一下jQ轮播图。

轮播图案列思路

 2.我们通常将img套在ul li中,放在一个大的div中，并放在页面的固定位置。我们可以加大ul的宽度，并让li浮动起来（如果你是上下移动，就加大ul的高度），我们让ul移动，带着li移动，而不是只让li移动。

3.当ul超出div的部分，我们就隐藏，那么问题来了，我们赢该怎样隐藏超出div的部分呢？哈哈！！相信聪明的你一定想起来怎样隐藏了， 对！！！ 就是在div中设置他的overflow:hidden   。

4.这样我们就是基本的思路了。至于轮播图的两耳和下方的1 2 3 4·····，这个不难吧!!

jQ思路:

前面已经说了，要用ul带动li的方式来实现移动，那么我们当然要先获取ul了， 通过父相子绝的定位方式，调节子元素的left值，来完成轮播图。

用定时器setInterval（）自动的该变图片的left（或top）,的值 。 那么问题又来了。当移动到最后一张咋办？直接到达第一张图？NO!!!!  NO!!  NO!!!!  ,那样真的太难看了。我们要在最后一个图片下面设置一个猫腻图，把第一张图片在复制一个放下最后一张的下面，当轮播到猫腻图，我们就瞬移到最前面，这样我们就能“欺骗”大众的眼睛。

   $(function () {
            var obtn = $('.nav ol li');
            var oul = $('.nav ul');
            var oli = oul.find('li');
            var flag =false;//这个暂时没有
            /*当前显示图片的*/
            var iNow = 0;//设置图片的初始是第一个图片
            console.log(obtn.size());//打印现在图片的总个数
            //注册当点击下面序号的事件

            obtn.click(function () {
                iNow = $(this).index();
                tab();
            });

            //启用定时器
            var timer =null;
            timer = setInterval(function () {
                iNow++;
                tab()
            },2000);
            //注册鼠标移入事件
            $('.nav').mouseenter(function () {
                clearInterval(timer);
                $(".nav-l").css("display","block");
                $(".nav-r").css("display","block");
            });
            //注册鼠标移出事件
            $(".nav").mouseleave(function () {
                $(".nav-l").css("display","none");
                $(".nav-r").css("display","none");
                timer = setInterval(function () {

                    iNow++;

                    tab()
                },2000);
            });
              //注册右耳的点击事件
            $('.nav-r').click(function () {
                // iNow++;
                // tab()
                //改变信号量

                iNow++;
                obtn.attr("class",'').eq(iNow).attr("class",'active');
                if(iNow==obtn.size()) {
                    obtn.eq(0).attr('class', 'active');
                }
                if(iNow>obtn.size()){
                    //让其展示第一张图片
                    iNow =0;
                }
                    flag =true;
               oul.stop(true,true).animate({
                   //该对象描述的是动画的目标值
                   left: -520 *iNow

               },500,function () {
                    //动画执行完毕执行
                   if(iNow == obtn.size()){
                       flag=false;
                       oul.css("left",0);
                       iNow=0;

                   }
                });


            });


            //注册左侧的点击事件
            $('.nav-l').click(function () {
                // iNow--;
                // obtn.attr("class",'').eq(iNow).attr("class",'active');
                // if(iNow==obtn.size()){
                //     obtn.eq(0).attr('class','active');
                // }
                // oul.animate({
                //     left:-520*iNow
                // },500,function () {
                //     //判断是否是最后一张图片
                //     if(iNow<=0){
                //         iNow = obtn.size();
                //         oul.css("left",-520*iNow);
                //     }
                // });
                iNow--;
                obtn.attr("class",'').eq(iNow).attr("class",'active');
                 if(iNow==obtn.size()) {
                     obtn.eq(0).attr('class', 'active');
                 }
                if(iNow<0){
                    oul.css('left',-520*obtn.size());
                    //改变信号量
                    iNow = obtn.size()-1;
                }
                oul.stop(true,true).animate({
                    left:-520*iNow
                },500);
            });
            //设置自动滚动的函数，增加复用性
            function tab() {
                //让序号跟着移动
                obtn.attr("class",'').eq(iNow).attr("class",'active');
                if(iNow==obtn.size()){
                    obtn.eq(0).attr('class','active');
                }
                oul.animate({
                    left:-520*iNow
                },500,function () {
                    //判断是否是最后一张图片
                    if(iNow==obtn.size()){
                        iNow = 0;
                        oul.css("left",0);
                    }
                });
            }
        });

关于轮播图加快点击bug问题

我的解决办法是在动画的animate（）前加上一个stop（true，true）来防止由于加快点击出现的bug。

 

源码记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQ轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            position: relative;
            width: 520px;
            height: 280px;
            margin: 100px auto;
            /*border: 1px solid red;*/
            overflow: hidden;
        }
        .nav ul{
            position: absolute;
            top: 0;
            left: 0;
            width: 9999px;
            height: 280px;
        }
        .nav li{
            float: left;
            list-style: none;
        }
        .nav li img{
            width: 520px;
            height: 280px;

        }
        .nav-l{
            position: absolute;
            display: none;
            top: 50%;
            left: 0;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,.2);
            z-index: 1;
            cursor: pointer;
            text-align: center;
        }
        .nav-r{
            position: absolute;
            display: none;
            top: 50%;
            right: 0;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,.2);
            z-index: 1;
            cursor: pointer;
            text-align: center;

        }
        .nav ol{
            position: absolute;
            bottom: 5px;
            right: 5px;

        }
        .nav ol li{
            float: left;
            width: 20px;
            text-align: center;
            margin-right: 7px;
            display: inline;;
            cursor: pointer;
            background-color: #fcf2cf;
            border: 1px solid #f47500;
        }
        .active{
            /*padding: 3px 8px;*/
            font-weight: bold; color: #0080db;
            background-color: #0080db;
            position: relative;
            bottom: 2px;
            color: red;
        }
    </style>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            var obtn = $('.nav ol li');
            var oul = $('.nav ul');
            var oli = oul.find('li');
            var flag =false;
            /*当前显示图片的*/
            var iNow = 0;
            console.log(obtn.size());

            obtn.click(function () {
                iNow = $(this).index();
                tab();
            });

            //启用定时器
            var timer =null;
            timer = setInterval(function () {
                iNow++;
                tab()
            },2000);
            //注册鼠标移入事件
            $('.nav').mouseenter(function () {
                clearInterval(timer);
                $(".nav-l").css("display","block");
                $(".nav-r").css("display","block");
            });
            //注册鼠标移出事件
            $(".nav").mouseleave(function () {
                $(".nav-l").css("display","none");
                $(".nav-r").css("display","none");
                timer = setInterval(function () {

                    iNow++;

                    tab()
                },2000);
            });

            $('.nav-r').click(function () {
                // iNow++;
                // tab()
                //改变信号量

                iNow++;
                obtn.attr("class",'').eq(iNow).attr("class",'active');
                if(iNow==obtn.size()) {
                    obtn.eq(0).attr('class', 'active');
                }
                if(iNow>obtn.size()){
                    //让其展示第一张图片
                    iNow =0;
                }
                    flag =true;
               oul.stop(true,true).animate({
                   //该对象描述的是动画的目标值
                   left: -520 *iNow

               },500,function () {
                    //动画执行完毕执行
                   if(iNow == obtn.size()){
                       flag=false;
                       oul.css("left",0);
                       iNow=0;

                   }
                });


            });



            $('.nav-l').click(function () {
                // iNow--;
                // obtn.attr("class",'').eq(iNow).attr("class",'active');
                // if(iNow==obtn.size()){
                //     obtn.eq(0).attr('class','active');
                // }
                // oul.animate({
                //     left:-520*iNow
                // },500,function () {
                //     //判断是否是最后一张图片
                //     if(iNow<=0){
                //         iNow = obtn.size();
                //         oul.css("left",-520*iNow);
                //     }
                // });
                iNow--;
                obtn.attr("class",'').eq(iNow).attr("class",'active');
                 if(iNow==obtn.size()) {
                     obtn.eq(0).attr('class', 'active');
                 }
                if(iNow<0){
                    oul.css('left',-520*obtn.size());
                    //改变信号量
                    iNow = obtn.size()-1;
                }
                oul.stop(true,true).animate({
                    left:-520*iNow
                },500);
            });
            function tab() {
                obtn.attr("class",'').eq(iNow).attr("class",'active');
                if(iNow==obtn.size()){
                    obtn.eq(0).attr('class','active');
                }
                oul.animate({
                    left:-520*iNow
                },500,function () {
                    //判断是否是最后一张图片
                    if(iNow==obtn.size()){
                        iNow = 0;
                        oul.css("left",0);
                    }
                });
            }
        });
    </script>


</head>
<body>
    <div class="nav" >
        <div class="nav-l" id="nav-l"><</div>
        <div class="nav-r" id="nav-r">></div>
        <ul>
            <li><img src="images/nav1.jpg" alt=""></li>
            <li><img src="images/nav2.jpg" alt=""></li>
            <li><img src="images/nav3.jpg" alt=""></li>
            <li><img src="images/nav4.jpg" alt=""></li>
            <li><img src="images/nav5.jpg" alt=""></li>
            <li><img src="images/nav1.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>

 

ps:可能某些地方还有小bug，以后有时间再看看吧，毕竟比较忙

安静宅男爱蓝猫
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery实现无缝轮播与左右点击效果
12-29
在网页中我们想要的无缝轮播左右循环有好多好多中，这是我第一个轮播效果，也是最基础的，和大家分享一下，对于初学者希望你们能有所借鉴，对于大神我想让你们尽情的虐我给我宝贵的意见。 这个是我要的效果 进入正题，首先是布局，布局的原理就是在DIV中创建ul标签，ul中插入li标签，在里插入图片，你想要几个图片轮播，插入几个li。布局上主要的点在于div设置大小，加上overflow：hidden；让超出部分隐藏，ul的长度是所有图片的总长度，li浮动。 html代码
轮播图总结
04-04
整理swiper轮播图整理swiper轮播图整理swiper轮播图整理swiper轮播图
jQuery文字轮播特效
10-20
本文给大家分享的是jQuery制作文字轮播的特效，非常的实用，属于作者原创代码，分享给大家
基于jquery实现轮播特效
11-23
轮播是学习jquery开始的第二个实现的动效，也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题，请教过很多人，也多次问过度娘。今天，也不敢果敢的说，可以马上写好一个轮播。         希望是通过随笔的方式，记录下一些思维过程。 　　首先是html结构，一个简单的轮播，单张图片无缝轮播，主要分为三大层：div>ul>li，li里面的img图片。 　　其次，css样式：div固定住宽高，overflow：hidden；ul的宽度建议是动态获取（下一步会讲是怎么获取）；关于li我习惯使用浮动，让他们依次排列，在ul上要记得清楚浮动（clear：both）。 　　重要的是jque
jQuery轮播图带浮动焦点详细
01-26
jQuery轮播图带浮动焦点详细
轮播图案例总结
建筑队学徒的博客
05-29 1146
轮播图案例总结 学习了JavaScript基础相关的内容之后，做了一个小的轮播图案例，做一下总结 案例说明： 点击左右箭头，右下角小圆点，可以切换图片 点击图片跳转链接 图片切换时，小圆点的颜色跟着变化，且当前图片显示高亮 图片进入页面自动切换，且鼠标放上去图片停止切换，鼠标移开继续播放 左侧菜单栏划鼠标过时出现各自对应的子菜单 下面是总结 整体框架设计技巧 对于轮播图的背景图，可以将每一个图片单独设置在一个块里，并附上连接。这样方便JS的操作。 整体框架由大到小，由主到次的编写，可以都使用di
轮播图学习总结之一(有源码)
Sys_菜菜
06-07 1492
最近在做一个自己练手的项目时，用到了轮播图，然后自己憋了一个小时，写成了向右滑动的动画效果，于是上网看了一下教程，因为教程也讲了其他东西，所以一直没有快进，花了一个小时，下来自己直接写花了三个小时。下面看一下初步成果吧。 实现功能与介绍 实现功能： 图片定时切换 小圆点随图片切换，样式改变；可通过点击小圆点控制显示第几张图 左右切换按钮在鼠标移入图片区域之后显示，可通过点击按钮控制显示上一张或者下一张图 实现介绍 肯定说的不是很好，但是还是要尽量总结一下： 肯定是先有一个大盒子，给盒子设置宽高，然后
jQuery实现轮播图的思路、代码及知识点！
xue_smail的博客
04-25 5274
jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。的确啊，用jQ写轮播图比js写轮播图代码量少了许多呢！ 一、轮播图实现思路： 1、自动轮播： （1）使所有的图片...
HTML-CSS-JS轮播图综合实践总结
qq_41176706的博客
09-28 1839
今天刚写了一个轮播图的综合实践...来总结一下咯 HTML代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;6-2&lt;/title&gt; &lt;link rel="styles
jQuery三张图片层叠轮播
01-17
使用jQuery三张图片层叠轮播
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
10-23
主要介绍了jQuery实现的Tab滑动选项卡及图片切换效果小结,实例总结了几种常见的tab切换效果,包括鼠标点击切换、滑过切换、定时自动切换等,非常具有实用价值,需要的朋友可以参考下
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
12-11
其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另一方面，也是对自己的学习的一种总结。 这里我想到了两种方法，给大家分享一下。 好了不多说，下面看代码： 第一种，是常规的方法： ...
jQuery实现鼠标经过图片预览大图效果
01-21
这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的：当鼠标经过了图片数，图片会放大进行预览大图。接下来我就粘贴主要代码了哈：首先是$(function(){})中的代码 代码如下: var x = 5; v
教你一步步用jQyery实现轮播器
08-31
相信大家应该都会看到在各大网站上都有一个轮播器的效果，于是自己不禁也想做一个，查了资料，看了轮播器的原理，慢慢的试着做了做，最终效果勉勉强强，但还是想总结出来，或许对有需要的朋友们带来一定的帮助，下面...
js和jQuery设置Opacity半透明 兼容IE6
10-22
对于每一个网站前端开发人员，常常都会遇到设置div透明度的需求，比如在实现图片幻灯片切换效果经常就需要使图片淡入淡出。本文分别对原生js和jQuery在IE和其它浏览器中设置透明度的方法和相关注意事项进行总结。
jQuery实现轮播图(一)
热门推荐
梵海
07-24 2万+
轮播概念图 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简单：设置一个div(box),给其相对定位并且overflow:hidden超出box的范围隐藏，里面包含一个ul，给其绝对定位，ul里面有多个li(li里面存放着轮播的图片，给li左浮动实现左右轮播效果)。每隔一段时间让ul向左移动一个li的width距离，这样图片就一张一张
HTML中轮播大图的浮动,jQuery实现大图轮播
weixin_42510888的博客
07-20 327
css样式：*{margin: 0;padding: 0;}ul{list-style:none;}.slideShow{width: 620px;height: 700px; /*其实就是图片的高度*/border: 1px #eeeeee solid;margin: 100px auto;position: relative;overflow: hidden; /*此处需要将溢出框架的图片部分...
用jQuery实现轮播图——超简单(代码解释)
weixin_48466991的博客
09-03 1万+
鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动。这里只要把图片地址更换一下 ，引用jquery文件就可以了。// 控制图片显示隐藏,小圆点背景色。/* 5张图片叠加到一块 *//* 左右箭头 */
jquery实现轮播图三张图片
最新发布
05-27
以下是一个简单的 jQuery 轮播图实现示例，其中包含三张图片： HTML 代码： ```html <button class="prev">Prev <button class="next">Next ``` CSS 代码： ```css .slider { position: relative...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值