Scribd
Upload
36 views2 pages

Url1 Url2 Url3 Url4 Url5 Url6 Url7 Url8

The document contains code for an image slider or carousel. It includes HTML markup defining an outer container div with id "ayax1", an inner div with id "ayaximages" to hold the images, and a div with id "ayaxlinks" to hold the navigation buttons. There is also CSS styling the elements and positions and a JavaScript function to move the inner image container left on click of the nav buttons.

Uploaded by

awtoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views2 pages

Url1 Url2 Url3 Url4 Url5 Url6 Url7 Url8

The document contains code for an image slider or carousel. It includes HTML markup defining an outer container div with id "ayax1", an inner div with id "ayaximages" to hold the images, and a div with id "ayaxlinks" to hold the navigation buttons. There is also CSS styling the elements and positions and a JavaScript function to move the inner image container left on click of the nav buttons.

Uploaded by

awtoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<div id="ayax1"><div id="ayaximages" style="left: -3000px; ">

<a href="URL1" ><img src="URLIMAGE1"></a>


<a href="URL2" ><img src="URLIMAGE2"></a>
<a href="URL3" ><img src="URLIMAGE3"></a>
<a href="URL4" ><img src="URLIMAGE4"></a>
<a href="URL5" ><img src="URLIMAGE5"></a>
<a href="URL6" ><img src="URLIMAGE6"></a>
<a href="URL7" ><img src="URLIMAGE7"></a>
<a href="URL8" ><img src="URLIMAGE8"></a>
</div></div><div id="ayaxlinks">
<a onclick="srcANIMayax(0);" href="javascript:void(0);">1</a>
<a onclick="srcANIMayax(1);" href="javascript:void(0);">2</a>
<a onclick="srcANIMayax(2);" href="javascript:void(0);">3</a>
<a onclick="srcANIMayax(0);" href="javascript:void(0);">4</a>
<a onclick="srcANIMayax(1);" href="javascript:void(0);">5</a>
<a onclick="srcANIMayax(2);" href="javascript:void(0);">6</a>
<a onclick="srcANIMayax(6);" href="javascript:void(0);">7</a>
<a onclick="srcANIMayax(7);" href="javascript:void(0);">8</a></div>

<style>
#ayax1 { height: 375px; width: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
-moz-border-shadow: 0 0 10px black;
border-shadow: 0 0 10px black;
-webkit-border-shadow: 0 0 10px black;
-o-border-shadow: 0 0 10px black;
}
#ayaximages { position:absolute;
left: 0; top: 0;
width: 3500px;
moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s.ease-in-out;
-o-transition:all 1s.ease-in-out;
transition:all 1s ease-in-out;
}
/* las imgenes, tamao height y width*/
#ayaximages img {-moz-transition:all 4s ease-in-out;
-webkit-transition:all 4s.ease-in-out;
-o-transition:all 4s.ease-in-out;
transition:all 4s ease-in-out;
height: 375px;
width: 500px;
}

/* Ahora los botones , donde se cambia la visualizacin y colores*/
#ayaxlinks {padding: 7px 0;
width: 600px;
background-image: none;
background-repeat: repeat-x;
background-color: #;
border: 1px #000000:;
text-align: center;
margin-right: 250px;}
/* el HOVER al pasar el mouse sobre los botones*/
#ayaxlinks:hover {padding: 7px 0;width: 600px;background-image: none;background-
repeat: repeat-x;background-color: #;border: 1px #000000:;text-align: center;margin-
top:1px;}
/* EL COLOR DE EL TEXTO/LINKS */
#ayaxlinks a { background-color: #292929; border-radius: 8px; box-shadow: 0 0 5px
#292929; margin: 0 2px; padding: 10px 10px; text-decoration: none;}
/* HOVER DE LOS LINKS AL PASAR EL MOUSE */
#ayaxlinks a:hover { box-shadow: 0 0 8px #292929; color: white; text-shadow:2px 2px
2px; black}
</style>
<script>
//<![CDATA[
function srcANIMayax(num) {
var mover = num * 500;
document.getElementById("ayaximages").style.left = -mover + "px";
}
//]]>
</script>

You might also like