澳门新葡萄京官网注册jQuery右侧选项卡焦点图片轮播特效代码分享,jquery特效代码

这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行隐藏与显示,是一段超酷的焦点图轮播代码。

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

本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码。分享给大家供大家参考。具体如下:
澳门新葡萄京官网注册,jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击。
运行效果图:———————-查看效果-源码下载———————-

澳门新葡萄京官网注册 1

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
 为大家分享的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.bkjia.com/" target="_blank">帮客之家</a></p>
</div>
</body>
</html>

以上就是为大家分享的jQuery右侧选项卡焦点图片轮播代码,希望大家可以喜欢。

本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码。分享给大家供大家参考…

为大家分享的jQuery左侧大图右侧小图焦点图幻灯切换代码如下

源码下载

headmeta "Content-Type" content="text/html; charset=utf-8" /titlejQuery左侧大图右侧小图切换代码 /titlelink rel="stylesheet" type="text/css" href="css/index.css" media="all"script type="text/javascript" src="js/jquery.min.js"/scriptscript type="text/javascript" src="js/script.js"/script/headbodybrdiv  div  div  img src="images/sample_banner1.jpg" alt="澳门新葡萄京官网注册 2" / div  a href="#" Close Me!/a div  h4脚本之家 small脚本之家发布时间/small p脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。/p /div /div /div div  ul li a href="images/sample_banner1.jpg"img src="images/sample_banner1_thumb.jpg" alt="Image Name" //a div  h4脚本之家二号图片/h4 small脚本之家发布时间/small p脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。/p /div /li li a href="images/sample_banner2.jpg"img src="images/sample_banner2_thumb.jpg" alt="Image Name" //a div  h4 脚本之家三号图片/h4 small脚本之家发布时间/small p脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。/p /div /li li a href="images/sample_banner3.jpg"img src="images/sample_banner3_thumb.jpg" alt="Image Name" //a div  h4 脚本之家四号图片/h4 small脚本之家发布时间/small p脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。/p /div /li li a href="images/sample_banner4.jpg"img src="images/sample_banner4_thumb.jpg" alt="Image Name" //a div  h4 脚本之家五号图片/h4 small脚本之家发布时间/small p脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。/p /div /li /ul /div /div/div/body/html

运行效果图:

以上就是为大家分享的一款带右侧缩略图选项卡的jQuery图片切换特效代码,希望大家可以喜欢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注