分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码。

在线预览   源码下载

实现的代码。

html代码:

<div id="slideBox" class="slideBox">
<div class="hd">
<ul><li></li><li></li><li></li></ul>
</div>
<div class="bd">
<ul>
<li style="background: url(images/banner2_1.jpg) 50% 0px no-repeat;">
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
</li>
<li style="background: url(images/banner4.png) 50% 0px no-repeat;">
<div id="a12"></div>
<div id="a11"></div>
</li>
<li class="banner1">
<a href="http://www.w2bc.com" target="_blank" class="content1">
<div id="a20"></div>
<div class="b2_word">
<var id="a21">为</var><span id="a23"></span><var id="a22">而生</var>
</div>
<div id="a24">AppCan引领企业进入移动管理新时代</div>
</a>
</li>
</ul>
</div>
</div> <script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript">
// 轮播
$(".slideBox").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true,
startFun:function(i,c){
del();
switch(i){
case 0:
$("#a3").addClass('animation3');
$("#a4").addClass('animation4');
$("#a5").addClass('animation5');
break;
case 1:
$("#a11").addClass('animation8');
$("#a12").addClass('animation9'); break;
// case 2:
// $("#a8").addClass('animation6');
// $("#a9").addClass('animation7');
// $("#a10").addClass('animation7');
// break;
case 2: $(".content1 #a20").addClass('animation20');
$(".b2_word #a21").addClass('animation21');
$(".b2_word #a22").addClass('animation21');
$(".b2_word #a23").addClass('animation20');
$(".content1 #a24").addClass('animation22');
break;
default:break;
}
}
});
</script>

via:http://www.w2bc.com/Article/45590

正益无线首页jQuery焦点图的更多相关文章

  1. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  2. 带网上开户表单jQuery焦点图

    带网上开户表单jQuery焦点图是一款适合证券公司的带表单的图片左右滚动切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="ind ...

  3. [转载]hao123军事频道首页JQ焦点图

    适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. *本作品由[站长素材]收集整理,转载请注明出处! 下载地址

  4. 缩略图悬浮效果的jQuery焦点图

    在线演示 本地下载

  5. 支持鼠标拖拽滑动的jQuery焦点图

    在线演示 本地下载

  6. 基于jQuery的轮播焦点图图

    轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...

  7. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  8. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

随机推荐

  1. EasyUI DataGrid Checkbox 多选 获取选中行中的内容

    <table id='grid' class='easyui-datagrid' style='width:950px;height:405px' url='Ajax-index.php?mod ...

  2. C语言下的错误处理的问题

    下面是三种C语言的错误处理,你喜欢哪一种?还是都不喜欢? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 问题: 不充分,而且很容易出错,前 ...

  3. duilib 的IE浏览器控件去边框和去滚动栏的代码

    转载请说明原出处,谢谢~~ 近些天在duilib群里常常有朋友问起,怎么让duilib的IE控件能够去边框.去滚动栏的问题,或者是怎样去控件IE控件的行为.为了避免反复的回答,我就写一篇博文,把处理方 ...

  4. python selenium expected_conditions使用实例

    今天正好虫师问到selenium python binding中support.expected_conditions的用法,顺手总结了一下,希望对大家有所帮助. 场景 Expected Condit ...

  5. SharePoint 2013 创建 Site Collection

    在之前的文章中,通过SharePoint Central Administration 创建了Web Application.在这篇文章中将继续SharePoint 2013之旅——还是以Step B ...

  6. STM8串口初始化寄存器配置

    //库函数配置 UART1_DeInit(); UART1_Init((u32)1000000, UART1_WORDLENGTH_8D, UART1_STOPBITS_1, \ UART1_PARI ...

  7. python .dcm文件读取,并转化为.jpg格式

    .dcm文件是DICOM(Digital Imaging and Communications in Medicine)即医学数字成像和通信中记录医学图像和相关信息的文件,在用于医学图像处理的时候我们 ...

  8. linux杀掉tomcat应用进程。停止tomcat应用

    ps -ef |grep tomcat |grep -v grep |awk '{print $2}' |xrags kill -9

  9. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

  10. [LeetCode] Shortest Word Distance I & II & III

    Shortest Word Distance Given a list of words and two words word1 and word2, return the shortest dist ...