分享一款正益无线首页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. SharePoint利用HttpModule的Init方法实现全局初始化

    接上篇 我们知道,HttpRuntime中会对每一个Request创建一个HttpApplication对象(HttpApplicationFactory从一个HttpApplication池来拿). ...

  2. PostgreSQL基础命令

    1. 查看数字库和表 切换用户postgres su postgres 执行psql进入后台(就像执行mysql进入后台一样) 2. 更新postgres密码 \password 3. 创建数据库用户 ...

  3. js 万恶之源 是否滚动到底部?

    let scrollHandle = (el) => { // 如果已经滚到底部了 if (el.scrollHeight - el.scrollTop === el.clientHeight) ...

  4. MongoDB ReplacaSet & Sharding集群安装 配置 和 非集群情况的安装 配置 -摘自网络

    单台机器做sharding --单机配置集群服务(Sharding) --shard1_1 mongod --install --serviceName MongoDBServerShard1 --s ...

  5. nginx 有关防盗链的设置

    http://blog.csdn.net/longjef/article/details/53284108 关于nginx防盗链的方法网上有很多教程,都可以用,但是我发现很多教程并不完整,所做的防盗链 ...

  6. [LintCode] Find the Connected Component in the Undirected Graph

    Find the Connected Component in the Undirected Graph Find the number connected component in the undi ...

  7. SQL Server 2008 添加登录账户 配置权限

    首先打开数据库,并以windows身份验证模式扥牢固数据库, 然后在左侧的[对象资源管理器中]展开[安全性]节点,鼠标右键点击节点中的[登录名],在弹出的菜单中单击[新建登录名],弹出如图对话框: 然 ...

  8. Vue2 原理解析

    现代主流框架均使用一种数据=>视图的方式,隐藏了繁琐的dom操作,采用了声明式编程(Declarative Programming)替代了过去的类jquery的命令式编程(Imperative ...

  9. pc客户端网页录音和压缩

    web录音的功能,也就是怎么使用 getUserMedia 音频上传 栗子中最后返回的是Blob数据 return new Blob([dataview], { type: type }) 因为对ht ...

  10. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...