您的位置:首页 > Web前端 > HTML

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

2015-10-09 16:05 639 查看

用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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html 鼠标 代码 class