投稿 ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script>
(function($) {
function setimage(){
(function($) {
function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;
$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});
if (win_ratio > 1.5){ //画像の比率が大きかったら
$(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
var winwidth = $(".Opening").width();
var imgheight = winwidth*0.66;
var winheight = $(".Opening").height();
var imgtopmargin = (imgheight-winheight)/2;
$(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){ //画像の比率が小さかったら
var imgwidth = ((height/800))*1200;
var winwidth = $(".Opening").width();
var imgmargin = (winwidth-imgwidth)/2;
$(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}
//slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
duration:5000,
step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
duration:5000,
step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log('resized');
setimage();
}, 200);
});
})(jQuery);
<div class="Opening"> <ul> <li><span><img class="Opening__img" src="img/1_drtftgyuhij.jpg" alt=""></span><img class="Opening__text" src="img/tite_01.png" alt=""></li> <li><span><img class="Opening__img" src="img/2_HIRO95_yuubaenokage.jpg" alt=""></span><img class="Opening__text" src="img/tite_02.png" alt=""></li> <li><span><img class="Opening__img" src="img/3_adsfagsrethdter.jpg" alt=""></span><img class="Opening__text" src="img/tite_03.png" alt=""></li> </ul> <!-- /.Opening --></div>
/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
}
.Opening ul li img.Opening__text{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
max-width: inherit;
width: 100%;
height: auto;
}
投稿 ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます は CodingMania に最初に表示されました。
]]>投稿 slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="slick/slick.css" type="text/css" media="all" /> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/main.js"></script>
$(function() {
//slick
$(".slider-for01").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
//arrows: false,
fade: true,
adaptiveHeight: true,
asNavFor: '.slider-nav01'
});
$(".slider-nav01").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: '.slider-for01',
//centerMode: true,
focusOnSelect: true
});
$(".slider-for02").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
//arrows: false,
fade: true,
adaptiveHeight: true,
asNavFor: '.slider-nav02'
});
$(".slider-nav02").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: '.slider-for02',
//centerMode: true,
focusOnSelect: true
});
$(".slider-for03").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
//arrows: false,
fade: true,
adaptiveHeight: true,
asNavFor: '.slider-nav03'
});
$(".slider-nav03").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: '.slider-for03',
//centerMode: true,
focusOnSelect: true
});
//枚数がカルーセルに満たない場合
$(function() {
$(".mod_slide").each(function() {
var slidepak = $(this);
var image = $(slidepak).find(".mod_slide_img");
var num = $(slidepak).find(".mod_slide_img img").length;
var dots = $(slidepak).find(".slick-dots li");
var navimglast = $(slidepak).find("div.mod_slide_nav div.slick-track>div.slick-slide:last-child");
var prevbtn = $(slidepak).find("button.slick-prev");
var nextbtn = $(slidepak).find("button.slick-next");
var slidernav = $(slidepak).find(".mod_slide_nav .slick-track>div");
//
if (num < 8) {
$(dots).click(function() {
$(slidernav).removeClass("slick-current");
var indexnum = $(dots).index(this) + 1;
var checkimg = $(slidepak).find(".mod_slide_nav .slick-track>div:nth-child(" + indexnum + ")");
$(checkimg).addClass("slick-current");
});
function currmove() {
$(slidernav).removeClass("slick-current");
var curr = $(slidepak).find(".slick-dots li.slick-active");
var currIndex = $(dots).index(curr) + 1;
var btncheckimg = $(slidepak).find(".mod_slide_nav .slick-track>div:nth-child(" + currIndex + ")");
$(btncheckimg).addClass("slick-current");
}
$(prevbtn).click(function() {
currmove();
});
$(nextbtn).click(function() {
currmove();
});
// On swipe event
$(image).on('swipe', function(event, slick, direction) {
currmove();
// left
});
}
});
});
});
<div class="mod_slide"> <div class="mod_slide_img slider-for01"> <div><img src="img/01.jpg" /></div> <div><img src="img/02.jpg" /></div> <div><img src="img/03.jpg" /></div> <div><img src="img/04.jpg" /></div> <div><img src="img/05.jpg" /></div> <div><img src="img/06.jpg" /></div> <div><img src="img/07.jpg" /></div> <div><img src="img/08.jpg" /></div> <div><img src="img/09.jpg" /></div> </div> <div class="mod_slide_nav slider-nav01"> <div><img src="img/01.jpg" /></div> <div><img src="img/02.jpg" /></div> <div><img src="img/03.jpg" /></div> <div><img src="img/04.jpg" /></div> <div><img src="img/05.jpg" /></div> <div><img src="img/06.jpg" /></div> <div><img src="img/07.jpg" /></div> <div><img src="img/08.jpg" /></div> <div><img src="img/09.jpg" /></div> </div> <!-- //mod_slide --></div>
@charset "utf-8";
/* mod_body
-----------------------------------------*/
.mod_body{
margin: 0 auto;
width: 967px;
margin-top: 50px;
}
.mod_body p{
margin: 20px 0 20px 0;
}
/* mod_slide
-----------------------------------------*/
.mod_slide{
margin:0 auto;
width:706px;
margin-bottom: 50px;
}
.mod_slide .mod_slide_nav .slick-slide{
margin:5px;
}
.mod_slide .mod_slide_nav .slick-slide img{
width:100%;
height:auto;
box-sizing:border-box;
border:solid 2px #FFF;
cursor: pointer;
}
.mod_slide .mod_slide_nav .slick-slide.slick-current img{
border:solid 2px #f5a711;
}
.slick-initialized .slick-slide {
overflow:hidden;
}
/* slick-list */
.mod_slide_nav .slick-list {
margin: 0 30px 0 30px;
}
/* slick-dots */
.slick-dots {
margin-top: 10px;
display: block;
list-style: outside none none;
padding: 0;
text-align: center;
width: 100%;
}
.slick-dots li {
cursor: pointer;
display: inline-block;
height: 20px;
margin: 0 5px;
padding: 0;
position: relative;
width: 15px;
}
.slick-dots li button {
background: transparent none repeat scroll 0 0;
border: 0 none;
color: transparent;
cursor: pointer;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
outline: medium none;
padding: 5px;
width: 20px;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: medium none;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
opacity: 1;
}
.slick-dots li button::before {
color: black;
content: "●";
font-size: 28px;
height: 20px;
left: 0;
line-height: 20px;
opacity: 0.25;
position: absolute;
text-align: center;
top: 0;
width: 15px;
}
.slick-dots li.slick-active button::before {
color: black;
opacity: 0.55;
font-size: 34px;
}
/* */
.slick-prev, .slick-next {
background: transparent none repeat scroll 0 0;
border: medium none;
color: transparent;
cursor: pointer;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
margin-top: -30px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
z-index:9;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
background: transparent none repeat scroll 0 0;
color: transparent;
outline: medium none;
}
.slick-prev:hover::before, .slick-prev:focus::before, .slick-next:hover::before, .slick-next:focus::before {
opacity: 1;
}
.slick-prev.slick-disabled::before, .slick-next.slick-disabled::before {
opacity: 0.25;
}
.slick-prev::before, .slick-next::before {
color: #666;
font-size: 20px;
line-height: 1;
opacity: 0.75;
}
.slick-prev {
left: 0px;
}
[dir="rtl"] .slick-prev {
left: auto;
right: 0px;
}
.slick-prev::before {
content: " \f053";
font-family: FontAwesome;
}
[dir="rtl"] .slick-prev::before {
content: " \f054";
font-family: FontAwesome;
}
.slick-next {
right: 0px;
}
[dir="rtl"] .slick-next {
left: 0px;
right: auto;
}
.slick-next::before {
content: " \f054";
font-family: FontAwesome;
}
[dir="rtl"] .slick-next::before {
content: " \f053";
font-family: FontAwesome;
}
投稿 slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー は CodingMania に最初に表示されました。
]]>投稿 サムネイルの画像をクリックで拡大・切り替え・表示します！[キャプション付] は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
// JavaScript Document
$(function() {
$(".mod_thumlist").each(function() {
var click_flg = false;
var photoH = $(this).find(".mod_thumlist_photo_entry img").innerHeight();
var captionH = $(this).find(".mod_thumlist_photo_entry p").innerHeight();
$(this).find(".mod_thumlist_photo").css("height", photoH + captionH + "px");
var linkbtn = $(this).find("ul li a");
var bigimgwrap = $(this).find(".mod_thumlist_photo");
$(linkbtn).click(function() {
if (click_flg == false) {
click_flg = true;
$(bigimgwrap).prepend("<div class=\"mod_thumlist_photo_entry\"><img src='" + $(this).attr("href") + "' alt='" + $(this).attr("title") + "'><p>" + $(this).attr("title") + "</p>");
var removeimg = $(bigimgwrap).find(".mod_thumlist_photo_entry:eq(1)");
$(removeimg).stop(true, false).fadeOut("fast", function() {
$(this).remove();
click_flg = false;
});
click_flg = false;
return false;
} else {
return false;
}
});
});
});
<div class="mod_thumlist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="オレンジのキャプション"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li> <li><a href="img/image02.jpg" title="グリーンのキャプション"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li> <li><a href="img/image03.jpg" title="ピンクのキャプション"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li> <li><a href="img/image04.jpg" title="ブルーのキャプション"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li> </ul> <div class="mod_thumlist_photo"> <div class="mod_thumlist_photo_entry"> <img src="img/image01.jpg" alt="orange" width="700" height="350"> <p>オレンジのキャプション</p> <!-- / .mod_thumlist_photo_entry --></div> <!-- / .mod_thumlist_photo --></div> <!-- / .mod_thumlist --></div>
/*
-----------------------------------------*/
.mod_thumlist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.mod_thumlist li a{
display:block;
}
.mod_thumlist li a:link {}
.mod_thumlist li a:visited {}
.mod_thumlist li a:hover {opacity:0.8;}
.mod_thumlist li a:active {opacity:0.8;}
/* IE—p «*/
.mod_thumlist li a:hover img {filter:alpha(opacity=80);}
.mod_thumlist_photo{
}
.mod_thumlist_photo_entry{
position:absolute;
width:700px;
}
投稿 サムネイルの画像をクリックで拡大・切り替え・表示します！[キャプション付] は CodingMania に最初に表示されました。
]]>投稿 [キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li a");
var image = set.find(".mainimglist img");
var cap = set.find(".mainimglist p");
// hover時
$(btn).hover(function(){
$(image).attr("src",$(this).attr("href")).fadeIn();
$(image).attr("alt",$(this).attr("title"));
$(cap).text($(this).attr("title"));
});
//クリック時
$(".thumbnaillist a").click(function(){
return false;
});
});
});
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="オレンジ画像のキャプション"><img src="img/thumbnail01.jpg" width="60" height="60" alt=""></a></li> <li><a href="img/image02.jpg" title="グリーン画像のキャプション"><img src="img/thumbnail02.jpg" width="60" height="60" alt=""></a></li> <li><a href="img/image03.jpg" title="ピンク画像のキャプション"><img src="img/thumbnail03.jpg" width="60" height="60" alt=""></a></li> <li><a href="img/image04.jpg" title="ブルー画像のキャプション"><img src="img/thumbnail04.jpg" width="60" height="60" alt=""></a></li> </ul> <!-- thumbnaillist_end --></div>
/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:20px 0 0 0;
}
.mainimglist img{
}
投稿 [キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使ってサムネイルが付いたスライドショー は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script>
$(function() {
$('.mod_carousel ul').carouFredSel({
auto : 4000,
items: 1,
scroll: {
items : 1,
//easing : "swing",
fx : "crossfade",
duration : 800
},
pagination: {
container: '.mod_pager',
anchorBuilder: function( nr ) {
var src = $("a img",this).attr('src');
return '<a href="#" class="new_thumb' + nr + '"><img src="' + src + '" width="150px" /><span></span></a>';
}
}
});
});
</script>
<div class="mod_mainslide"> <div class="mod_carousel"> <ul> <li><a href="#"><img src="img/slide_01.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_02.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_03.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_04.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_05.jpg" width="960" height="350" alt="" /></a></li> </ul> <!-- /new_carousel --></div> <div class="mod_pager"></div> <!-- /mod_mainslide --></div>
.mod_mainslide {
width:960px;
margin:50px auto 0 auto;
}
.mod_carousel ul{
height:350px;
overflow:hidden;
}
.mod_carousel li {
width:960px;
display: block;
float: left;
}
.mod_pager{
margin:10px 0 0 0;
text-align:center;
}
.mod_pager a{
margin:0 5px 0 5px;
border:solid 1px #999;
display:inline-block;
}
.mod_pager a.selected{
border:solid 1px #333;
}
投稿 carouFredSel[jquery]を使ってサムネイルが付いたスライドショー は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使ってタブをクリックできるスライドショー は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$('#carousel').carouFredSel({
auto : 3000,
pagination :{container: '#pager',
anchorBuilder: function() {
return '<a href="#" class="'+ $(this).prop("class") +'"></a>';
}
},
// スタート位置を指定できる
// items:{
// start: -1,
// },
scroll : {
items : 1,
fx : "fade",
duration : 800,
}
});
});
</script>
<div class="mod_mainslide"> <div class="mod_mainslide_wrap"> <ul id="carousel" class="ex_clearfix"> <li class="menu01"><a href="#"><img src="img/slide_01.jpg" width="952" height="350" alt="" /></a></li> <li class="menu02"><a href="#"><img src="img/slide_02.jpg" width="952" height="350" alt="" /></a></li> <li class="menu03"><a href="#"><img src="img/slide_03.jpg" width="952" height="350" alt="" /></a></li> <li class="menu04"><a href="#"><img src="img/slide_04.jpg" width="952" height="350" alt="" /></a></li> <li class="menu05"><a href="#"><img src="img/slide_05.jpg" width="952" height="350" alt="" /></a></li> </ul> <div id="pager"></div> <!-- /mod_mainslide_wrap --></div> <!-- /mod_mainslide --></div>
/* carousel
-----------------------------------------*/
.mod_mainslide {
width:952px;
margin:50px auto 0 auto;
border:4px solid #333;
}
.mod_mainslide_wrap {
position:relative;
width:952px;
height:350px;
}
.caroufredsel_wrapper{
margin-top:0px!important;
}
#carousel ul{
height:350px;
overflow:hidden;
}
#carousel li {
width:952px;
display: block;
float: left;
}
#pager {
position:absolute;
top:-49px;
left:-4px;
}
#pager a {
float:left;
width:127px;
height:45px;
padding:0 2px 0 0;
display:block;
}
#pager a.menu01{
background:transparent url('../img/slide_nav01.png') no-repeat left top;
}
#pager a.menu01.selected{
background:transparent url('../img/slide_nav01_current.png') no-repeat left top;
}
#pager a.menu02{
background:transparent url('../img/slide_nav02.png') no-repeat left top;
}
#pager a.menu02.selected{
background:transparent url('../img/slide_nav02_current.png') no-repeat left top;
}
#pager a.menu03{
background:transparent url('../img/slide_nav03.png') no-repeat left top;
}
#pager a.menu03.selected{
background:transparent url('../img/slide_nav03_current.png') no-repeat left top;
}
#pager a.menu04{
background:transparent url('../img/slide_nav04.png') no-repeat left top;
}
#pager a.menu04.selected{
background:transparent url('../img/slide_nav04_current.png') no-repeat left top;
}
#pager a.menu05{
background:transparent url('../img/slide_nav05.png') no-repeat left top;
}
#pager a.menu05.selected{
background:transparent url('../img/slide_nav05_current.png') no-repeat left top;
}
投稿 carouFredSel[jquery]を使ってタブをクリックできるスライドショー は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使った前後のスライドをグレーアウトするスライドショー。 は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$('#carousel').carouFredSel({
width: '100%',
auto:4000,
prev : "#slide_prev",
next : "#slide_next",
items: {
visible: 3,
start: -1
},
scroll: {
items : 1,
onBefore: function( data ) {
data.items.old.eq(1).removeClass('selected');
data.items.visible.eq(1).addClass('selected');
},
easing : "swing",
duration : 800
},
visible:{
min:3,
max:3
},
pagination: {
container: '#pager',
deviation: 1
}
});
});
</script>
</script>
<div class="mod_mainslide"> <div class="mod_mainslide_wrap"> <ul id="carousel" class="ex_clearfix"> <li><a href="#"><img src="img/slide_01.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_02.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_03.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_04.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_05.jpg" width="960" height="350" alt="" /></a></li> </ul> <div id="pager"></div> <a class="prev" id="slide_prev" href="#"><span>prev</span></a> <a class="next" id="slide_next" href="#"><span>next</span></a> <!-- /mod_mainslide_wrap --></div> <!-- /mod_mainslide --></div>
/* carousel
-----------------------------------------*/
.mod_mainslide {
min-width: 960px;
height: 350px;
overflow: hidden;
position: relative;
}
.mod_mainslide_wrap {
position: absolute;
width: 2880px;
min-width: 2880px;
left: 50%;
margin-left: -1440px;
}
#carousel li { float: left; }
#pager {
position: absolute;
z-index: 999;
top: 320px;
left: 0px;
width: 100%;
text-align: center;
}
#pager a {
display: inline-block;
margin: 0 10px;
width: 13px;
height: 13px;
background: url('../img/bg_sprite.png') no-repeat -200px 0px;
}
#pager a.selected { background-position: -200px -13px; }
#pager a span { display: none; }
#slide_prev span, #slide_next span { display: none; }
#slide_prev, #slide_next {
display: block;
width: 960px;
height: 350px;
position: absolute;
top:0px;
}
#slide_prev {
left:0px;
background: url('../img/bg_nav.png') no-repeat left top;
}
#slide_next {
left:1920px;
background: url('../img/bg_nav.png') no-repeat left top;
}
投稿 carouFredSel[jquery]を使った前後のスライドをグレーアウトするスライドショー。 は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使ったカルーセル は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$("#carouselpanel").carouFredSel({
auto : false,
prev : "#panelslide_prev",
next : "#panelslide_next",
items: {
visible: 4
}
});
});
</script>
<div class="mod_slidepanel"> <ul id="carouselpanel" class="ex_clearfix ex_opaity"> <li><a href="#"><img src="img/panel_01.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li> <li><a href="#"><img src="img/panel_02.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li> <li><a href="#"><img src="img/panel_03.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li> <li><a href="#"><img src="img/panel_04.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li> <li><a href="#"><img src="img/panel_05.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li> <!-- /carouselpanel --></ul> <a class="prev" id="panelslide_prev" href="#"><span>prev</span></a> <a class="next" id="panelslide_next" href="#"><span>next</span></a> <!-- /mod_slidepanel --></div>
/* carousel
-----------------------------------------*/
.mod_slidepanel {
margin: 0 auto;
position: relative;
width: 990px;
}
#carouselpanel li{
position:relative;
width:240px;
height: 150px;
margin: 0 10px 0 0;
background-color: #FFF;
float: left;
font-size:93%; /* 12px */
}
#carouselpanel li a{
display:block;
}
#carouselpanel li a span{
display:inline-block;
padding:8px 15px 0 15px;
}
#carouselpanel li a:link {color:#000; text-decoration:none;}
#carouselpanel li a:visited {color:#000; text-decoration:none;}
#carouselpanel li a:hover {color:#000; text-decoration:underline;}
#carouselpanel li a:active {color:#000; text-decoration:underline;}
#panelslide_prev span,
#panelslide_next span{
display: none;
}
#panelslide_prev,
#panelslide_next{
display:block;
width:33px;
height:55px;
position:absolute;
top:40px;
}
#panelslide_prev{
left:-33px;
background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#panelslide_next{
left:993px;
background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}
投稿 carouFredSel[jquery]を使ったカルーセル は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使ったページナビ・ページ送りのあるスライドショー は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$(function() {
$('#carousel').carouFredSel({
auto : 4000,
prev : "#slide_prev",
next : "#slide_next",
//responsive: true,
items: {
visible: 1,
width: 960,
height: 350
},
scroll: {
items : 1,
easing : "swing",
//fx : "crossfade",
duration : 800
},
pagination: '#pager'
});
});
});
</script>
<div id="mainslide"> <div id="mainslide_wrap"> <ul id="carousel" class="ex_clearfix"> <li><img src="img/slide_01.jpg" width="960" height="350" alt="" /></li> <li><img src="img/slide_02.jpg" width="960" height="350" alt="" /></li> <li><img src="img/slide_03.jpg" width="960" height="350" alt="" /></li> <li><img src="img/slide_04.jpg" width="960" height="350" alt="" /></li> <li><img src="img/slide_05.jpg" width="960" height="350" alt="" /></li> </ul> <div id="pager"></div> <a class="prev" id="slide_prev" href="#"><span>prev</span></a> <a class="next" id="slide_next" href="#"><span>next</span></a> <!-- /mainslide_wrap --></div> <!-- /mainslide --></div>
/* carousel
-----------------------------------------*/
#mainslide {
}
#mainslide_wrap {
position:relative;
margin:0 auto;
width:960px;
}
#carousel li {
float: left;
}
#pager {
position: absolute;
z-index:999;
top: 320px;
left:0px;
width: 960px;
text-align: center;
}
#pager a {
display: inline-block;
margin: 0 10px;
width: 13px;
height: 13px;
background: url('../img/bg_sprite.png') no-repeat -200px 0px;
}
#pager a.selected{
background-position: -200px -13px;
}
#pager a span {
display: none;
}
#slide_prev span,
#slide_next span{
display: none;
}
#slide_prev,
#slide_next{
display:block;
width:33px;
height:57px;
position:absolute;
top:150px;
}
#slide_prev{
left:10px;
background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#slide_next{
left:915px;
background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}
投稿 carouFredSel[jquery]を使ったページナビ・ページ送りのあるスライドショー は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$(function() {
$('#thumbs').carouFredSel({
synchronise: ['#images ul', false, true],
auto: true,
width: 719,
items: {
visible: 5,
start: -2
},
scroll: {
items : 1,
onBefore: function( data ) {
data.items.old.eq(2).removeClass('selected');
data.items.visible.eq(2).addClass('selected');
}
},
prev: '#prev',
next: '#next'
});
$('#images ul').carouFredSel({
auto: false,
items: 1,
scroll: {
fx: 'crossfade'
}
});
$('#thumbs img').click(function() {
$('#thumbs').trigger( 'slideTo', [this, -2] );
});
$('#thumbs img:eq(2)').addClass('selected');
});});
</script>
<div id="slidewrapper">
<div id="images">
<ul>
<li><a href="#"><img src="img/slide_01.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_02.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_03.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_04.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_05.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_06.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_07.jpg" width="719" height="354" alt=""></a></li>
</ul>
</div>
<div id="thumbs">
<img src="img/slide_01.jpg" width="110" height="54" alt="">
<img src="img/slide_02.jpg" width="110" height="54" alt="">
<img src="img/slide_03.jpg" width="110" height="54" alt="">
<img src="img/slide_04.jpg" width="110" height="54" alt="">
<img src="img/slide_05.jpg" width="110" height="54" alt="">
<img src="img/slide_06.jpg" width="110" height="54" alt="">
<img src="img/slide_07.jpg" width="110" height="54" alt="">
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
/* slidewrapper */
#slidewrapper {
position: relative;
background-color: #fff;
border: 1px solid #C9CACA;
width: 719px;
height: 449px;
overflow: hidden;
}
#slidewrapper ul li {
display: block;
float: left;
}
#images { overflow: hidden; }
#thumbs {
height: 70px;
overflow: hidden;
}
#images {
width: 721px;
height: 354px;
}
#thumbs { }
#thumbs img {
width: 110px;
height: 54px;
margin: 20px 7px 0 7px;
cursor: pointer;
}
#thumbs img.selected {
opacity: 0.8;
-ms-filter: "alpha( opacity=80 )";
filter: alpha(opacity=80);
}
#prev {
width: 15px;
height: 21px;
display: block;
background: transparent url("../img/bg_carousel_right.png") no-repeat 0 0;
position: absolute;
left: 695px;
bottom: 37px;
}
#next {
width: 15px;
height: 21px;
display: block;
background: transparent url("../img/bg_carousel_left.png") no-repeat 0 0;
position: absolute;
left: 15px;
bottom: 37px;
}
投稿 carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー は CodingMania に最初に表示されました。
]]>