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

<!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. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  2. Quartz的job中注入的services接口为空的解决办法

    自己重新定义一个类继承AdaptableJobFactory类 public class JobFactory extends AdaptableJobFactory { @Autowired pri ...

  3. 关于hstack和Svstack

    关于hstack和Svstack import numpy as np>>> a = np.array((1,2,3))>>> aarray([1, 2, 3])& ...

  4. vue-cli常用插件安装教程

    1.安装sass npm i sass-loader node-sass --save-dev 2.安装stylus cnpm install stylus --save-dev cnpm insta ...

  5. css练习小总结

    1.div水平居中:/*设置div宽度后,margin:0 auto:*/2.div显示在一行:/*float:left:*/ 3.text-align:/*后面标签里的内容水平居中:*/4.alig ...

  6. vue项目进行时，script标签中，methods事件中函数使用的async/await

    用 async/await 来处理异步 await关键字只能放到async函数里面,通过await得到就是Promise返回的内容:当然也能通过then()去获取,若通过then()获取了则就无Pro ...

  7. bignumber.js是一款用于任意精度十进制和非十进制算术的JavaScript库

    安装 npm install bignumber.js 引入 import { BigNumber } from 'bignumber.js' 实例方法 加法:plus 0.1 + 0.2 // 0. ...

  8. lua基础（2）

    错误处理: local function add(a,b) assert(type(a) == "number", "a 不是一个数字") assert(typ ...

  9. Vim安装插件支持 MarkDown 语法、实时预览等

    使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...

  10. 跨域 （3） window.name

    window对象有一个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window ...