สวัสดีครับผม ในวันนี้ Davinci ขอเสนอ วิธีการทำ Slide Image Show แบบง่ายๆ แต่เก๋ไก๋ไม่เบาเลยทีเดียว
มาลองทำกันดูเลยนะ >[]<

สำหรับ Slide ในเว็บ Watch.myreadyweb.com นั้น เป็น Java Script ซึ่งวิธีการทำนั้นก็ไม่ยากครับ
Slide นี้ สามารถใส่ใน editor ส่วนใดของเว็บก็ได้ครับ ในที่นี้ ผมจะใส่ที่ ไฮไลท์บาร์ ด้านบนนะครับ

ขั้นที่ 1 เมื่อ login เข้าสู่ระบบจัดการเว็บไซท์แล้ว ให้เข้าไปที่เมนู ระบบไฮไลท์บาร์ > แก้ไข ไฮไลท์บาร์ ด้านบน
จากนั้น ใส่โค้ดต่อไปนี้ลงไปครับ

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://myreadyweb.com/js/jquery.aw-showcase.min.js" ></script>
<script type="text/javascript">
$(document).ready(function()

{
	$("#showcase").awShowcase(
	{
		content_width:			750,   /* ค่าความกว้างของรูปที่จะแสดง แก้ไขได้ตามต้องการ */
		content_height:			345,   /* ค่าความสูงของรูปที่จะแสดง แก้ไขได้ตามต้องการ */

		hundred_percent:		false,
		auto:					true,
		interval:				4000,
		continuous:				true,
		loading:				true,
		buttons:				true,
		btn_numbers:			true,
		keybord_keys:			true,
		mousetrace:				false,
		pauseonover:			true,
		transition:				'hslide', /* hslide/vslide/fade */
		transition_delay:		0,
		transition_speed:		500,
		show_caption:			'onload', /* onload/onhover/show */
		dynamic_height:			false,
		speed_change:			true,
		viewline:				false
	});
});
</script>

<div id="featured">

<div id="showcase" class="showcase">
    
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="ลิงค์ที่อยู่ของรูปที่ต้องการ"/>
			</div>
			<div class="showcase-caption">
				 
			</div>
		</div>
        
		<div class="showcase-slide">

<div class="showcase-content">
				<img src="ลิงค์ที่อยู่ของรูปที่ต้องการ"/>
			</div>
			<div class="showcase-caption">
				 
			</div>
		</div>
        
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="ลิงค์ที่อยู่ของรูปที่ต้องการ"/>
</div>

<div class="showcase-caption">
				 
			</div>
		</div>

		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="ลิงค์ที่อยู่ของรูปที่ต้องการ"/>
		</div>

<div class="showcase-caption">
				 
			</div>
		</div>
        
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="ลิงค์ที่อยู่ของรูปที่ต้องการ"/>
		</div>
			<div class="showcase-caption">
				 
			</div>

</div>
                
	</div>
</div>

จากนั้นก็กด Submit ได้เลยครับ

ขั้นที่ 2 จากนั้น เราจะมาใส่โค้ด CSS เพื่อควบคุมหน้าตาของ Slide กันนะครับ ให้ไปที่เมนู จัดรูปแบบการแสดงผล > แก้ไข CSS 
เลือก เปิดใช้งาน ก่อนนะครับ แล้วใส่โค้ด CSS นีี้ ลงไปครับ


#featured{width:750px; height:345px; overflow:hidden; float:left;}  /* เปลี่ยนค่าตัวเลขสีแดง ให้สัมพันธ์กับขนาดความกว้างและสูงของรูปตามต้องการ */
.showcase{position:relative;}.showcase-caption{padding:8px 15px; position:absolute; bottom:0; right:0; display:none; background:url(images/bg.png);}
.showcase-caption a{color:#fff;}
.showcase-button-wrapper{position:absolute; bottom:25px; left:35px;}
.showcase-button-wrapper span{display:block; float:left; width:10px; height:10px; cursor:pointer; text-indent:-5000px; margin:0 10px 0 0; background:url(http://www.myreadyweb.com//storage/2/6696/images/gallery/content/content_11722_1370508694.png);}
.showcase-button-wrapper span.active{background:url(http://www.myreadyweb.com//storage/2/6696/images/gallery/content/content_11723_1748732032.png);}

จากนั้นกด Submit ก็เรียบร้อยโรงเรียน MyReadyWeb ครับ ง่ายๆแค่นี้เอง
ลองทำดูนะครับ ได้ผลอย่างไร อย่าลืมเอามาอวดให้เพื่อนๆชมบ้างนะครับ >///<

 ตอนนี้ทำเสร็จแล้วครับดูกันได้ที่ http://goodlove.myreadyweb.com ครับ

ตัวอย่างโค้ดครับ
<script type="text/javascript" src="http://myreadyweb.com/js/cycle/jquery.cycle.all.min.js"></script><script type="text/javascript">
$(document).ready(function(){


$('.main_ads').cycle({
fx: 'fade',
speed: 'slow', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 5000,
startingSlide: 0

});

$(".main_ads").mouseover(function(){
$(this).cycle('pause');
}).mouseout(function(){
$(this).cycle('resume');
});


});
</script>
<div class="main_ads" id="hilight">

<a href="http://myreadyweb.com/package.html">
<img src="http://myreadyweb.com/images/front/hilight1.jpg" style="width: 445px; height: 122px;" title="เว็บสำเร็จรูป ที่ MyReadyWeb.com" /></a>
<a href="http://myreadyweb.com/package.html">
<img src="http://myreadyweb.com/images/front/hilight2.jpg" style="width: 444px; height: 121px;" title="เว็บสำเร็จรูป ที่ MyReadyWeb.com" /></a>
<a href="http://myreadyweb.com/web_design.html">
<img src="http://myreadyweb.com/images/front/hilight3.jpg" style="width: 443px; height: 121px;" title="เว็บสำเร็จรูป ที่ MyReadyWeb.com" /></a>

</div>

ครับขอบคุณมากก
http://goodlove.myreadyweb.com
http://dacoffee.myreadyweb.com

สอบถามเรื่องนอกเหนือจากกระทู้หัวข้อนี้ได้ไหมคะ เพราะเว็บมาสเตอร์ไม่ทำงานวันหยุดแน่เลยค่ะ ไม่รู้จะถามใครดี ^^

อยากสอบถามว่า.. พอจะทราบไหมคะว่า ..
'ถ้าสมัครเป็นแบบแพ็คเกจอื่นๆ ที่ไม่ใช่ฟรี ไม่ทราบว่า ค่าใช้จ่ายจะมีนอกเหนือจากราคาที่ให้ไว้ตามแพ็คเกจเพิ่มอีกหรือเปล่าคะ'

ขอบคุณมากนะคะ

 

  อ้างอิงจาก rakteakwood 3 ก.ย. 2554, 21:02   

สอบถามเรื่องนอกเหนือจากกระทู้หัวข้อนี้ได้ไหมคะ เพราะเว็บมาสเตอร์ไม่ทำงานวันหยุดแน่เลยค่ะ ไม่รู้จะถามใครดี ^^

อยากสอบถามว่า.. พอจะทราบไหมคะว่า ..
'ถ้าสมัครเป็นแบบแพ็คเกจอื่นๆ ที่ไม่ใช่ฟรี ไม่ทราบว่า ค่าใช้จ่ายจะมีนอกเหนือจากราคาที่ให้ไว้ตามแพ็คเกจเพิ่มอีกหรือเปล่าคะ'

ขอบคุณมากนะคะ
 

 
โทรสอบถามได้ครับผม ^_^

ถ้าสมัคร Package อื่นๆ ก็ราคาตามหน้าเว็บเลยครับ ไม่มีค่าใช้จ่ายอื่นๆแล้วครับ อ้อ ถ้าจะมีก็แค่ VAT 7% น่ะครับ

 คุณ Davinci คะ !!!! .. โค้ดของคุณ คือว่า เลข 12345 ของสไลด์มันโชว์มาอยู่ด้านนอกสไลด์ค่ะ จะใส่โค้ดอะไรเพิ่มให้ไปอยู่ในมุมของรูปภาพได้คะ นั่งแก้นานแล้วแต่ไม่ได้เลยค่ะ  ^^

 เค้าจะเห็นกระทู้นี้มั้ยอ่า .. ไม่เห็นแน่เลย

ต้องขออภัยคุณ rakteakwood ด้วยครับ เนื่องจากโค้ด CSS ที่ใช้ควบคุมหน้าตาของ Slide
รวมไปถึงปุ่มตัวเลข 1 2 3 4 5 นั้น ถูกลบออกไป ทำให้โค้ดไม่สมบูรณ์ และเกิดการแสดงผลที่ผิดพลาด
ตอนนี้ได้ทำการแก้ไขโค้ดชุดที่ถูกต้องแล้วครับผม
คุณ rakteakwood สามารถลองทำตามที่ผมโพสต์ไว้ได้เลยครับ

ขออภัยในความผิดพลาดครับผม ^^ หากติดขัดปัญหา ณ จุดใดสามารถแจ้งทางทีมงานได้ทันทีครับผม

 ขอบคุณคร๊าาาา ^^ .. ที่จริงมีอีกหลายสไลด์ใน jQuery  น่าทำมากเลยค่ะ แต่นั่งดูโค้ดมาหลายวันแล้ว ทำไม่ได้ซักที 555+ มันยากไปสำหรับมือใหม่ เอิ้กๆๆ ช่วงนี้ไม่ค่อยว่าง เลยไม่ได้โพส นั่งงมเว็บตัวเองอยู่ มึนขนาด ^___^ แล้วจะแวะมารบกวนใหม่นะคะ 55+ 
ขอบคุณค่ะ ^___^

 ยินดีครับผม แล้วอย่าลืมเอาเว็บมาแบ่งให้ชมบ้างนะครับ ^^

ได้ค๊า ^^

คุณ Davinci คับ ถ้าผมจะให้ใน1หน้ามีslide 2 อันตรงส่วนไฮไลท์บาร์ กับส่วนข้อมูลตรงหน้าแรกจะต้องทำยังไงอ่ะคับ???

 

 <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
  codebase='http://active.macromedia.com/flash8/cabs/swflash.cab#version=8,0,0,0'
  id='name' width='360' height='270'>
  <param name='movie' value='http://www.yourdomain.com/filname.swf'>
  <param name='quality' value='high'>
  <param name='wmode' value='transparent'>
  <embed name='name' src='http://www.yourdomain.com/filename.swf'
 quality='high' wmode='transparent' width='360' height='270'
  type='application/x-shockwave-flash' 
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash'>
  </embed>
</object>