相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动。那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~
[javascript] view plain
copy
print ?
[javascript] view plain
copy
print ?
var t = count = n = 0;
$(function (){
$(".big_img a:not(:first)" ).hide();
$(".link_nav a:not(:first)" ).hide();
$num_nav = $(".num_nav span" );
$big_img = $(".big_img a" );
count = $big_img.length;
t = setInterval("showAuto()" , 3000);
$num_nav.click(function (){
var num_nav = $( ".num_nav span" ).index( this );
$(this ).addClass( "selected" ).siblings().removeClass( "selected" );
$big_img.filter(":visible" ).fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
$(".link_nav a" ).filter( ":visible" ).fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
});
$(".img_nav" ).hover( function (){clearInterval(t)}, function (){t = setInterval( "showAuto()" , 3000);});
})
function showAuto()
{
n = n >= 2 ? 0 : (n + 1);
$num_nav.eq(n).trigger('click' );
}
// JavaScript Document
var t = count = n = 0;
$(function(){
$(".big_img a:not(:first)").hide();
$(".link_nav a:not(:first)").hide();
$num_nav = $(".num_nav span");
$big_img = $(".big_img a");
count = $big_img.length;
t = setInterval("showAuto()", 3000);
$num_nav.click(function(){
var num_nav = $(".num_nav span").index(this);
$(this).addClass("selected").siblings().removeClass("selected");
$big_img.filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
$(".link_nav a").filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
});
$(".img_nav").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});
})
function showAuto()
{
n = n >= 2 ? 0 : (n + 1);
$num_nav.eq(n).trigger('click');
}
[javascript] view plain
copy
print ?
(function (){
var
window = this ,
undefined,
_jQuery = window.jQuery,
_$ = window.$,
jQuery = window.jQuery = window.$ = function ( selector, context ) {
return new jQuery.fn.init( selector, context );
},
quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
isSimple = /^.[^:#\[\.,]*$/;
jQuery.fn = jQuery.prototype = {
init: function ( selector, context ) {
selector = selector || document;
if ( selector.nodeType ) {
this [0] = selector;
this .length = 1;
this .context = selector;
return this ;
}
if ( typeof selector === "string" ) {
var match = quickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );
else {
var elem = document.getElementById( match[3] );
if ( elem && elem.id != match[3] )
return jQuery().find( selector );
var ret = jQuery( elem || [] );
ret.context = document;
ret.selector = selector;
return ret;
}
} else
return jQuery( context ).find( selector );
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ).ready( selector );
if ( selector.selector && selector.context ) {
this .selector = selector.selector;
this .context = selector.context;
}
return this .setArray(jQuery.makeArray(selector));
},
selector: "" ,
jquery: "1.3.1" ,
size: function () {
return this .length;
},
get: function ( num ) {
return num === undefined ?
jQuery.makeArray( this ) :
this [ num ];
},
pushStack: function ( elems, name, selector ) {
var ret = jQuery( elems );
ret.prevObject = this ;
ret.context = this .context;
if ( name === "find" )
ret.selector = this .selector + ( this .selector ? " " : "" ) + selector;
else if ( name )
ret.selector = this .selector + "." + name + "(" + selector + ")" ;
return ret;
},
setArray: function ( elems ) {
this .length = 0;
Array.prototype.push.apply( this , elems );
return this ;
},
each: function ( callback, args ) {
return jQuery.each( this , callback, args );
},
index: function ( elem ) {
return jQuery.inArray(
elem && elem.jquery ? elem[0] : elem
, this );
},
attr: function ( name, value, type ) {
var options = name;
if ( typeof name === "string" )
if ( value === undefined )
return this [0] && jQuery[ type || "attr" ]( this [0], name );
else {
options = {};
options[ name ] = value;
}
return this .each( function (i){
for ( name in options )
jQuery.attr(
type ?
this .style :
this ,
name, jQuery.prop( this , options[ name ], type, i, name )
);
});
},
css: function ( key, value ) {
if ( (key == 'width' || key == 'height' ) && parseFloat(value) < 0 )
value = undefined;
return this .attr( key, value, "curCSS" );
},
text: function ( text ) {
if ( typeof text !== "object" && text != null )
return this .empty().append( ( this [0] && this [0].ownerDocument || document).createTextNode( text ) );
var ret = "" ;
jQuery.each( text || this , function (){
jQuery.each( this .childNodes, function (){
if ( this .nodeType != 8 )
ret += this .nodeType != 1 ?
this .nodeValue :
jQuery.fn.text( [ this ] );
});
});
return ret;
},
wrapAll: function ( html ) {
if ( this [0] ) {
var wrap = jQuery( html, this [0].ownerDocument ).clone();
if ( this [0].parentNode )
wrap.insertBefore( this [0] );
wrap.map(function (){
var elem = this ;
while ( elem.firstChild )
elem = elem.firstChild;
return elem;
}).append(this );
}
return this ;
},
wrapInner: function ( html ) {
return this .each( function (){
jQuery( this ).contents().wrapAll( html );
});
},
wrap: function ( html ) {
return this .each( function (){
jQuery( this ).wrapAll( html );
});
},
append: function () {
return this .domManip(arguments, true , function (elem){
if ( this .nodeType == 1)
this .appendChild( elem );
});
},
prepend: function () {
return this .domManip(arguments, true , function (elem){
if ( this .nodeType == 1)
this .insertBefore( elem, this .firstChild );
});
},
before: function () {
return this .domManip(arguments, false , function (elem){
this .parentNode.insertBefore( elem, this );
});
},
after: function () {
return this .domManip(arguments, false , function (elem){
this .parentNode.insertBefore( elem, this .nextSibling );
});
},
end: function () {
return this .prevObject || jQuery( [] );
},
push: [].push,
find: function ( selector ) {
if ( this .length === 1 && !/,/.test(selector) ) {
var ret = this .pushStack( [], "find" , selector );
ret.length = 0;
jQuery.find( selector, this [0], ret );
return ret;
} else {
var elems = jQuery.map( this , function (elem){
return jQuery.find( selector, elem );
});
return this .pushStack( /[^+>] [^+>]/.test( selector ) ?
jQuery.unique( elems ) :
elems, "find" , selector );
}
},
clone: function ( events ) {
var ret = this .map( function (){
if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc( this ) ) {
var clone = this .cloneNode( true ),
container = document.createElement("div" );
container.appendChild(clone);
return jQuery.clean([container.innerHTML])[0];
} else
return this .cloneNode( true );
});
var clone = ret.find( "*" ).andSelf().each( function (){
if ( this [ expando ] !== undefined )
this [ expando ] = null ;
});
if ( events === true )
this .find( "*" ).andSelf().each( function (i){
if ( this .nodeType == 3)
return ;
var events = jQuery.data( this , "events" );
for ( var type in events )
for ( var handler in events[ type ] )
jQuery.event.add( clone[ i ], type, events[ type ][ handler ], events[ type ][ handler ].data );
});
return ret;
},
filter: function ( selector ) {
return this .pushStack(
jQuery.isFunction( selector ) &&
jQuery.grep(this , function (elem, i){
return selector.call( elem, i );
}) ||
jQuery.multiFilter( selector, jQuery.grep(this , function (elem){
return elem.nodeType === 1;
}) ), "filter" , selector );
},
closest: function ( selector ) {
var pos = jQuery.expr.match.POS.test( selector ) ? jQuery(selector) : null ;
return this .map( function (){
var cur = this ;
while ( cur && cur.ownerDocument ) {
if ( pos ? pos.index(cur) > -1 : jQuery(cur).is(selector) )
return cur;
cur = cur.parentNode;
}
});
},
not: function ( selector ) {
if ( typeof selector === "string" )
if ( isSimple.test( selector ) )
return this .pushStack( jQuery.multiFilter( selector, this , true ), "not" , selector );
else
selector = jQuery.multiFilter( selector, this );
var isArrayLike = selector.length && selector[selector.length - 1] !== undefined && !selector.nodeType;
return this .filter( function () {
return isArrayLike ? jQuery.inArray( this , selector ) < 0 : this != selector;
});
},
add: function ( selector ) {
return this .pushStack( jQuery.unique( jQuery.merge(
this .get(),
typeof selector === "string" ?
jQuery( selector ) :
jQuery.makeArray( selector )
)));
},
is: function ( selector ) {
return !!selector && jQuery.multiFilter( selector, this ).length > 0;
},
hasClass: function ( selector ) {
return !!selector && this .is( "." + selector );
},
val: function ( value ) {
if ( value === undefined ) {
var elem = this [0];
if ( elem ) {
if ( jQuery.nodeName( elem, 'option' ) )
return (elem.attributes.value || {}).specified ? elem.value : elem.text;
if ( jQuery.nodeName( elem, "select" ) ) {
var index = elem.selectedIndex,
values = [],
options = elem.options,
one = elem.type == "select-one" ;
if ( index < 0 )
return null ;
for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
var option = options[ i ];
if ( option.selected ) {
value = jQuery(option).val();
if ( one )
return value;
values.push( value );
}
}
return values;
}
return (elem.value || "" ).replace(/\r/g, "" );
}
return undefined;
}
if ( typeof value === "number" )
value += '' ;
return this .each( function (){
if ( this .nodeType != 1 )
return ;
if ( jQuery.isArray(value) && /radio|checkbox/.test( this .type ) )
this .checked = (jQuery.inArray( this .value, value) >= 0 ||
jQuery.inArray(this .name, value) >= 0);
else if ( jQuery.nodeName( this , "select" ) ) {
var values = jQuery.makeArray(value);
jQuery( "option" , this ).each( function (){
this .selected = (jQuery.inArray( this .value, values ) >= 0 ||
jQuery.inArray( this .text, values ) >= 0);
});
if ( !values.length )
this .selectedIndex = -1;
} else
this .value = value;
});
},
html: function ( value ) {
return value === undefined ?
(this [0] ?
this [0].innerHTML :
null ) :
this .empty().append( value );
},
replaceWith: function ( value ) {
return this .after( value ).remove();
},
eq: function ( i ) {
return this .slice( i, +i + 1 );
},
slice: function () {
return this .pushStack( Array.prototype.slice.apply( this , arguments ),
"slice" , Array.prototype.slice.call(arguments).join( "," ) );
},
map: function ( callback ) {
return this .pushStack( jQuery.map( this , function (elem, i){
return callback.call( elem, i, elem );
}));
},
andSelf: function () {
return this .add( this .prevObject );
},
domManip: function ( args, table, callback ) {
if ( this [0] ) {
var fragment = ( this [0].ownerDocument || this [0]).createDocumentFragment(),
scripts = jQuery.clean( args, (this [0].ownerDocument || this [0]), fragment ),
first = fragment.firstChild,
extra = this .length > 1 ? fragment.cloneNode( true ) : fragment;
if ( first )
for ( var i = 0, l = this .length; i < l; i++ )
callback.call( root(this [i], first), i > 0 ? extra.cloneNode( true ) : fragment );
if ( scripts )
jQuery.each( scripts, evalScript );
}
return this ;
function root( elem, cur ) {
return table && jQuery.nodeName(elem, "table" ) && jQuery.nodeName(cur, "tr" ) ?
(elem.getElementsByTagName("tbody" )[0] ||
elem.appendChild(elem.ownerDocument.createElement("tbody" ))) :
elem;
}
}
};
jQuery.fn.init.prototype = jQuery.fn;
function evalScript( i, elem ) {
if ( elem.src )
jQuery.ajax({
url: elem.src,
async: false ,
dataType: "script"
});
else
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
if ( elem.parentNode )
elem.parentNode.removeChild( elem );
}
function now(){
return + new Date;
}
jQuery.extend = jQuery.fn.extend = function () {
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false , options;
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && !jQuery.isFunction(target) )
target = {};
if ( length == i ) {
target = this ;
--i;
}
for ( ; i < length; i++ )
if ( (options = arguments[ i ]) != null )
for ( var name in options ) {
var src = target[ name ], copy = options[ name ];
if ( target === copy )
continue ;
if ( deep && copy && typeof copy === "object" && !copy.nodeType )
target[ name ] = jQuery.extend( deep,
src || ( copy.length != null ? [ ] : { } )
, copy );
else if ( copy !== undefined )
target[ name ] = copy;
}
return target;
};
var exclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
defaultView = document.defaultView || {},
toString = Object.prototype.toString;
jQuery.extend({
noConflict: function ( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
isFunction: function ( obj ) {
return toString.call(obj) === "[object Function]" ;
},
isArray: function ( obj ) {
return toString.call(obj) === "[object Array]" ;
},
isXMLDoc: function ( elem ) {
return elem.nodeType === 9 && elem.documentElement.nodeName !== "HTML" ||
!!elem.ownerDocument && jQuery.isXMLDoc( elem.ownerDocument );
},
globalEval: function ( data ) {
data = jQuery.trim( data );
if ( data ) {
var head = document.getElementsByTagName( "head" )[0] || document.documentElement,
script = document.createElement("script" );
script.type = "text/javascript" ;
if ( jQuery.support.scriptEval )
script.appendChild( document.createTextNode( data ) );
else
script.text = data;
head.insertBefore( script, head.firstChild );
head.removeChild( script );
}
},
nodeName: function ( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() == name.toUpperCase();
},
each: function ( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break ;
} else
for ( ; i < length; )
if ( callback.apply( object[ i++ ], args ) === false )
break ;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break ;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false ; value = object[++i] ){}
}
return object;
},
prop: function ( elem, value, type, i, name ) {
if ( jQuery.isFunction( value ) )
value = value.call( elem, i );
return typeof value === "number" && type == "curCSS" && !exclude.test( name ) ?
value + "px" :
value;
},
className: {
add: function ( elem, classNames ) {
jQuery.each((classNames || "" ).split(/\s+/), function (i, className){
if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) )
elem.className += (elem.className ? " " : "" ) + className;
});
},
remove: function ( elem, classNames ) {
if (elem.nodeType == 1)
elem.className = classNames !== undefined ?
jQuery.grep(elem.className.split(/\s+/), function (className){
return !jQuery.className.has( classNames, className );
}).join(" " ) :
"" ;
},
has: function ( elem, className ) {
return elem && jQuery.inArray( className, (elem.className || elem).toString().split(/\s+/) ) > -1;
}
},
swap: function ( elem, options, callback ) {
var old = {};
for ( var name in options ) {
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}
callback.call( elem );
for ( var name in options )
elem.style[ name ] = old[ name ];
},
css: function ( elem, name, force ) {
if ( name == "width" || name == "height" ) {
var val, props = { position: "absolute" , visibility: "hidden" , display: "block" }, which = name == "width" ? [ "Left" , "Right" ] : [ "Top" , "Bottom" ];
function getWH() {
val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
var padding = 0, border = 0;
jQuery.each( which, function () {
padding += parseFloat(jQuery.curCSS( elem, "padding" + this , true )) || 0;
border += parseFloat(jQuery.curCSS( elem, "border" + this + "Width" , true )) || 0;
});
val -= Math.round(padding + border);
}
if ( jQuery(elem).is( ":visible" ) )
getWH();
else
jQuery.swap( elem, props, getWH );
return Math.max(0, val);
}
return jQuery.curCSS( elem, name, force );
},
curCSS: function ( elem, name, force ) {
var ret, style = elem.style;
if ( name == "opacity" && !jQuery.support.opacity ) {
ret = jQuery.attr( style, "opacity" );
return ret == "" ?
"1" :
ret;
}
if ( name.match( / float /i ) )
name = styleFloat;
if ( !force && style && style[ name ] )
ret = style[ name ];
else if ( defaultView.getComputedStyle ) {
if ( name.match( / float /i ) )
name = "float" ;
name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
var computedStyle = defaultView.getComputedStyle( elem, null );
if ( computedStyle )
ret = computedStyle.getPropertyValue( name );
if ( name == "opacity" && ret == "" )
ret = "1" ;
} else if ( elem.currentStyle ) {
var camelCase = name.replace(/\-(\w)/g, function (all, letter){
return letter.toUpperCase();
});
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
var left = style.left, rsLeft = elem.runtimeStyle.left;
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px" ;
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return ret;
},
clean: function ( elems, context, fragment ) {
context = context || document;
if ( typeof context.createElement === "undefined" )
context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
var match = /^<(\w+)\s*\/?>$/.exec(elems[0]);
if ( match )
return [ context.createElement( match[1] ) ];
}
var ret = [], scripts = [], div = context.createElement( "div" );
jQuery.each(elems, function (i, elem){
if ( typeof elem === "number" )
elem += '' ;
if ( !elem )
return ;
if ( typeof elem === "string" ) {
elem = elem.replace(/(<(\w+)[^>]*?)\/>/g, function (all, front, tag){
return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
all :
front + ">" + tag + ">" ;
});
var tags = jQuery.trim( elem ).toLowerCase();
var wrap =
!tags.indexOf(") &&
[ 1, "" , "" ] ||
!tags.indexOf(") &&
[ 1, "" , "" ] ||
tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[ 1, "" ] ||
!tags.indexOf(") &&
[ 2, "" ] ||