タグ: スライダー

レスポンシブルdivスライダー　完成系へ

クロスブラウザで　挙動がおかしかったので
自力で　やったら　できた。　夢みたいだわ。

まさかできるなんて　これだで　webはおもろい

まず
今までのdivスライダーに戻す。
viewer ul li のやつ

ほんとはcss整理したほうがよさそうだが
あえて
あとからcssほとんどあてた。

まずちゃんとしたサイズの画像があることが必須
あとその画像にそいつだけのクラスをつけれること
キャラリーの縦横比の基準になる画像に

class="respo_img"

をつける。

ヘッッダー内に

<script type="text/javascript">
$(window).on('load resize', function(){
var w = ($('.viewer ul li img.respo_img').height());
$('.viewer ul li').height(w);
$('.viewer ul').height(w);
$('.viewer').height(w);
});
</script>

こうやって書いた。
例のサイドバーのやつの応用な

ドル　クラスとかで指定　縦を取得
ドル　クラスとかで指定　縦を入れ替える

みたいにできるらしい
多分Jクエリ

そんで
基準のcss
440は1200のときのmax画像たかさ

ページ読み込み時、全部読み込んでから高さがかわるもんで
ガチャンみたいになるのが見苦しいで
その下はメディアスクリーンで
いちお高さを指定してなるべくガチャンが気にならんようにした。
main_contents_top_fadeのmin-hightは元のcssけした　ややこしいで

.viewer,
.viewer ul,
.viewer ul li{ height:440px;
min-height:inherit;
min-height:auto;}

@media screen and (max-width: 1100px) {.viewer,
.viewer ul,
.viewer ul li{ height:363px;}}

@media screen and (min-width: 1100px) and (max-width: 1200px) {.viewer,
.viewer ul,
.viewer ul li{ height:395px;}}



<script type="text/javascript">
$(function(){
	var $setElm = $('.viewer'),
	fadeSpeed = 1500,
	switchDelay = 5000;

	$setElm.each(function(){
		var targetObj = $(this);
		var findUl = targetObj.find('ul');
		var findLi = targetObj.find('li');
		var findLiFirst = targetObj.find('li:first');

		findLi.css({display:'block',opacity:'0',zIndex:'99'});
		findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

		setInterval(function(){
			findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
		},switchDelay);
	});
});
</script>

<!--TOPフェード-->
<script type="text/javascript">
$(document).ready(function() {
$('.viewer').fadeIn(0);
});
</script>

TOP スライダー　改ページフェード出ない様に

<div id="main_contents_top_fade">
<div id="main_contents_top">
<img src="img/top/jc_top2-04.jpg" width="1000" height="343">
<img src="img/top/jc_top2-01.jpg" width="1000" height="343">
<img src="img/top/jc_top2-03.jpg" width="1000" height="343">
<img src="img/top/jc_top2-02.jpg" width="1000" height="343">
<img src="img/top/jc_top2-05.jpg" width="1000" height="343">
<img src="img/top/jc_top2-08.jpg" width="1000" height="343">
<img src="img/top/jc_top2-07.jpg" width="1000" height="343">
<img src="img/top/jc_top2-06.jpg" width="1000" height="343"> 
</div id="main_contents_top">
</div id="main_contents_top">

#main_contents_top_fade {
	width: 1000px;
	height: 343px;
	margin-bottom: 20px;
	}
#main_contents_top {
	width: 1000px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	height: 343px;	/*display: none;*/
	background-color: #FFF;
	display: none;
}
#main_contents_top img {
	top: 0;
	left: 0;
	position: absolute;
}

<!--TOPフェード-->
<script type="text/javascript">
$(function(){
	var setImg = '#main_contents_top';
	var fadeSpeed = 1500;
	var switchDelay = 5000;

	$(setImg).children('img').css({opacity:'0'});
	$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

	setInterval(function(){
		$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
	},switchDelay);
});
</script>   

<!--フェードイン-->
<script type="text/javascript">
$(document).ready(function() {
$('#main_contents_top').fadeIn(0);
});
</script>

Jクエリ　カルーセル　ラミール　ベストセラー商品など

<!--カルーセルスライダー-->

<script type="text/javascript" src="js/jquery.jcarousel.min.js" ></script>

<script type="text/javascript">
jQuery(document).ready(function() {
　jQuery('#mycarousel').jcarousel({
　　// 表示設定
　　scroll: 1,
　　auto: 2,
　　wrap: 'both',
　});
});
</script>
<div id="mycarousel">
    <ul>

<li>
<p class="img"><a><img></a></p>
<p class="title"><a>タイトル</a></p>
</li>

<li>
<p class="img"><a><img></a></p>
<p class="title"><a>タイトル</a></p>
</li>





</ul>
</div>