DAD UNION – WEBエンジニア同盟

世のWEBエンジニアを手助けするテック系サイト

NEW ARTICLE
社内SE不在の町の中小企業で御用聞き【副業SEの仕事開拓】
  1. HOME
  2. jQuery
  3. jquery.coverscroll：複数画像を横一列に少し重ねてスライドし、真ん中画像のみ強調表示するJs

jquery.coverscroll：複数画像を横一列に少し重ねてスライドし、真ん中画像のみ強調表示するJs

NO IMAGE

選択した画像が真ん中に移動し、強調されます。また複数画像は左右にスライドします。

目次

1．ヘッダーとJavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.coverscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#idCs').coverscroll();
});
</script>

2．CSSの記述例

<style type="text/css">
<!--
#idCs{
	width:1000px;
	height:280px;
}

-->
</style>

3．HTMLの記述例

<div id="idCs">
    <img src="i1.jpg" alt="">
    <img src="i2.jpg" alt="">
    <img src="i3.jpg" alt="">
    <img src="i4.jpg" alt="">
    <img src="i5.jpg" alt="">
    <img src="i6.jpg" alt="">
    <img src="i7.jpg" alt="">
    <img src="i8.jpg" alt="">
    <img src="i9.jpg" alt="">
    <img src="i10.jpg" alt="">
</div>

jquery.coverscroll：複数画像を横一列に少し重ねてスライドし、真ん中画像のみ強調表示させるデモページ

ソース元：CoverScroll jQuery plugin