はてなブックマーク

レスポンシブ対応、超軽量jQueryスライダー FlexSlider2 下記からダウンロード //flexslider.woothemes.com/ jQueryの読み込み jQuery本体は最新バージョンで動かなかったので1.10.2まで落としました。CSSも同梱されているので必要に応じて読み込んでください。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="flexslider2/jquery.flexslider-min.js"></script> html <div class="flexslider"> <ul class="slides"> <li><img src="slide1.jpg" /></li> <li><img src="

訪問時にフェードイン 別ページへのリンクをクリックでフェードアウト html head内でjqueryの読み込み <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> フェードインさせたい要素に任意のid フェードアウト時のリンク。今回はli a※classなどで指定してもOKです。 <div id="wrapper"> <div id=""><p>フェードインさせたいコンテンツの内容</p></div> <ul> <!-- クリックイベントでli aをクリックするとフェードアウトしてから移動 -- > <li><a href="#">リンクa</a></li> <li><a href="#">リンクb</a></li> </ul> </div> javascript

2枚目以降の画像もブラウザの幅全体に表示。 コントローラー（next/prev）クリック後に自動再生をする。 html 画像の幅と高さを指定 <div id="image-bloc"> <ul class="slider"> <li class="slide"><img src="../img/01.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/02.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/03.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/04.jpg" w