Rotating Image Slider หมุนภาพสวยๆโชว์ด้วย jQuery

วันก่อนไปดูบทความของ  Mary Lou มาเห็นน่าสนใจเลยลองเอาไปใช้งานดู Work เธอเขียน Code ได้ดีและสวยงามมากผมเลยหยิบเอามาฝากกันนะครับ เป็น Code ของการทำ Photo Gallery แบบหมุนภาพไปเรื่อยๆ สวยดีครับ ใช้ CSS3 กับ jQuery เข้ามาช่วย แต่ผมขอไม่ดัดแปลงอะไรเพิ่มเติมนะครับ เพราะว่าเจ้าของเค้าเขียนมาดีมากแล้ว

Rotating image slider

ลองดู Demo กันก่อนครับ

จากนั้นไป Download Soucecode กันครับ

พอแตกไฟล์ออกมาคุณจะได้ไฟล์ชื่อ index.html กับอีก 3 folder นะครับ จากนั้นให้เข้าไปดู Code กัน

MaryLou เธอเริ่มจาก Code Meta ก่อนนะครับ

        <!– รหัสภาษาที่ใช้  –>
<meta charset=”UTF-8″ />
<!– ส่วนของการเก็บคำบรรยาย  –>
<meta name=”description” content=”Rotating Image Slider with jQuery & CSS3″ />
<!– ส่วนของการเก็บคำค้นสำคัญ  –>
<meta name=”keywords” content=”jquery, rotation, slider, images, slideshow, autoplay, play, pause, css3″/>
<!– ชื่อผู้พัฒนา  –>
<meta name=”author” content=”Codrops” />

จากนั้นเธอใช้ Stylesheet ที่พัฒนาขึ้นมาด้วย CSS3 วางต่อไป

        <!– ที่อยู่ของไฟล์ Stylesheet  –>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<link href=’http://fonts.googleapis.com/css?family=PT+Sans+Narrow’ rel=’stylesheet’ type=’text/css’ />

ต่อมาเป็น Code ของ HTML ที่ใช้แสดงผลนะครับ

        <div>
<!– ส่วนของข้อความ Head ด้านบน  –>
<h1>Rotating Image Slider</h1>
<div>

<!– ส่วนของการแสดงรูปภาพเริ่มต้น  –>
<div id=”rm_container”>
<ul>
<li data-images=”rm_container_1″ data-rotation=”-15″><img src=”images/1.jpg”/></li>
<li data-images=”rm_container_2″ data-rotation=”-5″><img src=”images/2.jpg”/></li>
<li data-images=”rm_container_3″ data-rotation=”5″><img src=”images/3.jpg”/></li>
<li data-images=”rm_container_4″ data-rotation=”15″><img src=”images/4.jpg”/></li>
</ul>

<!– ส่วนของการแสดงรูปภาพปุ่มลูกศรควบคุม  –>
<div id=”rm_mask_left”></div>
<div id=”rm_mask_right”></div>
<div id=”rm_corner_left”></div>
<div id=”rm_corner_right”></div>

<!– ข้อความกลางรูปภาพ  –>
<h2>Rotating Images Slider Show</h2>

<!– ส่วนของการแสดงรูปภาพ  –>
<div style=”display:none;”>
<div id=”rm_container_1″>
<img src=”images/1.jpg”/>
<img src=”images/5.jpg”/>
<img src=”images/6.jpg”/>
<img src=”images/7.jpg”/>
</div>
<div id=”rm_container_2″>
<img src=”images/2.jpg”/>
<img src=”images/8.jpg”/>
<img src=”images/9.jpg”/>
<img src=”images/10.jpg”/>
</div>
<div id=”rm_container_3″>
<img src=”images/3.jpg”/>
<img src=”images/11.jpg”/>
<img src=”images/12.jpg”/>
<img src=”images/13.jpg”/>
</div>
<div id=”rm_container_4″>
<img src=”images/4.jpg”/>
<img src=”images/14.jpg”/>
<img src=”images/15.jpg”/>
<img src=”images/16.jpg”/>
</div>
</div>
</div>
<div>
<a id=”rm_next” href=”#”></a>
<a id=”rm_prev” href=”#”></a>
</div>
<div>
<a id=”rm_play” href=”#”>Play</a>
<a id=”rm_pause” href=”#”>Pause</a>
</div>
</div>

rm_containe เป็นการแสดงรูปภาพตั้งตนนะครับ ซึ่งรูปภาพถูกเก็บเอาไว้ในส่วนของ Images อีกที
ส่วน rm_next กับ rm_prev เป็นการเลื่อนภาพไปเรื่อยๆนะครับ
rm_play และ rm_pause เป็นการสั่งให้เล่นและหยุดภาพครับ
สังเกตุดูตรง ส่วนของการแสดงรูปภาพ  นะครับเค้าจะซ่อนเอาไว้ก่อนด้วย display:none นั้นคือเมื่อกดแล้วจึงจะเรียกใช้ครับ
และผมได้ลองเปลี่ยนข้อความที่โชว์ไว้ที่ด้านบน และที่อยู่ขวามือให้ดูนะครับ จะได้เป็นว่าเปลี่ยนตรงไหน

มาดู Code Css กันบ้างครับ
ใน Folder CSS จะประกอบไปด้วยไฟล์ 2 ไฟล์ ซึ่งไฟล์แรกคือ reset.css นั้นเป็นไฟล์ที่ถูกดึงขึ้นมาเพื่อล้างค่า CSS เดิมต่างๆที่ถูกตั้งไว้ก่อนหน้าแล้วนะครับ และในส่วนของไฟล์ style เป็นตัวกำหนดใหม่ครับ

โดยที่ไฟล์ reset นั้นเค้าทำการตั้งให้ทุกอย่างเป็นค่าเริ่มต้นครับ

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}

นี่เป็นตัวอย่างนะครับ แล้วเรามาดูส่วนของ style.css กันต่อ

เค้าเริ่มจากการดึงไฟล์ reset เข้ามาก่อน

@import url('reset.css');

จากนั้นก็เริ่มกำหนดค่าสวนของ Body พื้นหลัง font Link นะครับ

body{
background:#f0f0f0;
color:#000;
font-family: ‘PT Sans Narrow’, Arial, sans-serif;
font-size:16px;
}
a{
color:#000;
text-decoration:none;
}
h1{
padding:10px;
margin:20px;
font-size:40px;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
color:#333;
background:transparent url(../images/line.png) repeat-x bottom left;
}

จากนั้นตรง main wrapper ใน body ใช้ Code แบบนี้ครับ

.rm_wrapper{
width:1160px;
margin:0 auto;
position:relative;
}

ส่วน code ตรงที่แสดงรูปภาพเค้าส่วนไว้ก่อน

.rm_container{
width:1050px;
overflow:hidden;
position:relative;
height:530px;
margin:0 auto;
}

ส่วนของ Header ที่แสดงข้อความด้านบนรูปใช้ชุดนี้ครับ

.rm_container h2{
background:transparent url(../images/lines.png) repeat top left;
padding:10px 30px;
position:absolute;
bottom:170px;
right:0px;
color:#000;
font-size:36px;
text-transform:uppercase;
text-shadow:1px 0px 1px #fff;
}

ส่วนของการหมุนภาพหรือ Rotating ใช้

.rm_mask_right, .rm_mask_left{
position: absolute;
height: 110px;
background: #f0f0f0;
width: 530px;
bottom: -30px;
left: 0px;
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rm_mask_right{
left:auto;
right:0px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
background: #f0f0f0;
position:absolute;
width:200px;
height:100px;
bottom:0px;
left:-65px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.rm_corner_right{
left:auto;
right:-65px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

ส่วนของการควบคุม navigation elements ใช้แบบนี้ครับ

.rm_nav a{
position:absolute;
top:200px;
width:38px;
height:87px;
cursor:pointer;
opacity:0.7;
}
.rm_nav a:hover{
opacity:1.0;
}
.rm_nav a.rm_next{
background:transparent url(../images/next.png) no-repeat top left;
right:0px;
}
.rm_nav a.rm_prev{
background:transparent url(../images/prev.png) no-repeat top left;
left:0px;
}

ส่วนสุดท้ายก็คือ pause/play control ครับใช้ Code ตามนี้

.rm_controls{
position:absolute;
top:0px;
left:-40px;
height:20px;
}
.rm_controls a{
cursor:pointer;
opacity:0.7;
padding-left:24px;
font-size:16px;
text-transform:uppercase;
height:20px;
float:left;
line-height:20px;
}
.rm_controls a:hover{
opacity:1.0;
}
.rm_controls a.rm_play{
display:none;
background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
background:transparent url(../images/pause.png) no-repeat center left;
}

Javascript ทั้งหมดที่ใช้ก็ตามนี้เลยครับ

    //difference of animation time between the items
var    timeDiff            = 300,
//time between each image animation (slideshow)
slideshowTime        = 3000,
slideshowInterval,
//checks if the images are rotating
isRotating            = false,
//how many images completed each slideshow iteration
completed            = 0,
/*
all our images have 310 of width and 465 of height.
this could / should be dynamically calculated
if we would have different image sizes.

we will set the rotation origin at
x = width/2 and y = height*2
*/
origin                = ['155px', '930px'],
init                = function() {
configure();
initEventsHandler();
},
//initialize some events
initEventsHandler    = function() {
/*
next and previous arrows:
we will stop the slideshow if active,
and rotate each items images.
1     rotate right
-1     rotate left
*/
$rm_next.bind(‘click’, function(e) {
stopSlideshow();
rotateImages(1);
return false;
});
$rm_prev.bind(‘click’, function(e) {
stopSlideshow();
rotateImages(-1);
return false;
});
/*
start and stop the slideshow
*/
$rm_play.bind(‘click’, function(e) {
startSlideshow();
return false;
});
$rm_pause.bind(‘click’, function(e) {
stopSlideshow();
return false;
});
/*
adds events to the mouse and left / right keys
*/
$(document).bind(‘mousewheel’, function(e, delta) {
if(delta > 0) {
stopSlideshow();
rotateImages(0);
}
else {
stopSlideshow();
rotateImages(1);
}
return false;
}).keydown(function(e){
switch(e.which){
case 37:
stopSlideshow();
rotateImages(0);
break;
case 39:
stopSlideshow();
rotateImages(1);
break;
}
});
},
/*
rotates each items images.
we set a delay between each item animation
*/
rotateImages        = function(dir) {
//if the animation is in progress return
if(isRotating) return false;

isRotating = true;

$listItems.each(function(i) {
var $item                 = $(this),
/*
the delay calculation.
if rotation is to the right,
then the first item to rotate is the first one,
otherwise the last one
*/
interval            = (dir === 1) ? i * timeDiff : (totalItems – 1 – i) * timeDiff;

setTimeout(function() {
//the images associated to this item
var    $otherImages        = $(‘#’ + $item.data(‘images’)).children(‘img’),
totalOtherImages    = $otherImages.length;

//the current one
$img                = $item.children(‘img:last’),
//keep track of each items current image
current                = $item.data(‘current’);
//out of bounds
if(current > totalOtherImages – 1)
current = 0;
else if(current < 0)
current = totalOtherImages – 1;

//the next image to show and its
//initial rotation (depends on dir)
var otherRotation    = (dir === 1) ? ‘-30deg’ : ’30deg’,
$other            = $otherImages.eq(current).clone();

//for IE <= 8 we will not rotate,
//but fade out / fade in …
//better than nothing
if(!ieLte8)
$other.css({
rotate    : otherRotation,
origin    : origin
});

(dir === 1) ? ++current : –current;

//prepend the next image to the <li>
$item.data(‘current’, current).prepend($other);

//the final rotation for the current image
var rotateTo        = (dir === 1) ? ’80deg’ : ‘-80deg’;

if(!ieLte8) {
$img.animate({
rotate    : rotateTo
}, 1200, function(){
$(this).remove();
++completed;
if(completed === 4) {
completed = 0;
isRotating = false;
}
});
$other.animate({
rotate    : ’0deg’
}, 600);
}
else {
$img.fadeOut(1200, function(){
$(this).remove();
++completed;
if(completed === 4) {
completed = 0;
isRotating = false;
}
});
}

}, interval );
});

},
//set initial rotations
configure            = function() {
if($.browser.msie && !ieLte8)
rotateMaskCorners();
else if(ieLte8)
hideMaskCorners();

$listItems.each(function(i) {
//the initial current is 1
//since we already showing the first image
var $item = $(this).data(‘current’, 1);

if(!ieLte8)
$item.transform({rotate: $item.data(‘rotation’) + ‘deg’})
.find(‘img’)
.transform({origin: origin});
});
},
//rotates the masks and corners
rotateMaskCorners    = function() {
$rm_mask_left.transform({rotate: ‘-3deg’});
$rm_mask_right.transform({rotate: ’3deg’});
$rm_corner_left.transform({rotate: ’45deg’});
$rm_corner_right.transform({rotate: ‘-45deg’});
},
//hides the masks and corners
hideMaskCorners        = function() {
$rm_mask_left.hide();
$rm_mask_right.hide();
$rm_corner_left.hide();
$rm_corner_right.hide();
},
startSlideshow        = function() {
clearInterval(slideshowInterval);
rotateImages(1);
slideshowInterval    = setInterval(function() {
rotateImages(1);
}, slideshowTime);
//show the pause button and hide the play button
$rm_play.hide();
$rm_pause.show();
},
stopSlideshow        = function() {
clearInterval(slideshowInterval);
//show the play button and hide the pause button
$rm_pause.hide();
$rm_play.show();
};
return {init : init};

ไม่ขออธิบายทั้งหมดนะครับ เพราะเยอะมากจริงๆ เอาเป็นวาลองเอาไปปรับใช้งานดูน่าจะดีกว่า
ขอบคุณเจ้า้ Code คุณ MaryLou ด้วยนะครับ

ขอบคุณที่ติดตามครับ