淘宝无缝滚动轮播图jQuery，京东无缝滚动轮播图jQuery

最新推荐文章于 2023-03-30 22:06:06 发布

luoyu6

最新推荐文章于 2023-03-30 22:06:06 发布

阅读量1.1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/luoyu6/article/details/82534939

版权

这篇博客介绍了如何使用jQuery实现类似淘宝和京东首页的无缝滚动轮播图，提供了源码链接，并指出即使点击速度很快，也不会出现空白情况。代码包括HTML、CSS和JavaScript部分，详细展示了轮播图的实现细节。

摘要由CSDN通过智能技术生成

前面我有篇笔记是小米淡入淡出轮播图的，现在顺手附上淘宝首页的无缝滚动轮播图，这是源码地址 https://github.com/luoyu6/slideshow_taobao

暂时没有效果图，劳烦大家去下载源码自己看一下了，这个轮播图细节处理的还是比较好的，点击很快的时候，也不会出现空白的情况

代码在这里：

<!DOCTYPE HTML>
<html>

   <head>
       <title>淘宝网轮播图</title>
       <meta charset="utf-8">
       <meta name="Author" content="luoyu">
       <style type='text/css'>
           * {
               margin: 0;
               padding: 0;
           }

           #banner {
               width: 520px;
               height: 280px;
               margin: 20px auto;
               border: 1px solid red;
               position: relative;
           }

           #banner .pic {
               width: 100%;
               height: 100%;
               overflow: hidden;
           }

           li {
               list-style: none;
           }

           #banner .pic ul {
               width: 1000%;
               overflow: hidden;
               margin-left: -520px;
           }

           #banner .pic ul li {
               float: left;
           }

           #banner .tab {
               width: 70px;
               height: 14px;
               background: #fff;
               background: rgba(255, 255, 255, 0.5);
               position: absolute;
               left: 50%;
               margin-left: -35px;