以下是 w3cfuns网站首页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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>w3cfuns网站首页jquery图片滚动</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
</head>
<body>
<style type="text/css">
*{ padding:0; margin:0;}
ul,li { list-style:none;}
img { border:none;}
.banner { width:900px; margin:0 auto;}
.banner { cursor:pointer;}
</style>
<div class="banner" id="banner">
<a id="prevbt"></a>
<a id="nextbt"></a>
<ul>
<li>
<a href="#">
<img src="images/135402u7bigt1bdqigqfmf.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="images/180036tcfujeszqmqmjcg7.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="images/211452s1ngghpu6ucgui1p.png" />
</a>
</li>
<li>
<a href="#">
<img src="images/201537o9qtlqu3g9l93nfl.jpg" />
</a>
</li>
</ul>
</div>
<script>
var li_Width=900;
var banner_Li_Num=$('#banner li').length;
$('#banner ul').css({'width':li_Width*banner_Li_Num,'marginLeft':-li_Width});
function prevbt(){
$('#prevbt').unbind('click');
$('#banner li:last').detach().insertBefore('#banner li:first').parents('ul').css('marginLeft',-li_Width*2).stop(true).animate({marginLeft:-li_Width},800,'easeInOutBack',function(){
$('#prevbt').bind('click',prevbt);
});
}
function nextbt(){
$('#nextbt').unbind();
$('#banner ul').stop(true).animate({marginLeft:-li_Width*2},800,'easeInOutBack',function(){
$('#banner ul').css('marginLeft',-li_Width).find('li:first').insertAfter('#banner li:last');
$('#nextbt').bind('click',nextbt);
})
}
$('#prevbt').click(function(){
prevbt();
})
$('#nextbt').click(function(){
nextbt();
})
banner_T=setInterval(banner_Auto,3000)
function banner_Auto(){
nextbt();
}
$('#banner').hover(function(){
clearInterval(banner_T);
},function(){
banner_T=setInterval(banner_Auto,3000);
})
</script>
</body>
</html>JS代码(jquery.easing.min.js):
/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
jQuery.easing.jswing=jQuery.easing.swing;
jQuery.extend(jQuery.easing,{
def:"easeOutQuad",swing:function(e,f,a,h,g){
return jQuery.easing[jQuery.easing.def](e,f,a,h,g)}
,easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a}
,easeOutQuad:function(e,f,a,h,g){
return -h*(f/=g)*(f-2)+a}
,easeInOutQuad:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f+a}
return -h/2*((--f)*(f-2)-1)+a}
,easeInCubic:function(e,f,a,h,g){
return h*(f/=g)*f*f+a}
,easeOutCubic:function(e,f,a,h,g){
return h*((f=f/g-1)*f*f+1)+a}
,easeInOutCubic:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f*f+a}
return h/2*((f-=2)*f*f+2)+a}
,easeInQuart:function(e,f,a,h,g){
return h*(f/=g)*f*f*f+a}
,easeOutQuart:function(e,f,a,h,g){
return -h*((f=f/g-1)*f*f*f-1)+a}
,easeInOutQuart:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f*f*f+a}
return -h/2*((f-=2)*f*f*f-2)+a}
,easeInQuint:function(e,f,a,h,g){
return h*(f/=g)*f*f*f*f+a}
,easeOutQuint:function(e,f,a,h,g){
return h*((f=f/g-1)*f*f*f*f+1)+a}
,easeInOutQuint:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f*f*f*f+a}
return h/2*((f-=2)*f*f*f*f+2)+a}
,easeInSine:function(e,f,a,h,g){
return -h*Math.cos(f/g*(Math.PI/2))+h+a}
,easeOutSine:function(e,f,a,h,g){
return h*Math.sin(f/g*(Math.PI/2))+a}
,easeInOutSine:function(e,f,a,h,g){
return -h/2*(Math.cos(Math.PI*f/g)-1)+a}
,easeInExpo:function(e,f,a,h,g){
return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a}
,easeOutExpo:function(e,f,a,h,g){
return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a}
,easeInOutExpo:function(e,f,a,h,g){
if(f==0){
return a}
if(f==g){
return a+h}
if((f/=g/2)<1){
return h/2*Math.pow(2,10*(f-1))+a}
return h/2*(-Math.pow(2,-10*--f)+2)+a}
,easeInCirc:function(e,f,a,h,g){
return -h*(Math.sqrt(1-(f/=g)*f)-1)+a}
,easeOutCirc:function(e,f,a,h,g){
return h*Math.sqrt(1-(f=f/g-1)*f)+a}
,easeInOutCirc:function(e,f,a,h,g){
if((f/=g/2)<1){
return -h/2*(Math.sqrt(1-f*f)-1)+a}
return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a}
,easeInElastic:function(f,h,e,l,k){
var i=1.70158;
var j=0;
var g=l;
if(h==0){
return e}
if((h/=k)==1){
return e+l}
if(!j){
j=k*0.3}
if(g<Math.abs(l)){
g=l;
var i=j/4}
else{
var i=j/(2*Math.PI)*Math.asin(l/g)}
return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}
,easeOutElastic:function(f,h,e,l,k){
var i=1.70158;
var j=0;
var g=l;
if(h==0){
return e}
if((h/=k)==1){
return e+l}
if(!j){
j=k*0.3}
if(g<Math.abs(l)){
g=l;
var i=j/4}
else{
var i=j/(2*Math.PI)*Math.asin(l/g)}
return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e}
,easeInOutElastic:function(f,h,e,l,k){
var i=1.70158;
var j=0;
var g=l;
if(h==0){
return e}
if((h/=k/2)==2){
return e+l}
if(!j){
j=k*(0.3*1.5)}
if(g<Math.abs(l)){
g=l;
var i=j/4}
else{
var i=j/(2*Math.PI)*Math.asin(l/g)}
if(h<1){
return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}
return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e}
,easeInBack:function(e,f,a,i,h,g){
if(g==undefined){
g=1.70158}
return i*(f/=h)*f*((g+1)*f-g)+a}
,easeOutBack:function(e,f,a,i,h,g){
if(g==undefined){
g=1.70158}
return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a}
,easeInOutBack:function(e,f,a,i,h,g){
if(g==undefined){
g=1.70158}
if((f/=h/2)<1){
return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}
return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a}
,easeInBounce:function(e,f,a,h,g){
return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a}
,easeOutBounce:function(e,f,a,h,g){
if((f/=g)<(1/2.75)){
return h*(7.5625*f*f)+a}
else{
if(f<(2/2.75)){
return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}
else{
if(f<(2.5/2.75)){
return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}
else{
return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}
}
}
}
,easeInOutBounce:function(e,f,a,h,g){
if(f<g/2){
return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}
return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}
}
);
CSS代码(zzsc.css):
.cm_mb{margin-bottom:20px;}
.area1{margin-top:20px;overflow:hidden;}
.a1L{width:900px;float:left;}
.a1R{width:300px;float:right;}
.subnav{height:50px;background:#f7f7f7;border-bottom:1px #ddd solid;}
.subbar{height:50px;position:relative;}
.subbar h2,.subbar ul,.subbar ol,.subbar li,.subbar li a{float:left;}
.subbar h2{height:50px;line-height:60px;line-height:58px\9;*line-height:61px;_line-height:61px;width:75px;font-size:20px;color:#999;font-weight:normal;overflow:hidden;}
.subbar ul,.subbar ol{padding-top:10px;height:40px;margin-right:20px;}
.subbar li{margin-left:-1px;}
.subbar li a{display:block;color:#333;height:38px;line-height:39px;_line-height:41px;padding:0 20px;background:#f1f1f1;border:1px #ddd solid;overflow:hidden;position:relative;bottom:-1px;}
.subbar li a:hover{text-decoration:none;color:#05a;}
.subbar li a.y{background:#fff;border-bottom:1px #fff solid;color:#333;}
body{font-size:14px;}
body a:hover{color:#05a;}
.funs_index_r_1,.funs_index_r_1 a{display:block;height:90px;overflow:hidden;}
.funs_index_r_2,.funs_index_r_2 a{display:block;height:250px;overflow:hidden;}
.funs_index_r_3,.funs_index_r_3 a{display:block;height:250px;overflow:hidden;}
.funs_index_l_1,.funs_index_l_1 a{display:block;height:90px;overflow:hidden;}
.funs_index_l_2,.funs_index_l_2 a{display:block;height:90px;overflow:hidden;}
.funs_index_m_1,.funs_index_m_1 a{display:block;height:60px;overflow:hidden;text-align:center;}
.funs_index_m_1{padding-top:55px;margin-top:3px;border-top:1px #ddd dotted;}
.area1{margin-top:20px;}
.a1L{position:relative;}
.banner{width:900px;position:relative;margin-bottom:15px;}
.banner,.banner ul{display:block;height:300px;overflow:hidden;}
.banner li,.banner li a,.banner li a img{display:block;width:900px;height:300px;float:left;overflow:hidden;}
.banner #prevbt,.banner #nextbt{display:block;width:30px;height:50px;background:url(indexsprites.png) no-repeat #fff;position:absolute;top:120px;opacity:.3;filter:alpha(opacity=30);}
.banner #prevbt{background-position:0 -110px;left:0;border-top-right-radius:5px;border-bottom-right-radius:5px;}
.banner #nextbt{background-position:-40px -110px;right:0;border-top-left-radius:5px;border-bottom-left-radius:5px;}
.sf4{width:900px;height:113px;overflow:hidden;}
.sf4 div{float:left;margin-left:-20px;overflow:hidden;}
.sf4 div p{margin-left:20px;display:inline!important;}
.sf4 div p,.sf4 div p a,.sf4 div p a img{display:block;width:210px;height:113px;float:left;}
.tadoing,.tadoing p,.tadoing ul,.tadoing ul li{height:30px;line-height:30px;overflow:hidden;}
.tadoing{margin:10px 0;}
.tadoing p{width:153px;float:left;background:url(indexsprites.png) no-repeat 0 8px;text-indent:23px;}
.tadoing ul{width:670px;float:left;}
.tadoing a{color:#05a;}
.tadoing em{color:#f00;}
.tadoing span{color:#999;font-size:12px;}
.tadoing div{margin-top:6px;width:61px;height:20px;float:right;}
.tadoing div a{display:block;width:30px;height:20px;float:left;background:url(indexsprites.png) no-repeat;}
.tadoing div a.goup{background-position:-160px 0;margin-right:1px;}
.tadoing div a.godown{background-position:-191px 0;}
.tadoing div a.goup:hover{background-position:-160px -20px;}
.tadoing div a.godown:hover{background-position:-191px -20px;}
.a1R{}
.hothd,.hothd .hothdL,.hothd .hothdR,.hothd .hothdR a,.hothd .hothdR a img{height:180px;}
.hothd{overflow:hidden;margin-top:12px;}
.hothd .hothdL{width:170px;float:left;position:relative;}
.hothd .hothdR{width:120px;float:right;}
.hothd .hothdL strong{display:block;height:35px;line-height:36px;line-height:38px\9;*line-height:37px;font-size:18px;margin-bottom:10px;}
.hothd .hothdL .hd-name{height:90px;overflow:hidden;font-size:14px;color:#666;line-height:22px;}
.hothd .hothdL .hd-b{display:block;width:95px;height:30px;background:url(hd-b.png) no-repeat;position:absolute;left:0;bottom:5px;}
.hothd .hothdR a,.hothd .hothdR a img{display:block;width:120px;}
.followus{height:50px;line-height:51px;_line-height:52px;overflow:hidden;}
.followus span,.followus a{display:block;float:left;}
.followus a{display:inline;text-indent:20px;background:url(indexsprites.png) no-repeat;}
.followus a:hover{color:#05a;}
.followus a.sinawb{background-position:0 -43px;margin-left:5px;}
.followus a.qqwb{background-position:-120px -43px;margin-left:10px;}
.area2{}
.cm_L{width:300px;margin-right:20px;float:left;overflow:hidden;}
.cm_M{width:580px;float:left;position:relative;overflow:hidden;}
.cm_R{width:300px;float:right;overflow:hidden;}
.yard{border:1px #ddd solid;border-top:2px #999 solid;}
.ydtitle{height:38px;padding:0 10px;background:#f7f7f7;line-height:39px;line-height:41px\9;*line-height:40px;overflow:hidden;position:relative;z-index:9;}
.ydtitle h3{font-size:16px;float:left;}
.ydtitle .cm_go{display:block;float:right;color:#666;}
.ydtitle .cm_go:hover{color:#05a;}
#goodsites{height:263px;}
.ydcontent,.ydcontent ul.c1,.ydcontent li{overflow:hidden;}
.ydcontent ul li{height:48px;line-height:24px;padding:10px;border-top:1px #ddd dotted;position:relative;z-index:8;top:-1px;left:0;overflow:hidden;}
.ydcontent ul.c1 li .pic48,.pic48 img{display:block;width:48px;height:48px;float:left;}
.ydcontent ul.c1 li .pic48{margin-right:10px;}
.ydcontent ul.c1 li p{height:48px;overflow:hidden;word-break:break-all;}
.ydcontent .bpblock{height:48px;line-height:24px;padding:10px;border-top:1px #ddd dotted;position:relative;z-index:8;top:-1px;left:0;overflow:hidden;}
.ydcontent .bpblock .pic48,.pic48 img{display:block;width:48px;height:48px;float:left;}
.ydcontent .bpblock .pic48{margin-right:10px;}
.ydcontent .bpblock p.bpb{width:160px;float:left;}
.ydcontent .bpblock .cnt_box{width:50px;height:50px;position:absolute;right:10px;top:10px;}
.ydcontent .bpblock .cnt_box span{display:block;width:50px;height:50px;line-height:18px;text-align:center;border-radius:3px;color:#666;background:#f4f4f4;overflow:hidden;}
.ydcontent .bpblock .cnt_box b{display:block;height:25px;line-height:30px;line-height:32px\9;font-weight:normal;font-size:12px;overflow:hidden;}
.ydcontent .bpblock p i,.ydcontent .bpblock p i a{color:#666;}
.ydcontent .bpblock p i a:hover{color:#05a;}
.ydcontent .c2 li a{display:block;height:48px;background:url(indexsprites.png) no-repeat -241px 5px;overflow:hidden;}
.ydcontent .c2 li a:hover{background-position:-241px -71px;}
.ydcontent .c2 li a em{display:block;width:45px;height:18px;padding-top:30px;padding-right:5px;text-align:center;font-size:12px;float:left;border-right:1px #ddd solid;margin-right:10px;}
.ydcontent .c4 li a{display:block;height:48px;background:url(indexsprites.png) no-repeat -241px -147px;overflow:hidden;}
.ydcontent .c4 li a:hover{background-position:-241px -223px;}
.ydcontent .c4 li a em{display:block;width:45px;height:18px;padding-top:30px;padding-right:5px;text-align:center;font-size:12px;float:left;border-right:1px #ddd solid;margin-right:10px;}
.ydcontent .c5 li{height:18px;line-height:18px;padding:8px 10px;border-top:1px #ddd dotted;position:relative;z-index:8;top:-1px;left:0;}
.ydcontent .c5 li a{display:block;height:18px;background:url(indexsprites.png) no-repeat -160px -195px;overflow:hidden;text-indent:12px;font-size:12px;}
.cm_M ul{border-top:2px #999 solid;position:relative;overflow:hidden;}
.cm_M ul li{height:110px;padding:24px 0 18px 0;overflow:hidden;border-top:1px #ddd dotted;position:relative;top:-1px;_top:-3px;left:0;}
.cm_M ul li h2{font-size:16px;margin-bottom:10px;}
.cm_M ul li p{height:75px;line-height:25px;color:#666;}
.cm_M ul li p a,.cm_M ul li p a img{display:block;width:110px;height:65px;float:left;}
.cm_M ul li p a{margin:5px 10px 0 0;}
.fast1,.fast2,.fast3,.fast4,.fast5{overflow:hidden;padding:10px 5px;}
.fast2,.fast4{background:#f5f5f5;}
.fast1 table,.fast2 table,.fast3 table,.fast4 table,.fast5 table{width:100%;font-size:12px;border-collapse:collapse;border-spacing:0;}
.fast1 td,.fast2 td,.fast3 td,.fast4 td,.fast5 td{height:20px;}
.fast1 .fcon,.fast2 .fcon,.fast3 .fcon,.fast4 .fcon,.fast5 .fcon{width:60px;overflow:hidden;background:url(fastsprites.png) no-repeat;}
.fast1 .fcon{background-position:13px center;}
.fast2 .fcon{background-position:-71px center;}
.fast3 .fcon{background-position:-155px center;}
.fast4 .fcon{background-position:-239px center;}
.fast5 .fcon{background-position:-322px center;}
.job_b{padding:10px 10px 12px;border-top:1px #ddd dotted;position:relative;top:-1px;}
.job_b h4{font-size:14px;height:26px;line-height:26px;overflow:hidden;}
.job_b h4 span{color:#999;margin:0 5px;font-weight:normal;font-size:12px;vertical-align:top;}
.job_b p{font-size:12px;color:#666;line-height:20px;}
.area3{overflow:hidden;}
.ydcontent ul.c3 li p{height:45px;overflow:hidden;}
.ydcontent ul.c3 li .pic60,.pic60 img{display:block;width:60px;height:45px;float:left;}
.ydcontent ul.c3 li .pic60{margin-right:10px;}
.cm_M ul.m2{margin-top:-18px;}
.gw_b{padding:10px 12px 15px;border-top:1px #ddd dotted;position:relative;top:-1px;_top:-3px;left:0;}
.gw_b div,.gw_b div a,.gw_b div a img{display:block;width:110px;height:80px;float:left;}
.gw_b div{margin:5px 10px 0 0;}
.gw_b p{font-size:12px;height:85px;overflow:hidden;color:#666;line-height:20px;}
.gw_b p b{display:block;font-size:14px;margin-bottom:7px;height:20px;line-height:21px;*line-height:23px;_line-height:22px;overflow:hidden;}
.gbook_b{padding:15px 12px 16px;border-top:1px #ddd dotted;position:relative;top:-1px;_top:-3px;left:0;overflow:hidden;}
.gbook_b div,.gbook_b div a,.gbook_b div a img{display:block;width:110px;height:145px;float:left;}
.gbook_b div{margin:5px 10px 0 0;}
.gbook_b p{font-size:12px;height:110px;overflow:hidden;color:#666;line-height:20px;}
.gbook_b p b{display:block;font-size:14px;margin-bottom:10px;line-height:21px;*line-height:23px;_line-height:22px;word-break:break-all;overflow:hidden;}
.gbook_b span{display:block;height:24px;line-height:25px;line-height:27px;_line-height:26px;font-size:12px;margin-top:10px;overflow:hidden;background:url(indexsprites.png) no-repeat 0 -197px;text-indent:24px;}
.gbook_b span a{color:#05a;}
#tgbird{position:absolute;right:0;top:10px;z-index:10;}
#tgbird,#tgbird a{display:block;width:60px;height:32px;}
#tgbird a{background:url(tougaobird.png) no-repeat 0 3px;}
#tgbird a:hover{background-position:0 -58px;}
分享到QQ
分享到微博
微信扫一扫
