分享一款正益无线首页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. win7系统部分软件显示乱码怎么办

    用了Win7以后,发现有的中文软件打开后,在界面上出现很多文字乱码,之前这个软件在XP上用过,一直都是中文的,怎么到Win7上,就显示乱码了. 到网上一查,发现很多网友都有同样问题,经过一番查找,找到 ...

  2. Haproxy TCP数据转发

    在实际项目中需要用到haproxy做TCP转发,下面主要针对haproxy的安装及TCP数据转发配置进行说明 一.安装Haproxy (1)编译安装Haproxy mkdir -p /data01/h ...

  3. SQLServer2008 全文检索摘记

    最近在做全文搜索的内容,google了一下全文检索,发现了一些问题,现在总结如下: 全文索引和查询概念(摘自SQL 联机帮助)SQL Server 2008 为应用程序和用户提供了对 SQL Serv ...

  4. Android 自定义可拖拽View,界面渲染刷新后不会自动回到起始位置

    以自定义ImageView为例: /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class FloatingImageVi ...

  5. html5+php实现文件拖动上传功能

    界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...

  6. Mysql命令行改动字段类型

    在做微信公众平台 知识百科(账号:zhishiwiki) 时,由于字段先前设计的不合理.导致内容装不下,因此须要改动其字段类型为 text 这里使用到了 alter 命令 alter table 表名 ...

  7. Spring Boot启动过程及回调接口汇总

    Spring Boot启动过程及回调接口汇总 链接: https://www.itcodemonkey.com/article/1431.html 来自:chanjarster (Daniel Qia ...

  8. Python Tensorflow CNN 识别验证码

    Python+Tensorflow的CNN技术快速识别验证码 文章来源于: https://www.jianshu.com/p/26ff7b9075a1 验证码处理的流程是:验证码分析和处理—— te ...

  9. 转:jQuery插件之Wookmark:流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案

    谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js: 1.<script src="/js/jqu ...

  10. office2010激活 错误代码0X8007000D,KMS激活0x8007000D错误解决办法,亲测成功激活

    只针对VL版本 注意:此方法只对VL版本的,或者是MSDN版本通过替换文件转为VL版本的Office2010有效.零售版本的就别指望KMS激活了. 怎么看自己是不是VL版本的,只要看帮助里面激活的地方 ...