分享一款正益无线首页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. 如果没有 Android 世界会是什么样子?

    2005年谷歌从安迪·鲁宾(Andy Rubin)手中收购Android系统,起初安迪·鲁宾(Andy Rubin)只是想为数码相机开发出一个更为先进的系统,所以有了 Android.但是智能手机行业 ...

  2. 【Spring】SpringMVC之基于注解的实现SpringMVC+MySQL

    目录结构: contents structure [-] SprinigMVC是什么 SpringMVC工作原理 @Controller和@RequestMapping注解 @Controller注解 ...

  3. macOS SIP 权限设置

    1.macOS SIP 权限设置 对于 macOS 10.11+ 用户,由于系统启用了 SIP(System Integrity Protection), 导致 root 用户也没有权限修改 /usr ...

  4. Tomcat7并发和线程数

    最近一直在解决线上一个问题,表现是: Tomcat每到凌晨会有一个高峰,峰值的并发达到了3000以上,最后的结果是Tomcat线程池满了,日志看很多请求超过了1s. 服务器性能很好,Tomcat版本是 ...

  5. android studio 如何让包名展开

    通常我们新建一个包名的时候,会发现他们连在一起,根本无法在创建一个同级的包 工具/原料   电脑,android studio 方法/步骤     1,我们先在包名下建一个包,变成了这样,根本无法在同 ...

  6. Jedis工具类(含分布式锁的调用和释放)

    个人把工具类分为两部分: 一.连接池部分 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import redis.clients.j ...

  7. ES6--变量的声明及解构赋值

    ​ ES6的目标是使得JavaScript语言能够用来编写大型的复杂的应用程序.成为企业级开发语言:该标准已于2015年6月17日正式公布. 可是真正的普及我觉得还得须要一段时间.然而这并非理由让我们 ...

  8. 目标检测 的标注数据 .xml 转为 tfrecord 的格式用于 TensorFlow 训练

    将目标检测 的标注数据 .xml 转为 tfrecord 的格式用于 TensorFlow 训练. import xml.etree.ElementTree as ET import numpy as ...

  9. js json转url参数

    var json = { sh: '上海' } var params = Object.keys(json).map(function (key) { // body... return encode ...

  10. 香蕉派 banana pi BPI-M3 八核开源硬件开发板

     Banana PI BPI-M3 是一款8核高性能单板计算机,Banana PI BPI-M3是一款比树莓派 2 B更强悍的8核Android 5.1产品. Banana PI BPI-M3 兼 ...