正益无线首页jQuery焦点图

分享一款正益无线首页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

时间: 2024-10-03 13:46:23

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

正益无线赵庆华:AppCan助力开发者轻装前行

大谈特谈HTML5技术的厂商不在少数,而真的能够静下心,遵循HTML5的轨迹,扬HTML5之长,避HTML5之短,持之以恒为开发者谋求创新创业出路的厂商却乏陈可善.在前几日的iweb峰会上,正益无线赵庆华的演讲让笔者眼前一亮,作为国内最早支持并研究HTML5技术的厂商,AppCan以其前瞻的技术理念.丰富的项目实施经验.快速的反应能力,完善的服务体系,帮助开发者轻装前行. 一.HTML5逆袭,前端创业正当时 正益无线赵庆华谈到,自创立之处,AppCan的梦想就是让广大开发者轻装上阵,摒弃复杂.艰

jquery 焦点图

/* 用法:$("#focus").Jfocus({ path:"top" //path表示图片滚动方向,默认向上滚动 ,可设置left滚动 time:"3000" //图片滚动时间,默认3000毫秒 auto:"true" //是否自动滚动 number:"true" //是否显示按钮数字 bgdiv:"true" //是否显示背景标题 }); 整体focus骨架不变,依然是常用的结构

易迅多格jquery焦点图

易迅多格jquery焦点图是一款易迅首页多格上下滚动jquery焦点图效果,带数字索引按钮,多图上下滚动,焦点幻灯.

八屏切换jquery焦点图

HTML代码及调用: <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <link rel="stylesheet" href="css/SYTLE.css" /> <div class="foucebox"> <div class="bd"> <

带网上开户表单jQuery焦点图

带网上开户表单jQuery焦点图是一款适合证券公司的带表单的图片左右滚动切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index-banner"> <div class="head-login"> <div class="login-right"> <div class="fan0508-hdnav"> <ul&g

正益王国春:AppCan 为HTML5移动创新与创业而生

2014年移动创业更趋向理性,消费级App市场接近饱和,BAT等巨头的竞争更加激烈,市场版图及格局基本定型.而企业级移动应用却迎来爆发增长,替代进入红海的消费级App市场,企业级定制APP开发成为移动互联网下一个掘金地.企业级移动应用的蓝海也同样意味着开发者可借鉴的经验少之又少,如何借势借力,跨入企业级市场的门槛,成为众多中小团队迫切的需求. 在近日召开的iweb峰会上,正益无线王国春结合多年移动技术实践经验,做了题为<移动创新与创业,HTML5.Hybrid App.移动应用平台.MBAAS

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

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

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

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

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