日: 2015年12月12日

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

まさかできるなんて　これだで　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>