Jquery+css实现图片无缝滚动轮播

系统管理员 2021-01-27 15:32 733阅读 0赞

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷贝，特地写出来，顺便和大家分享一下

最终实现界面如下：

![format_png][]![format_png][]

页面加载时，自动轮播，轮播鼠标悬停在整个banner容器的时候，两边会显示向左，向右按钮，鼠标悬停在中下方索引圆圈的上面，自动跳转到相应的图片。

banner容器里面包含了图片列表img,索引圆圈 num,还有按钮两个btn

<div class="banner">
                <ul class="img">
                    <li><img src="image/1.jpg" alt=""/></li>
                    <li><img src="image/2.jpg" alt="" /></li>
                    <li><img src="image/3.jpg" alt="" /></li>
                    <li><img src="image/4.jpg" alt="" /></li>
                </ul>
                <ul class="num">
                    
                </ul>
                <div class="btn btn_l"><</div>
                <div class="btn btn_r">></div>
      </div>

以下是CSS样式表，直接拷贝，可看到效果，只是没有使用JS实现轮播事件而已，

<style type="text/css">
                *{ padding:0px; margin:0px;list-style:none;}
                .banner { width:500px; height:300px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;}
                .banner .img{width:5000px; position:absolute; left:0px;top:0px;}
                .banner .img img{width:500px; height:300px;}
                .banner .img li{float:left;}
                .banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;}
                .banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;}
                .banner .num li.on {background-color: #ff6a00;}
                .banner .btn {width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px;
                        cursor:pointer;
                        text-align:center;
                        line-height:50px;
                        font-size:40px;
                        color:#fff;
                        font-family:"宋体";
                        display:none;
                    }
                    .banner .btn_l { left:0px;}
                    .banner .btn_r { right:0px;}
                    .banner:hover .btn { display:block;}
                </style>

以下是JS各个事件的调用，使用前别忘记引用jquery文件，我这里引用的是  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
    
                $(document).ready(function () {
    
                    var i = 0;
    
                    var clone = $(".banner .img li").first().clone();//克隆第一张图片
                    $(".banner .img").append(clone);//复制到列表最后
                    var size = $(".banner .img li").size();
                   
    
                    for (var j = 0; j < size-1; j++) {
                        $(".banner .num").append("<li></li>");
                    }
    
                    $(".banner .num li").first().addClass("on");
    
                    /*自动轮播*/
    
                    var t = setInterval(function () { i++; move();},2000);
    
                    /*鼠标悬停事件*/
    
                    $(".banner").hover(function () {
                        clearInterval(t);//鼠标悬停时清除定时器
                    }, function () {
                        t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器
                    });
    
    
    
    
                    /*鼠标滑入原点事件*/
    
                    $(".banner .num li").hover(function () {
    
                        var index = $(this).index();//获取当前索引值
                        i = index;
                        $(".banner .img").stop().animate({ left: -index * 500 }, 500);
                        $(this).addClass("on").siblings().removeClass("on");
                    });
    
    
    
                    /*向左按钮*/
                    $(".banner .btn_l").click(function () {
                        i++;
                        move();
                    })
    
                    
                    /*向右按钮*/
                    $(".banner .btn_r").click(function () {
                        i--;
                        move();
                    })
    
                    /*移动事件*/
                    function move() {
                        if (i == size) {
                            $(".banner .img").css({ left: 0 });
                            i = 1;
                        }
                        if (i == -1) {
                            $(".banner .img").css({ left: -(size - 1) * 500 });
                            i = size - 2;
                        }
                        $(".banner .img").stop().animate({ left: -i * 500 }, 500);
    
                        if (i == size - 1) {
                            $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
                        } else {
                            $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
                        }
                    }
                });
    
    
            </script>

[format_png]: /images/1611761544421.png

发表评论取消回复

表情：

评论列表（有 0 条评论，733人围观）

还没有评论，来说两句吧...

相关阅读

相关无缝轮播/自动轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

爱被打了一巴掌/ 2022年10月27日 00:30/ 0 赞/ 249 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 195 阅读

相关 jQuery实现轮播图的无缝滚动

之前在学习jQuery时，想做一个轮播图的demo，于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo，但是在演示的时候，最后一张到第

╰半夏微凉°/ 2022年08月04日 14:46/ 0 赞/ 279 阅读

相关 js定时器实现图片的无缝轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无缝滚动轮播图</title>

梦里梦外;/ 2022年06月02日 02:38/ 0 赞/ 217 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 239 阅读

相关 MUI实现图片无缝轮播

MUI实现图片无缝轮播引入相关包  <link rel="stylesheet

Love The Way You Lie/ 2022年05月07日 18:58/ 0 赞/ 172 阅读

相关 MUI实现图片无缝轮播

MUI实现图片无缝轮播引入相关包  <link rel="stylesheet

我不是女神ヾ/ 2022年05月07日 04:54/ 0 赞/ 234 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 326 阅读

相关 js计时器实现图片的无缝轮播和简单的图片切换轮播

> 几个注意事项： > ① 给某一标签设置了固定定位后，设置width:100%是以浏览器做参考的。 > ② 给某一元素设置了绝对定位时，且父元素未设置定位，会去找离该

一时失言乱红尘/ 2021年10月23日 13:20/ 0 赞/ 316 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 734 阅读