Foros del Web » Programando para Internet » Javascript »

Para no repetir tanto código

Estas en el tema de Para no repetir tanto código en el foro de Javascript en Foros del Web. Tengo un slider que usé hace tiempo y necesito usarlo nuevamente en un nuevo proyecto, esta vez necesito que la página tenga varios sliders (deslizadores ...
  #1 (permalink)  
Antiguo 14/07/2014, 18:15
 
Fecha de Ingreso: julio-2014
Mensajes: 2
Antigüedad: 9 años, 11 meses
Puntos: 0
Pregunta Para no repetir tanto código

Tengo un slider que usé hace tiempo y necesito usarlo nuevamente en un nuevo proyecto, esta vez necesito que la página tenga varios sliders (deslizadores de imágenes), cuando lo uso para uno solo si funciona pero al agregar otro u otros más ya no funciona. ¿Podrán ayudarme con este rompecabezas?

Este es el código:

jssor_slider1_starter = function (containerId) {
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 900, $FlyDirection: 1, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $ScaleHorizontal: 0.6, $Opacity: 2 };
_CaptionTransitions["R"] = { $Duration: 900, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $ScaleHorizontal: 0.6, $Opacity: 2 };
_CaptionTransitions["T"] = { $Duration: 900, $FlyDirection: 4, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $ScaleVertical: 0.6, $Opacity: 2 };
_CaptionTransitions["B"] = { $Duration: 900, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $ScaleVertical: 0.6, $Opacity: 2 };
_CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
_CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8 } };
_CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5 } };
_CaptionTransitions["RTTL|BR"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $FlyDirection: 10, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $ScaleHorizontal: 0.6, $ScaleVertical: 0.6, $Opacity: 2, $Round: { $Rotate: 0.8 } };
_CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
_CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic } };
_CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic } };

var options = {
$FillMode: 5,
$AutoPlay: false,
$AutoPlayInterval: 4000,
$PauseOnHover: 1,

$ArrowKeyNavigation: true,
$SlideEasing: $JssorEasing$.$EaseOutQuint,
$SlideDuration: 1200,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$DisplayPieces: 1,
$ParkingPosition: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 1,

$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
},

$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$AutoCenter: 1,
$Steps: 1,
$Lanes: 1,
$SpacingX: 8,
$SpacingY: 8,
$Orientation: 1
},

$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 1,
$AutoCenter: 2,
$Steps: 1
}
};

var jssor_slider1 = new $JssorSlider$(containerId, options);

function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));
else
$JssorUtils$.$Delay(ScaleSlider, 30);
}

ScaleSlider();
$JssorUtils$.$AddEvent(window, "load", ScaleSlider);


if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$JssorUtils$.$OnWindowResize(window, ScaleSlider);
}

};


Y éste es el HTML :

<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 600px; overflow: hidden; border: 1px solid #000">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
</div>
<div data-u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 600px; overflow: hidden;">
<div>
<img data-u="image" src="images/photos/arte/01.jpg" alt="Abrazo" />
</div>
<div>
<img data-u="image" src="images/photos/arte/02.jpg" alt="Abrazo 2" />
</div>
<div>
<img data-u="image" src="images/photos/arte/03.jpg" alt="Abrazo 3" />
</div>
</div>

<div data-u="navigator" class="jssorb21" style="position: absolute; bottom: 26px; left: 6px;">
<div data-u="prototype" style="POSITION: absolute; WIDTH: 19px; HEIGHT: 19px; text-align:center; line-height:19px; color:White; font-size:12px;"></div>
</div>

<span data-u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
</span>
<span data-u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
</span>
<a style="display: none" href="http://www.jssor.com">javascript</a>
</div>
<script>
jssor_slider1_starter('slider1_container');
</script>


Como verán es mucho código para repetirlo si necesito 5 deslizadores :(

Etiquetas: funcion, html, js, repetir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:13.