分享一款正益无线首页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. python学习笔记——git的安装及使用

    1 git的基本介绍 git 是目前世界上最先进的分布式版本哦内阁制系统 详细信息可参考廖雪峰的官方网站中的Git教程 比git功能更加强大的有TortoiseGit和Tortoise SVN,具体安 ...

  2. RemoteDesktopManager 简单使用说明

    最近项目需要在多台window系统上,安装应用,没错,是window orz..没有了secureCRT putty等好用的窗体工具,真的挺难受的. 爱折腾的博主,百度了下,发现RemoteDeskt ...

  3. 10分钟轻松设置出 A+ 评分的 HTTP/2 网站

    前言 其实 HTTP/2 应该是 2015 年的老话题了(2015 年 5 月 14 日 HTTP/2 协议正式版的发布),但是 2018 年都到了很多网站依旧没有使用,作为新一代互联网协议,HTTP ...

  4. echarts 认知笔记

    0.echarts.setOption的核心认知 请注意,它是合并对象,而不是替换对象. 举个简单的例子,如果你第一次setOption时在series中配置了10个对象. 那么你下一次你意图使用只有 ...

  5. 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  6. 批量更新MongoDB的列。

    db.User.find().forEach( function(item){ db.User.update({"_id":item._id},{"$set": ...

  7. fpm制做mysql-5.6.33 rpm包

    增加用户: # groupadd -r mysql # useradd -g mysql -r -s /sbin/nologin -M -d /data/my_db mysql 源码安装mysql-5 ...

  8. 关于https中的算法

    1,对称加密算法,是指加密和解密使用相同的密钥,典型的算法有RSA,DSA,DH 2,非对称加密算法:又称为公钥加密算法,是指加密和解密使用不同的密钥,公共的公钥用于加密,私钥用于解密,比如第一次请求 ...

  9. elastic search internal

    Realtime Search with Lucene http://2010.berlinbuzzwords.de/sites/2010.berlinbuzzwords.de/files/busch ...

  10. 正确理解web交互中的cookie与session

    cookie存储在客户端的纯文本文件 用户请求服务器脚本 脚本设置cookie内容 并 通过http-response发送cookie内容到客户端并保存在客户端本地 客户端再次发送http请求的时候会 ...