JQuery实现自动切换+手动切换

最新推荐文章于 2021-06-19 05:54:38 发布

某虾

最新推荐文章于 2021-06-19 05:54:38 发布

阅读量3.7k

点赞数 1

分类专栏： WEB前端文章标签： web前端 JQuery HTML

本文链接：https://blog.csdn.net/dinghusong/article/details/79097082

版权

WEB前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在浏览各网站的时候，经常看到某些网站中，都会一些自动+手动切换内容的效果，或者是焦点图式，或者是选项卡式。今天就给简单的谢了一个用jQuery实现图片自动+手动切换的例子。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery实现自动切换+手动切换</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/qiehuan.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <article class="wrapper">
        <h1>JQuery实现自动切换+手动切换</h1>
        <div class="tab clearfix">
            <ul class="tabMenus">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
            </ul>
            <div class="tabCons">
                <div class="con">1111</div>
                <div class="con">2222</div>
                <div class="con">3333</div>
                <div class="con">4444</div>
            </div>
        </div>
    </article>
</body>
</html>

CSS代码：

*{
    margin:0;
    padding:0;
}
body{
    font-size:12px;
    color:#222;
    font-family:"Microsoft YaHei",SimHei;
    background:#f0f0f0;
}
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    zoom:1;
}
ul,li{
    list-style:none;
}
.wrapper{
    width:800px;
    margin:0 auto;
    padding-bottom:50px;
}
h1{
    height:50px;
    line-height:50px;
    font-size:22px;
    font-weight:normal;
    margin-bottom:20px;
    text-align: center;
}
.tab{
    width: 100%;
}
.tabMenus{
    width: 100px;
    float: left;
}
ul.tabMenus li{
    width: 68px;
    height: 68px;
    margin-bottom: 15px;
    background-color: #737373;
    border: 1px solid #737373;
    color: #fff;
    text-align: center;
}
ul.tabMenus li.on{
    background-color: #ffffff;
    color: #737373;
}
.tabCons{
    width: 400px;
    float: left;
    height: 323px;
    border: 1px solid #737373;
}
.tabCons .con{
    width: 100%;
    height: 100%;
}

JS代码：

$(function(){
    var tabTimer;
    var len = $(".tab .tabCons .con").length;
    var i = 0;

    $(".tab .tabCons .con:gt(0)").hide(); //默认显示第一内容部分
    $(".tab .tabMenus li").eq(0).addClass("on");

    //鼠标滑上选项标签停止自动播放，滑出时开始自动播放
    $(".tab .tabMenus li").hover(function(){
        clearInterval(tabTimer);
    },function(){
        tabTimer = setInterval(function(){
            if( i < len ){
                $(".tab .tabMenus li").eq(i).addClass("on").siblings().removeClass("on");
                $(".tab .tabCons .con").eq(i).show().siblings().hide();
                i++;
            }else{
                i = 0;
            }

        },2000);
    }).trigger("mouseleave");

    //手动切换
    $(".tab .tabMenus li").hover(function(){
        $(this).addClass("on").siblings().removeClass("on"); //标签部分样式切换
        var index = $(this).index();
        $(".tab .tabCons .con").eq(index).show().siblings().hide(); //内容部分切换效果
    });
});

某虾

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JQuery实现自动切换+手动切换

在浏览各网站的时候，经常看到某些网站中，都会一些自动+手动切换内容的效果，或者是焦点图式，或者是选项卡式。今天就给简单的谢了一个用jQuery实现图片自动+手动切换的例子。HTML代码： JQuery实现自动切换+手动切换 JQuery实现自动切换+手动切换
复制链接

扫一扫