经验分享程序开发文档资料数据资源其它资源

jQuery手风琴图片轮播切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手风琴图片轮播切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery手风琴图片轮播切换特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery手风琴图片轮播切换</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link href="css/slide.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <style type="text/css">
        <!--
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            background-color: #8790A8;
        }
        -->
    </style>

</head>
<BODY>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="background:#000">
        <tr>
            <td align="left" valign="top" background="images/index-bj1.gif"></td>
        </tr>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery.slider.js"></script>
        <tr>
            <td height="340" valign="top">
                <div id="slider">
                    <div class="slide"><a href="#" target="_blank"><img class="diapo" border="0" src="images/nW4pjGVlliIg0aKI.jpg" width="800" height="360" /></a> <div class="text"></div></div>
                    <div class="slide"><a href="#" target="_blank"><img class="diapo" border="0" src="images/I8qsPnCHL82adc8s.jpg" width="800" height="360" /></a> <div class="text"></div></div>
                    <div class="slide"><a href="#" target="_blank"><img class="diapo" border="0" src="images/LKMHwpOP1Ou7SgqC.jpg" width="800" height="360" /></a> <div class="text"></div></div>
                    <div class="slide"><a href="#" target="_blank"><img class="diapo" border="0" src="images/0Qvwqqc37bm2T5U4.jpg" width="800" height="360" /></a> <div class="text"></div></div>
                </div>
                <script type="text/javascript">
                    slider.init();
                    $(function () {
                        $("#slider div:last").trigger('mouseover');
                    })
                </script>
            </td>
        </tr>
        <tr>
            <td height="18">&nbsp;</td>
        </tr>
        <tr>
            <td align="right"></td>
        </tr>
    </table>
</BODY>
</html>

JS代码(slide.js):

//menu$(document).ready(function(){
	$('li.mainlevel').mousemove(function(){
	$(this).find('ul').slideDown();
	//you can give it a speed}
);
	$('li.mainlevel').mouseleave(function(){
	$(this).find('ul').slideUp("fast");
}
);
}
);

CSS代码(global.css):

body{font-size:10pt;font-family:"";margin-top:0px;margin-left:0px;margin-top:0px;margin-bottom:0px;margin-right:0px;}
td{FONT-SIZE:10pt;font-family:"";}
tr{FONT-SIZE:10pt;font-family:"";}
img{border:0}
.black12{font-size:12px;line-height:20px;color:#000000;}
.black12bold{font-size:12px;font-weight:bold;color:#000;line-height:20px;}
.black14{font-size:14px;color:#3F4246;line-height:24px;font-family:"Verdana";}
.bluedark12{font-size:12px;line-height:normal;color:#555A6D;line-height:24px;}
.bluedark122{font-size:12px;line-height:18px;color:#368387;}
.bluedark122bold{font-size:12px;line-height:22px;color:#368387;font-weight:bold;}
.bluedark142bold{font-size:14px;line-height:22px;color:#368387;font-weight:bold;}
.bluedark13bold{font-size:14px;line-height:26px;color:#3A3E48;font-weight:bold;}
.bluelight12{font-size:12px;line-height:16px;color:#2B6A96;}
.bluebold14{font-size:14px;font-weight:bold;color:#1C3B79;line-height:20px;}
.brown12{font-size:12px;color:615E44;line-height:20px;}
.hui12a{font-size:12px;color:#434343;line-height:22px;}
.hui12b{font-size:12px;color:#636363;line-height:30px;}
.hui12c{font-size:12px;color:#737373;font-family:"Verdana";line-height:24px;}
.hui12f{font-size:12px;color:#646A74;font-family:"Verdana";line-height:24px;}
.hui12f2{font-size:12px;color:#35394B;font-family:"Verdana";line-height:24px;}
.hui12d{font-size:12px;color:#6F6F6F;line-height:14px;font-family:"Verdana";}
.hui12e{font-size:12px;color:#272C36;line-height:26px;}
.hui14{font-size:14px;color:#515461;line-height:28px}
.hui12vb{font-size:12px;color:#434C5A;font-family:"Verdana";line-height:22px;}
.hui24{font-size:22px;color:#656A77;font-weight:bold;line-height:30px;}
.hui20{font-size:20px;color:#2E3847;line-height:24px;font-weight:bold;font-family:"Verdana";}
.hui18{font-size:16px;color:#8F93A1;line-height:30px;font-family:"Verdana";}
.huian12{font-size:12px;line-height:18px;color:#6F5B60;}
.orange12{font-size:12px;color:F8881C;line-height:24px;}
.red12{font-size:12px;line-height:24px;color:#B70101;}
.red12bold{font-size:12px;line-height:14px;font-weight:bold;color:#D81611;}
.red13bold{font-size:13px;font-weight:bold;color:#FF0000;}
.red14bold{font-size:14px;line-height:20px;font-weight:bold;color:#EB0B0B;}
.red16bold{font-size:16px;line-height:20px;font-weight:bold;color:#EB0B0B;}
.white12{font-size:12px;color:#FFFFFF;line-height:20px;font-family:"Verdana";}
.white12m{font-size:12px;color:#FFFFFF;line-height:16px;font-family:"Verdana";}
.white14{font-size:14px;color:#FFFFFF;line-height:20px;}
.white12bold{font-size:12px;font-weight:bold;color:#FFFFFF;line-height:12px;}
.white14bold{font-size:14px;font-weight:bold;color:#FFFFFF;line-height:20px;}
.white14bold2{font-size:13px;font-weight:bold;color:#F1F8E5;line-height:30px;font-family:"Verdana";}
.zong14bold{font-size:14px;line-height:20px;font-weight:bold;color:#723342;}
.zong12bold{font-size:12px;line-height:20px;font-weight:bold;color:#723342;}
.zong1{font-size:12px;line-height:16px;color:#66635B;}
.zong2{font-size:12px;line-height:24px;color:#F1EDDF;font-family:"Verdana";}
.zong3{font-size:12px;line-height:14px;color:#9B918B;}
.zong4{font-size:12px;line-height:20px;color:#9C9C95;font-family:"Verdana";}
.zong5{font-size:13px;line-height:24px;color:#553029;font-weight:bold;}
.zong6{font-size:13px;line-height:24px;color:#5E5145;}
.zong7{font-size:12px;line-height:22px;color:#5E5145;}
.zong8{font-size:13px;font-weight:bold;color:#6C5543;line-height:24px;}
.gre121{font-size:12px;line-height:18px;color:#5D8825;}
a:link{color:#333333;text-decoration:none;}
a:visited{text-decoration:none;color:#333333;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a.linkhui:link{color:#6E717A;text-decoration:none;}
a.linkhui:visited{text-decoration:none;color:#6E717A;}
a.linkhui:hover{text-decoration:none;color:#F0352B;}
a.linkhui:active{text-decoration:none;color:#6E717A;}
a.link3:link{color:#368387;text-decoration:none;}
a.link3:visited{text-decoration:none;color:#368387;}
a.link3:hover{text-decoration:unone;color:#3E612A;}
a.link3:active{text-decoration:none;color:#368387;}
a.link4:link{color:#646A74;text-decoration:none;}
a.link4:visited{text-decoration:none;color:#646A74;}
a.link4:hover{text-decoration:unone;color:#7C8D68;}
a.link4:active{text-decoration:none;color:#646A74;}
a.link5:link{color:#646A74;text-decoration:none;}
a.link5:visited{text-decoration:none;color:#646A74;}
a.link5:hover{text-decoration:underline;color:#586532;}
a.link5:active{text-decoration:none;color:#646A74;}
a.link6:link{color:#DA0303;text-decoration:none;}
a.link6:visited{text-decoration:none;color:#DA0303;}
a.link6:hover{text-decoration:none;color:#2778C5;}
a.link6:active{text-decoration:none;color:#DA0303;}
a.link7:link{color:#0E5AA5;text-decoration:none;}
a.link7:visited{text-decoration:none;color:#0E5AA5;}
a.link7:hover{text-decoration:underline;color:#D65203;}
a.link7:active{text-decoration:none;color:#00E5AA5;}
a.link8:link{color:#5A5D60;text-decoration:none;}
a.link8:visited{text-decoration:none;color:#5A5D60;}
a.link8:hover{text-decoration:underline;color:#3C3D47;}
a.link8:active{text-decoration:none;color:#5A5D60;}
a.link9:link{color:#2C2F36;text-decoration:none;}
a.link9:visited{text-decoration:none;color:#2C2F36;}
a.link9:hover{text-decoration:underline;color:#434345;}
a.link9:active{text-decoration:none;color:#2C2F36;}
a.link10:link{color:#F1F8E5;text-decoration:none;}
a.link10:visited{text-decoration:none;color:#F1F8E5;}
a.link10:hover{text-decoration:underline;color:#FAFCF6;}
a.link10:active{text-decoration:none;color:#F1F8E5;}
a.linkblue:link{color:#0095C3;text-decoration:none;}
a.linkblue:visited{text-decoration:none;color:#0095C3;}
a.linkblue:hover{text-decoration:underline;color:#6D8395;}
a.linkblue:active{text-decoration:none;color:#0095C3;}
a.linkgreen:link{color:#419420;text-decoration:none;}
a.linkgreen:visited{text-decoration:none;color:#419420;}
a.linkgreen:hover{text-decoration:underline;color:#6D8395;}
a.linkgreen:active{text-decoration:none;color:#419420;}
a.linkorg:link{color:#FC9D28;text-decoration:none;}
a.linkorg:visited{text-decoration:none;color:#FC9D28;}
a.linkorg:hover{text-decoration:underline;color:#6D8395;}
a.linkorg:active{text-decoration:none;color:#FC9D28;}
a.linkzong:link{color:#9C9C95;text-decoration:none;}
a.linkzong:visited{text-decoration:none;color:#9C9C95;}
a.linkzong:hover{text-decoration:none;color:#749632;}
a.linkzong:active{text-decoration:none;color:#9C9C95;}
a.linkwhite:link{color:#F1F8E5;text-decoration:none;}
a.linkwhite:visited{text-decoration:none;color:#F1F8E5;}
a.linkwhite:hover{text-decoration:none;color:#5B8641;background-color:#F1F7E5;}
a.linkwhite:active{text-decoration:none;color:#F1F8E5;}
a.linkwhite2:link{color:#FFFFFF;text-decoration:none;}
a.linkwhite2:visited{text-decoration:none;color:#FFFFFF;}
a.linkwhite2:hover{text-decoration:none;color:#FAE079;}
a.linkwhite2:active{text-decoration:none;color:#FFFFFF;}
.pages a.current{font-weight:bold}
.inp{border:1px solid #7B8287;width:110px;height:18px;padding:1px 1px 1px 1px;background-position:-70px -424px;font-size:12px;color:#575A6B;}
.inp3{border:0px solid #7B8287;width:142px;height:26px;padding:1px 1px 1px 1px;background-position:-70px -424px;font-size:14px;line-height:25px;color:#697263;}
.inp2{border:1px solid #DA2011;width:82px;height:18px;padding:1px 1px 1px 1px;background-position:-70px -424px;font-size:12px;color:#C6C7D1;}
/*2��*/
.hui18{font-size:18px;color:#151423;line-height:24px;font-weight:bold;font-family:"Verdana";}
.hui142{font-size:14px;color:#515461;line-height:16px;font-family:"Verdana"}
.bluelight122{font-size:12px;line-height:20px;color:#AFB3BF;}
.gredark14bold{font-size:14px;line-height:24px;color:#A0C910;font-weight:bold;}
a.link11:link{color:#515464;text-decoration:none;}
a.link11:visited{text-decoration:none;color:#515464;}
a.link11:hover{text-decoration:none;color:#25262D;}
a.link11:active{text-decoration:none;color:#515464;}
a.link12:link{color:#AFB3BF;text-decoration:none;}
a.link12:visited{text-decoration:none;color:#AFB3BF;}
a.link12:hover{text-decoration:underline;color:#C7CDDD;}
a.link12:active{text-decoration:none;color:#AFB3BF;}
a.linkblue2:link{color:#365887;text-decoration:none;}
a.linkblue2:visited{text-decoration:none;color:#365887;}
a.linkblue2:hover{text-decoration:none;color:#2C3540;}
a.linkblue2:active{text-decoration:none;color:#365887;}
.f14{font-size:14px}
.sound_icon_box{position:relative;display:block}
.sound_icon_box .sound_icon{position:absolute;top:8px;left:8px}

CSS代码(slide.css):

@charset "utf-8";/* CSS Document */
html,body,ul,li,h1,h2,h3,h4,h5,h6,p,fieldset,legend{padding:0;margin:0;}
body{font:12px/normal Verdana,Arial,Helvetica,sans-serif;}
ul,li{list-style-type:none;text-transform:capitalize;}
.clear{clear:both;*display:inline;/*IE only*/
}
/*menu*/
#nav{position:absolute;left:665px;top:97px;width:537px;z-index:1000}
#nav .jquery_out{float:left;line-height:32px;display:block;border-right:1px solid #fff;text-align:center;color:#fff;font:18px/32px "΢���ź�";background:#062723 url(../images/slide-panel_03.png) 0 0 repeat-x;}
#nav .jquery_out .smile{padding-left:1em;}
#nav .jquery_inner{margin-left:16px;}
#nav .jquery{margin-right:1px;padding:0 2em;}
#nav .mainlevel{background:url(../images/nav_bg.gif) no-repeat;float:left;margin-left:5px;display:inline;width:127px;}
#nav .mainlevel a{color:#000;font-weight:bold;text-decoration:none;line-height:32px;display:block;text-align:center;width:127px;}
#nav .mainlevel a:hover{color:#000;text-decoration:none;}
#nav .mainlevel ul{display:none;}
#nav .mainlevel li{background:#132748;width:127px;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
#nav .mainlevel li a{color:#FFF;}
#nav .mainlevel li a:hover{color:#FFF;text-decoration:underline;}
.log{text-align:center;color:skyblue;line-height:24px;text-transform:capitalize;margin:50px auto;}

CSS代码(style.css):

HTML{font-size:12px}
BODY{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:100%;PADDING-RIGHT:0px;BACKGROUND:#fff;HEIGHT:100%;PADDING-TOP:0px}
#slider{Z-INDEX:1;POSITION:absolute;WIDTH:1200px;BACKGROUND:#000;HEIGHT:360px;OVERFLOW:hidden;}
#slider .slide{Z-INDEX:10;POSITION:absolute;BORDER-LEFT:#000 1px solid;WIDTH:800px;BACKGROUND:#000;HEIGHT:360px;OVERFLOW:hidden;TOP:0px;CURSOR:default;LEFT:22px;text-align:left;}
#slider .title{COLOR:#f80;FONT-SIZE:1.2em;FONT-WEIGHT:bold;MARGIN-RIGHT:1.5em;TEXT-DECORATION:none}
#slider .text{POSITION:absolute;TEXT-ALIGN:justify;WIDTH:470px;DISPLAY:none;FONT-FAMILY:verdana,arial,Helvetica,sans-serif;COLOR:#fff;FONT-SIZE:0.9em;TOP:100%;LEFT:10px}
#slider .diapo{POSITION:absolute;FILTER:alpha(opacity=100);VISIBILITY:visible;opacity:1}
#apDiv1{Z-INDEX:1;POSITION:absolute;BACKGROUND-COLOR:#000000;WIDTH:820px;HEIGHT:30px;OVERFLOW:hidden;TOP:0px;LEFT:0px}
#apDiv2{Z-INDEX:3;POSITION:absolute;WIDTH:860px;HEIGHT:35px;OVERFLOW:hidden;TOP:216px;LEFT:-429px}
.pagenext{POSITION:relative;WIDTH:820px;HEIGHT:37px}
A.pn:link{Z-INDEX:4;POSITION:absolute;WIDTH:47px;FONT:12px "����";COLOR:#666;TOP:15px;RIGHT:33px;TEXT-DECORATION:none}
A.pn:visited{Z-INDEX:4;POSITION:absolute;WIDTH:47px;FONT:12px "����";COLOR:#666;TOP:15px;RIGHT:33px;TEXT-DECORATION:none}
A.pn:hover{COLOR:#fff}
A.pn:active{COLOR:#fff}
/*����������ʽ*/
A{FONT-SIZE:12px;COLOR:#000;}
A:link{COLOR:#fff;TEXT-DECORATION:none;}
A:visited{COLOR:#fff;TEXT-DECORATION:none;}
A:hover{COLOR:#fff;TEXT-DECORATION:underline;}
A:active{COLOR:#fff;TEXT-DECORATION:none;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
355.29 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
355.29 KB
立即下载
陶莎静
了解
打赏作者 鼓励作者
Html Js 手拉琴特效
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章