jquery desplazamiento horizontal intermitente de múltiples imágenes
"http://www.w3.org/TR/xhtml11/DTD/xhtml11 .dtd"gt;
lt;html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="es"gt;
lt;headgt;
lt;meta?http-equiv="content-type"?content="text/html;?charset=utf-8"?
lt;titlegt ;Imagen?Gallerylt;/titlegt;
lt;script?type="text/javascript"?src="jquery.min.js"gt;lt;/scriptgt )
lt;scriptgt;
//?JavaScript?Document
$(document).ready(function(e)?{ /*** No es necesario el desplazamiento automático, simplemente desplácese Remove***/ time?=?window.setInterval(function(){ $('.og_next').click();? }, 5000 /*** No es necesario el desplazamiento automático, solo muévalo excepto*); **/ linum?=?$('.mainlist?li').length;//número de imágenes w?=??linum?*?250;//ul ancho $('.piclist').css (' ancho',?w?' px'); //ancho ul $('.swaplist').html($('.mainlist').html()); //copiar contenido $('.og_next ') .click(function(){ if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop (verdadero , true); } if($('.mainlist?li').lengthgt; 4){//Más de 4 imágenes
ml?=?parseInt($('.mainlist') .css ('left')); //posición predeterminada de la imagen ul
sl?=?parseInt($('.swaplist').css('left')); //intercambia la posición de la imagen ul
if(mllt;=0?amp;amp;?mlgt;w*-1){//Imagen predeterminada cuando se muestra
$('.swaplist').css ({left ：?' 1000px'}); //intercambia la imagen en el lado derecho del área de visualización
$('.mainlist').animate({left:?ml??1000? ? 'px' },'slow'); //Desplazamiento de imagen predeterminado
if(ml==(w-1000)*-1){/imagen predeterminada en la última pantalla
n $('.swaplist').animate({left:?'' 0px'}, 'slow'); //intercambiar desplazamiento de imagen
}
}else{/ /intercambiar imagen cuando se muestra
$('.mainlist').css({left：???' 1000px'})//la imagen predeterminada se coloca a la derecha del área de visualización
$('.swaplist').animate({left：?1000? ?' px'},'slow'); //intercambiar desplazamiento de imagen
if(sl==(w- 1000)*-1){/intercambiar imagen en la última pantalla $('.mainlist').animate({left:?'' 0px'}, 'slow'); //desplazamiento de imagen predeterminado
}
}} }) }) $('.og_prev').click(function(){ if($('.swaplist, .mainlist').is('.animated')) {
$('.swaplist, .mainlist').stop(true, true } if($('.mainlist?li').lengthgt; 4){
sl?=?parseInt($('.swaplist').css('left') );
if(mllt;=0?amp;amp;?mlgt;w*-1){
$('.swaplist').css({izquierda：? w?*?-1? ?' px'});
$('.mainlist').animate({left:?ml? ?1000? ?' px'},'slow') ;
if(ml==0){ $('.swaplist').animate({left：?(w?-?1000)?*?-1? ?' px'},' lento');
}
}else{
$('.mainlist').css({izquierda:?(w?-?1000) ?*?-1? ?' px'});
$('.swaplist').animate({left:?sl? ?1000? ?' px'},'slow');
if(sl==0){$('.mainlist').animate({left:?0px'},'slow');
}
} } })
});
$(document).ready(function(){ $('.og_prev,.og_next').hover(función( ) {
$(this).fadeTo('rápido', 1 }, función(){
$(this).fadeTo('rápido', 0.7); })
})
lt;/scriptgt;
.lt;stylegt;
p>
cuerpo, ul, li{?padding: 0; ?margin: 0;}
ul, li{?list-style: none;}
img{ ?border: ninguno; }
a{?color: #6cf;}
a:hover{?color: #84B263;}
.box{ ?ancho:980px;?margin:0?auto;?posición: relativa;?overflow:hidden;?height:100;}
.picbox{?width: 980px;?height: 115px;?overflow : oculto; ?Posición: relativa;}
.piclist{?Altura: 115px; ?Posición: absoluta; ?Izquierda: ?Arriba: 0px}
. :-3000px; ?arriba: 0px}
.og_prev, .og_next{?ancho: 30px; ?alto: 50px; ?fondo: url(./images/icon.png)? ?antecedentes: url(./images/icon.png)?../images/icon_ie6.png)?no-repeat\9;?position:absolute;?top:33px;?z-index:99;?cursor: puntero; filtro: alfa(opacidad=70);?opacidad: 0.7;}
.op>.op>.op>.op>.op>.op>.op>.
.og_prev{?fondo-posición: 0?-60px;?izquierda: 4px;}
.og_next{?fondo-posición: 0?0;?derecha: 4px;}
lt;/stylegt.
lt;/headgt;
lt;bodygt;
lt;div?class="box"gt; lt;div?class="picbox"gt;lt;ul?class="piclist?mainlist"gt;
lt;ligt;lt;a?href="#"?target="_blank" gt;lt;img?src="images/1.jpg"?width="220"?height="105"?/gt;lt;/agt;lt;/ligt;
lt; ligt;lt;a?href="#"?target="_blank"gt;lt;img?src="images/2.jpg"?width="220"?height="105"/gt;lt;/ agt;lt;/ligt;
lt;ligt;lt;a?href="#"?target="_blank"gt;lt;img?src="images/3.jpg"?width ="220"?height="105"/gt;lt;/agt;lt;/ligt;
lt;ligt;lt;a?href="#"?target="_blank"gt ;lt;img?src="images/4.jpg"?width="220"?height="105"/gt;/agt;lt;/ligt;
<p>lt;ligt;lt;a?href="#"?target="_blank"gt;lt;img?src="images/1.jpg"?width="220"?height="105"/gt ;lt;/agt;lt;/ligt;
lt;ligt;lt;a?target="_blank"gt;lt;img?src="images/2.jpg"?width=" 220"?height="105"/gt;lt;/agt;lt;/ligt;
lt;ligt;lt;a?href="#"?target="_blank"gt;lt ;img?src="images/3.jpg"?width="220"?height="105"/gt;lt;/a gt;lt;/ligt;
lt;ligt;lt ;a?href="#"?target="_blank"gt;lt;img?src="images/4.jpg"?width="220"?height="105"/gt;lt;/agt;lt ;/ligt; lt;/ulgt;
lt;ul?class="piclist?swaplist"gt;lt;/ulgt;/divgt;div?class="og_prev"gt; lt /divgt; lt;div?