Imágenes aleatorias con botones
- 1. cargar archivo para descargar
http://www.youtube.com/watch?v=ZW0EmxV2WLE
Para colocar un reproductor mp3 en la parte inferior
WWW.scmplayer.net
colores en html
http://html-color-codes.info/codigos-de-colores-hexadecimales/
COMO HACER UNA PRESENTACION CON BOTONES
1))))))
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src=/slideshow/imgenes-aleatorias-con-botones/20896492/"URL_IMAGEN_1.jpg" /></a>
<a href="#"><img src="URL_IMAGEN_2" /></a>
<a href="#"><img src="URL_IMAGEN_3" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
</div>
</div>
se puede aumentar mas de 3 imágenes añadiendo en los siguientes campos
<a href="#"><img src=/slideshow/imgenes-aleatorias-con-botones/20896492/"URL_IMAGEN_1.jpg" /></a>
<a href="#" rel="1">1</a>
2)))))
Debemos tener el jQuery agregado en nuestro head:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'
type='text/javascript'/>
Y debajo:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({left: -image_reelPosition}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {$active = $('.paging a:first');}
rotate();
}, 7000); // este es el valor que define la velocidad (7 segundos)
};
- 2. rotateSwitch();
$(".image_reel a").hover(function() {clearInterval(play);}, function()
{rotateSwitch();});
$(".paging a").click(function() {$active = $
(this);clearInterval(play);rotate();rotateSwitch();return false;});
});
//]]>
</script>
Y añadir algo de código CSS:
<style>
.main_view { /* el contendor principal */
position: relative;
}
.window { /* el contendor con las imágenes */
overflow: hidden;
position: relative;
/* debemos dimensionarlo */
height: 175px;
width: 550px;
}
.image_reel { left: 0; position: absolute; top: 0; }
.image_reel img {
float: left;
/* conviene dimensionarlas */
height: 175px;
width: 550px;
}
.paging { /* la navegación a gusto de cada uno */
background-color: rgba(146, 0, 0, 0.5);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#80920000,endColorstr=#
80920000);
zoom: 1;
border-radius: 4px;
bottom: 10px;
display: none;
height: 42px;
line-height: 40px;
position: absolute;
right: 10px;
text-align: center;
width: 178px;
z-index: 100;
}
.paging a { /* los números */
color: #FFF;
font-size: 20px;
padding: 5px;
text-decoration: none;
}
.paging a.active {
background: #920000;
border: 1px solid #610000;
border-radius: 3px;
font-weight: bold;
}
.paging a:hover { font-weight: bold; }
![rotateSwitch();
$(".image_reel a").hover(function() {clearInterval(play);}, function()
{rotateSwitch();});
$(".paging a").click(function() {$active = $
(this);clearInterval(play);rotate();rotateSwitch();return false;});
});
//]]>
</script>
Y añadir algo de código CSS:
<style>
.main_view { /* el contendor principal */
position: relative;
}
.window { /* el contendor con las imágenes */
overflow: hidden;
position: relative;
/* debemos dimensionarlo */
height: 175px;
width: 550px;
}
.image_reel { left: 0; position: absolute; top: 0; }
.image_reel img {
float: left;
/* conviene dimensionarlas */
height: 175px;
width: 550px;
}
.paging { /* la navegación a gusto de cada uno */
background-color: rgba(146, 0, 0, 0.5);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#80920000,endColorstr=#
80920000);
zoom: 1;
border-radius: 4px;
bottom: 10px;
display: none;
height: 42px;
line-height: 40px;
position: absolute;
right: 10px;
text-align: center;
width: 178px;
z-index: 100;
}
.paging a { /* los números */
color: #FFF;
font-size: 20px;
padding: 5px;
text-decoration: none;
}
.paging a.active {
background: #920000;
border: 1px solid #610000;
border-radius: 3px;
font-weight: bold;
}
.paging a:hover { font-weight: bold; }](https://image.slidesharecdn.com/imgenesaleatoriasconbotones-130509220321-phpapp02/85/Imagenes-aleatorias-con-botones-2-320.jpg)
