ブログのヘダーをスライドショーにする方法 [画像]

HTMLに下記をコピー<head>の下に貼り付ける♣

imagesMP3629OV.jpg スライドショー完成
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 2000, function() { $active.removeClass('active last-active'); });} $(function() {setInterval( "slideSwitch()", 3000 );}); </script"><script type="text/javascript"> $(document).ready(function(){$("#slideshow").appendTo(".skinHeaderArea");}) </script"> <div id="slideshow"> 画像1画像は width="1000" height="300" 画像2画像は width="1000" height="300" 画像3画像は width="1000" height="300" </div>



CSSの最後に下記を貼り付ける



■ スライドショー用 CSS*/
#slideshow{
position:relative;
width:1px;
height:200px;
}
#slideshow img{
position:absolute;
top:0px;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
</style type="text/css">


.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 20;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 1px;
left:px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top:30;
left: 1px; /*position where enlarged image should offset horizontally */

}

</style>



Sponsored Link

ソネットブログのヘッダー簡単スライドショー [画像]

HTMLに下記をコピー<head>の下に貼り付ける♣


1スライドショーは簡単.jpg

スライドショー完成


<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">

function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
});}
$(function() {setInterval( "slideSwitch()", 3000 );});
</script><script type="text/javascript">
$(document).ready(function(){$("#slideshow").appendTo(".skinHeaderArea");})
</script">

<div id="slideshow">

画像1画像は width="1000" height="300"
画像2画像は width="1000" height="300"
画像3画像は width="1000" height="300"
画像4画像は width="1000" height="300"
</div>




■ スライドショー用 CSS*/
#slideshow{
position:relative;
width:1px;
height:200px;
}
#slideshow img{
position:absolute;
top:0px;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
</style type="text/css">


.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 20;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 1px;
left:px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top:30;
left: 1px; /*position where enlarged image should offset horizontally */

}

</style>



Sponsored Link