当前位置：首页 > 资讯 > 技术文档

jQuery右侧选项卡焦点图片轮播特效代码分享

时间：2022-10-16 00:40 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery右侧选项卡焦点图片轮播特效代码分享

本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码。分享给大家供大家参考。具体如下： jQuery实现的右侧选项卡焦点图片轮播动画特效源码，是一段清新可爱的焦点图轮播代码，支持自动轮播与手动点击。运行效果图： ----------------------[url=http://demo.jb51.net/js/2014/jQuery-jdt-lbdh/]查看效果[/url]-[url=http://www.1sucai.cn/jiaoben/244245.html]源码下载[/url]---------------------- [img]http://files.jb51.net/file_images/article/201509/201595174554704.jpg?20158517467[/img] 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery右侧选项卡焦点图片轮播代码</title>
</head>
<body>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 var oFocus=$('#focus'),
 oRight=oFocus.find('.right'),
 oLeft=oFocus.find('.left'),
 aRLi=oRight.find('li'),
 aLLi=oLeft.find('li'),
 index=0,
 timer = null;
 aRLi.click(function(){
 index=$(this).index()
 $(this).addClass('active').siblings().removeClass();
 aLLi.eq(index).addClass('active').siblings().removeClass();
 aLLi.eq(index).stop().animate({'opacity':1},300).siblings().stop().animate({'opacity':0},300);
 stopFoucs();
 })
 oLeft.mouseenter(function(){
 stopFoucs();
 }).mouseleave(function(){ 
 startFocus();
 });
 timer = setInterval(function(){
 startFocus();
 },5000);
 function startFocus(){
 index++;
 index = index > aRLi.size()-1 ? 0 :index;

 aLLi.eq(index).addClass('active').siblings().removeClass();
 aLLi.eq(index).stop().animate({'opacity':1},300).siblings().stop().animate({'opacity':0},300);
 aRLi.eq(index).addClass('active').siblings().removeClass();
 }
 function stopFoucs(){
 clearInterval(timer);
 }
})
</script>

<div class="focus" id="focus">
 <div class="left">
 <ul>
 <li class="active" style="opacity:1; filter:alpha(opacity=100);"><p>图一</p><img src="images/1.jpg"/></li>
 <li><p>图二</p><img src="images/2.jpg"/></li>
 <li><p>图三</p><img src="images/3.jpg"/></li>
 <li><p>图四</p><img src="images/4.jpg"/></li>
 </ul>
 </div>
 <div class="right">
 <ul>
 <li class="active"><i class="i1"></i>图一</li>
 <li><i class="i2"></i>图二</li>
 <li><i class="i3"></i>图三</li>
 <li><i class="i4"></i>图四</li>
 </ul>
 </div>
</div> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.1sucai.cn/" target="_blank">编程素材网</a></p>
</div>
</body>
</html>

更多精彩内容大家还可以参考[url=http://www.1sucai.cn/Special/315.htm]《jQuery焦点图特效汇总》[/url]进行学习，希望大家喜欢。以上就是为大家分享的jQuery右侧选项卡焦点图片轮播代码，希望大家可以喜欢。

全部评论(0)

上一篇：JQuery学习总结【二】
下一篇：jQuery焦点图轮播特效代码分享（3款）

资讯排行榜
更多>>