用jq实现点击右边内容实现，左边内容切换、自动切换，当鼠标放上右边li上面，左边内容停止切换。

最新推荐文章于 2024-04-16 17:06:03 发布

Seety_ST

最新推荐文章于 2024-04-16 17:06:03 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML JS+JQ 文章标签： html 鼠标代码 class

本文链接：https://blog.youkuaiyun.com/Seety_ST/article/details/49001483

HTML 同时被 2 个专栏收录

14 篇文章

订阅专栏

JS+JQ

8 篇文章

订阅专栏

本文介绍了如何使用jQuery实现点击右侧内容触发左侧内容切换，并在鼠标悬停在右侧li元素上时暂停切换。提供了HTML结构和jQuery实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jq实现点击右边内容实现，左边内容切换、自动切换，当鼠标放上右边li上面，左边内容停止切换。

实现点击右边，切换左边内容

HTML代码：

<div class="item clearfix">
                    <div class="nav-list-content fldi">//左边内容 
                        <ul class="clearfix" id="shenfen_wrap_img">
                            <li  class="cur">
                                <img src="../../../../images/recruit/operate/img-1-395x402.png" />
                            </li>
                            <li >
                                <img src="../../../../images/recruit/operate/img-2-395x402.png" />
                            </li>
                            <li >
                                <img src="../../../../images/recruit/operate/img-3-395x402.png" />
                            </li>
                        </ul>
                    </div>
                    <div class="nav-list fldi" id="shenfen_wrap"> //右边内容
                        <ul>
                            <li class="clearfix cur" >
                                <i class="pro-icon fldi">  <img src="../../../../images/recruit/operate/provide-icon-1.png" /> </i>
                                <div class="txt-con fldi">
                                    <h4 class="pro-title">运营推广</h4>
                                    <p class="txt">
                                        商家现状分析诊断，针对性策略提供商家、商品优化包装、线上线下推广策划、数据分析。
                                    </p>
                                </div>  
                            </li>
                            <li class="clearfix" >
                                <i class="pro-icon fldi">  <img src="../../../../images/recruit/operate/provide-icon-2.png" /> </i>
                                <div class="txt-con fldi">
                                    <h4 class="pro-title">账号托管</h4>
                                    <p class="txt">
                                        商家认证、商家服务创建及上下架管理、商品及订单管理。
                                    </p>
                                </div>  
                            </li>
                            <li class="clearfix" >
                                <i class="pro-icon fldi">  <img src="../../../../images/recruit/operate/provide-icon-3.png" /> </i>
                                <div class="txt-con fldi">
                                    <h4 class="pro-title">专属客服</h4>
                                    <p class="txt">
                                        在线客服实时对接、用户评价管理、咨询数据分析整理。 
                                    </p>
                                </div>  
                            </li>
                        </ul>
                    </div>

                </div>

JQ代码：

<script type="text/javascript">

    // 右侧导航
    var $nav_ele = $('#shenfen_wrap');
    var $nav_ele_li = $('#shenfen_wrap li');

    // 左侧内容
    var $content_ele = $('#shenfen_wrap_img');
    var $content_ele_li = $('#shenfen_wrap_img li');

    // 初始化
    var init =  0 ;

    $nav_ele_li.on('click',function(){
        $nav_ele_li.removeClass('cur');
        $(this).addClass('cur');
        init = $nav_ele_li.index($(this));
        $content_ele_li.removeClass('cur');
        $content_ele_li.eq(init).addClass('cur');
    });

    //自动执行
    function autoExt()
    {
        $nav_ele_li.removeClass('cur');
        $content_ele_li.removeClass('cur');

        if ( init >= $nav_ele_li.length) 
        {
                init = 0 ;
        } 
        init++ ; 

        $nav_ele_li.eq(init-1).addClass('cur');
        $content_ele_li.eq(init-1).addClass('cur');

        autoTime = setTimeout(autoExt, 3000);
    } 

    autoExt();

    $nav_ele.on('mouseover',function(){
            clearTimeout(autoTime);
    });

    $nav_ele.on('mouseout',function(){
            clearTimeout(autoTime);
            autoTime = setTimeout(autoExt, 3000);
    });

</script>