WEBデザインの勉強をしながら、作成したものや、調べた内容を載せていきます。
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
サンプルはこちら
１．zipファイルダウンロードします
ダウンロード(coin-slider)
２．下記２つを取得します
coin-slider.min.js
coin-slider-styles.css
３．画像を配置します、画像の指定
<div id="coin">
<img src="images/a1.jpg" alt="" />
<img src="images/a2.jpg" alt="" />
<img src="images/a3.jpg" alt="" />
<img src="images/a4.jpg" alt="" />
<img src="images/a5.jpg" alt="" />
</div>
４．ｊｓとcssコード
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/coin-slider-styles.css" />
<script>$(document).ready(function() {
$('#coin').coinslider({ hoverPause: false });
});
< /script>
５．coin-slider.min.js の書換え （最後の行の、最後の方）
width:100,
height:190,
spw:15,
sph:5,
delay:3000,
sDelay:20,
opacity:0.7,
titleSpeed:500,
effect:'rain',navigation:true,links:true,hoverPause:true};})(jQuery);
[0回]
PR
