jQuery轮播图(详细注释)

最新推荐文章于 2024-03-14 19:48:19 发布

南沨.

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量1.8k

点赞数 1

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/m0_62816172/article/details/122027854

版权

js渣渣也能简单做出

在理想情况下用吧外层div的class名起为banner ul li的布局

下面是css代码放图片的li记得浮动；

.banner {
  width: 15rem;
  height: 5.22rem;
  position: relative;
  overflow: hidden;
}
.banner ul {
  width: 60rem;
  height: 5.22rem;
  position: absolute;
}
.banner ul li {
  float: left;
  width: 15rem;
  height: 5.22rem;
}
.banner img {
  width: 15rem;
  height: 5.22rem;
}

这里是HTML代码 img标签里直接放自己想轮播的图片

a标签是轮播图左右按钮这里引用的是阿里icon font图标库的图标

 <div class="banner">
        <ul>

            <li><img src="./img/01.webp"></li>
            <li><img src="./img/02.webp"></li>
            <li><img src="./img/03.webp"></li>
            <li><img src="./img/04.webp"></li>
            <li><img src="./img/05.webp"></li>
        </ul>
        <div class="num">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a href="javascript:" class="prev"><i class="iconfont icon-lunbozuofangun"></i></a>
        <a href="javascript:" class="next"><i class="iconfont icon-lunboyoufangun"></i></a>
    </div>

最重要的来了jQuery代码

   $(function () {
            var timer = null;
            //创建一个变量获取li宽度 
            var liw = $('.banner ul li:first').innerWidth();
            // 定时器名字叫time
            timer = setInterval(function () {
                play()
            }, 2000)

            //这里是吧轮播效果封装为了一个函数叫paly 方便后面调用
            function play() {
                    //每2000毫秒把外层div的视口往左拉当前li的宽度
                $('.banner ul').animate({ left: -liw }, function () {
                       // 把最后一张图片追加到前面 无缝轮播
                    $(this).css("left", 0).find("li:first").appendTo(this);
                })
            }

            //当鼠标划过清除定时器  暂停  这里用到的是jq里的hover事件
            $(".banner").hover(function () {
                clearInterval(timer);
                //移出继续
            }, function () {
                timer = setInterval(function () {
                   play()
                }, 2000)
            })
            //点击右箭头事件 这里的.next就是前面的字体图标
               //点击时候调用play（）函数
            $('.next').click(function(){
                play()
            })
           //点击左箭头事件 这里的.prev就是前面的字体图标
            $('.prev').click(function(){
                $('.banner ul').css('left', -liw ).find("li:last").prependTo('.banner ul')
                $('.banner ul').animate({ left:0});
                
              
            })
        })