一个项目中需要用到类似的功能，自己手写一个轮播切换，不足之处见谅。代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .navUl{

            border: 1px solid #ddd;

            overflow: hidden;

        }

        .navUl li{

            list-style: none;

            float: left;

            width: auto;

            height: 30px;

            line-height: 30px;

            padding: 0 10px;

            cursor: pointer;

        }

        .navUl li.activeLi{

            background: rgb(155, 155, 247);

            color: #fff;

        }

    </style>

</head>

<body>

    <ul class="navUl js-navUl">

        <li class="activeLi">tab1</li>

        <li>tab2</li>

        <li>tab3</li>

        <li>tab4</li>

        <li>tab5</li>

    </ul>

    <div>

        <div id="tabCon0">

                tab0内容

        </div>

        <div id="tabCon1" style="display:none">

                tab1内容

        </div>

        <div id="tabCon2" style="display:none">

                tab2内容

        </div>

        <div id="tabCon3" style="display:none">

                tab3内容

        </div>

        <div id="tabCon4" style="display:none">

                tab4内容

        </div>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>

        window.onload=function(){

            var autoTab = setInterval( changeTab,2000);

            $('.js-navUl').hover(

            function () {

                clearInterval(autoTab);

            },

            function () {

                autoTab = setInterval( changeTab,2000);

            });

            var tabIndex=0;

            function changeTab(){

                $(".js-navUl li").eq(tabIndex).addClass("activeLi").siblings().removeClass("activeLi");

                if($("#tabCon"+tabIndex)){

                    $("#tabCon"+tabIndex).show().siblings().hide();

                }

                tabIndex++;

                if(tabIndex==5){

                    tabIndex=0;

                }

            }

            $(".js-navUl li").on("click",function(){

                var ind=$(this).index();

                if($("#tabCon"+ind)){

                    $("#tabCon"+ind).show().siblings().hide();

                }

                if(ind!=4){

                    tabIndex=ind+1;

                }else{

                    tabIndex=0;

                }

                $(this).addClass("activeLi").siblings().removeClass("activeLi");

            });

        }

    </script>

</body>

</html>

样式什么的自己修改即可

自动轮播切换tab的更多相关文章

  1. swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction

    swiper4轮播设置autoplay自动切换后,即默认设置: <script> var mySwiper = new Swiper('.swiper-container', { auto ...

  2. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  3. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  4. es6 面向对象选项卡（自动轮播功能）

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

  5. ViewPager自动轮播

    Android使用ViewPager实现左右循环滑动及轮播效果   ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...

  6. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

  7. 讲解版的自动轮播（新手福利）样式和js就不分离了为了看的方便

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

  8. javascript焦点图左右按钮简单自动轮播

    这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView

    背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App.在安卓.iOS以及Windows(UWP) ...

随机推荐

  1. Luogu P1080 [NOIP2012]国王游戏

    题目 按\(a_i*b_i\)升序排序即可. 证明考虑交换法. 对于排序后相邻的两个人\(i,j(a_ib_i\le a_jb_j)\),设前面的总的积为\(s\),则当前答案为\(\max(\fra ...

  2. Callable+ThreadPoolExecutor实现多线程并发并获得返回值（转）

    出处:https://blog.csdn.net/kity9420/article/details/80740466 前言 经常会遇到一些性能问题,比如调用某个接口,可能要循环调用100次,并且需要拿 ...

  3. 部署SonarQube代码检测服务并结合Jenkins使用

    一.SonarQube部署前的内核参数等配置以及java环境配置 1. 修改内核参数配置,使满足环境要求 [root@sonarqube ~]# vim /etc/sysctl.conf vm.max ...

  4. 关于chrome请求被挂起页面加载缓慢问题的追查

    请参考FEX团队探究结果 http://fex.baidu.com/blog/2015/01/chrome-stalled-problem-resolving-process/ 结论如下: 请求成功构 ...

  5. 通过web.xml监听器启动main方法

    web.xml中添加要启动的类 <listener> <listener-class>server.NettyServer</listener-class> < ...

  6. String转int，int转String

    String转int 1) int i = Integer.parseInt([String]);  int i = Integer.parseInt([String],[int radix]); 2 ...

  7. 错误代码errno值的含义

    错误代码errno值的含义 查看错误代码errno是调试程序的一个重要方法.当C api函数发生异常时,一般会将errno变量(需include errno.h)赋一个整数值,不同的值表示不同的含义, ...

  8. zabbix的简单操作（查看监控，自定义监控和钉钉监控报警）

    zabbix是一种监控软件,我用的是centos7.5版本 一:我已经添加好主机了,接下来就是看看怎么查看监控内容的 1.打开zabbix服务的web网页 2.检测最新数据,要在最新数据中筛选 3.查 ...

  9. java poi 操作

    Java POI 操作Excel(读取/写入) https://www.cnblogs.com/dzpykj/p/8417738.html Java操作Excel之Poi基本操作 https://my ...

  10. WinEdit编辑器中中文乱码

    这个问题困扰了我很久.我的电脑上装的CTEX的最新版本,原来我的系统是windows 7 64位系统.装好了CTEX之后,在里面可以直接输入中文,显示和编译生成的PDF文件都正常.但是后来系统崩溃了一 ...