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

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

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

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

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

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

1
class="respo_img"

をつける。

ヘッッダー内に

1
2
3
4
5
6
7
8
<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けした ややこしいで

1
2
3
4
5
6
7
8
9
10
11
12
13
.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;}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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 スライダー 改ページフェード出ない様に

1
2
3
4
5
6
7
8
9
10
11
12
<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">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--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クエリ カルーセル ラミール ベストセラー商品など

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--カルーセルスライダー-->
 
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>