HTML中动态图片切换JQuery实现

2019-11-17 01:34:58

字体：大中小

来源：转载

供稿：网友

HTML中动态图片切换JQuery实现

相信很多同学都注意到了，各大新闻或者娱乐网站都含有动态图片切换，那个漂亮的感觉让刚刚学习html的人，都非常好奇和心动。那下面就让我们看一下到底如何实现动态图片切换呢？看一下百度贴吧的效果图吧~

javascript代码

Javascript代码

//JavaScriptDocument
vart=count=n=0;
$(function(){
$(".big_imga:not(:first)").hide();
$(".link_nava:not(:first)").hide();
$num_nav=$(".num_navspan");
$big_img=$(".big_imga");
count=$big_img.length;
t=setInterval("showAuto()",3000);
$num_nav.click(function(){
varnum_nav=$(".num_navspan").index(this);
$(this).addClass("selected").siblings().removeClass("selected");
$big_img.filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
$(".link_nava").filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
});
$(".img_nav").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",3000);});
})
functionshowAuto()
{
n=n>=2?0:(n+1);
$num_nav.eq(n).trigger('click');
}

Javascript代码

/*!
*jQueryJavaScriptLibraryv1.3.1
*http://jquery.com/
*
*Copyright(c)2009JohnResig
*DuallicensedundertheMITandGPLlicenses.
*http://docs.jquery.com/License
*
*Date:2009-01-2120:42:16-0500(Wed,21Jan2009)
*Revision:6158
*/
(function(){
var
//WillspeeduPReferencestowindow,andallowsmungingitsname.
window=this,
//Willspeedupreferencestoundefined,andallowsmungingitsname.
undefined,
//MapoverjQueryincaSEOfoverwrite
_jQuery=window.jQuery,
//Mapoverthe$incaseofoverwrite
_$=window.$,
jQuery=window.jQuery=window.$=function(selector,context){
//ThejQueryobjectisactuallyjusttheinitconstructor'enhanced'
returnnewjQuery.fn.init(selector,context);
},
//AsimplewaytocheckforHTMLstringsorIDstrings
//(bothofwhichweoptimizefor)
quickExpr=/^[^<]*(<(.|/s)+>)[^>]*$|^#([/w-]+)$/,
//Isitasimpleselector
isSimple=/^.[^:#/[/.,]*$/;
jQuery.fn=jQuery.prototype={
init:function(selector,context){
//Makesurethataselectionwasprovided
selector=selector||document;
//Handle$(DOMElement)
if(selector.nodeType){
this[0]=selector;
this.length=1;
this.context=selector;
returnthis;
}
//HandleHTMLstrings
if(typeofselector==="string"){
//ArewedealingwithHTMLstringoranID?
varmatch=quickExpr.exec(selector);
//Verifyamatch,andthatnocontextwasspecifiedfor#id
if(match&&(match[1]||!context)){
//HANDLE:$(html)->$(array)
if(match[1])
selector=jQuery.clean([match[1]],context);
//HANDLE:$("#id")
else{
varelem=document.getElementById(match[3]);
//HandlethecasewhereIEandOperareturnitems
//bynameinsteadofID
if(elem&&elem.id!=match[3])
returnjQuery().find(selector);
//Otherwise,weinjecttheelementdirectlyintothejQueryobject
varret=jQuery(elem||[]);
ret.context=document;
ret.selector=selector;
returnret;
}
//HANDLE:$(expr,[context])
//(whichisjustequivalentto:$(content).find(expr)
}else
returnjQuery(context).find(selector);
//HANDLE:$(function)
//Shortcutfordocumentready
}elseif(jQuery.isFunction(selector))
returnjQuery(document).ready(selector);
//Makesurethatoldselectorstateispassedalong
if(selector.selector&&selector.context){
this.selector=selector.selector;
this.context=selector.context;
}
returnthis.setArray(jQuery.makeArray(selector));
},
//Startwithanemptyselector
selector:"",
//ThecurrentversionofjQuerybeingused
jquery:"1.3.1",
//Thenumberofelementscontainedinthematchedelementset
size:function(){
returnthis.length;
},
//GettheNthelementinthematchedelementsetOR
//Getthewholematchedelementsetasacleanarray
get:function(num){
returnnum===undefined?
//Returna'clean'array
jQuery.makeArray(this):
//Returnjusttheobject
this[num];
},
//Takeanarrayofelementsandpushitontothestack
//(returningthenewmatchedelementset)
pushStack:function(elems,name,selector){
//BuildanewjQuerymatchedelementset
varret=jQuery(elems);
//Addtheoldobjectontothestack(asareference)
ret.prevObject=this;
ret.context=this.context;
if(name==="find")
ret.selector=this.selector+(this.selector?"":"")+selector;
elseif(name)
ret.selector=this.selector+"."+name+"("+selector+")";
//Returnthenewly-formedelementset
returnret;
},
//Forcethecurrentmatchedsetofelementstobecome
//thespecifiedarrayofelements(destroyingthestackintheprocess)
//YoushouldusepushStack()inordertodothis,butmaintainthestack
setArray:function(elems){
//Resettingthelengthto0,thenusingthenativeArraypush
//isasuper-fastwaytopopulateanobjectwitharray-likeproperties
this.length=0;
Array.prototype.push.apply(this,elems);
returnthis;
},
//Executeacallbackforeveryelementinthematchedset.
//(Youcanseedtheargumentswithanarrayofargs,butthisis
//onlyusedinternally.)
each:function(callback,args){
returnjQuery.each(this,callback,args);
},
//Determinethepositionofanelementwithin
//thematchedsetofelements
index:function(elem){
//Locatethepositionofthedesiredelement
returnjQuery.inArray(
//IfitreceivesajQueryobject,thefirstelementisused
elem&&elem.jquery?elem[0]:elem
,this);
},
attr:function(name,value,type){
varoptions=name;
//Lookforthecasewherewe're accessingastylevalue
if(typeofname==="string")
if(value===undefined)
returnthis[0]&&jQuery[type||"attr"](this[0],name);
else{
options={};
options[name]=value;
}
//Checktoseeifwe'resettingstylevalues
returnthis.each(function(i){
//Setallthestyles
for(nameinoptions)
jQuery.attr(
type?
this.style:
this,
name,jQuery.prop(this,options[name],type,i,name)
);
});
},
CSS:function(key,value){
//ignorenegativewidthandheightvalues
if((key=='width'||key=='height')&&parseFloat(value)<0)
value=undefined;
returnthis.attr(key,value,"curCSS");
},
text:function(text){
if(typeoftext!=="object"&&text!=null)
returnthis.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(text));
varret="";
jQuery.each(text||this,function(){
jQuery.each(this.childNodes,function(){
if(this.nodeType!=8)
ret+=this.nodeType!=1?
this.nodeValue:
jQuery.fn.text([this]);
});
});
returnret;
},
wrapAll:function(html){
if(this[0]){
//Theelementstowrapthetargetaround
varwrap=jQuery(html,this[0].ownerDocument).clone();
if(this[0].parentNode)
wrap.insertBefore(this[0]);
wrap.map(function(){
varelem=