เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

<div id="Pic">
	<div id="img">
										<!-- ภาพที่ 1 -->
               <a href="https://www.mindphp.com/ " target="_blank">
               <img src="picture/cat1.jpg" alt="CAT" />
               <span>
                   <b>Cute Cat</b><br />
                   <small>แมว  เป็นสัตว์เลี้ยงลูกด้วยนม  จะมีรูปร่างขนาดเล็ก ขนาดลำตัวยาว ช่วงขาสั้นและจัดอยู่ในกลุ่มของประเภทสัตว์กินเนื้อ มีเขี้ยวและเล็บแหลมคม                	สามารถหดซ่อนเล็บได้เช่นเดียวกับเสือ สืบสายเลือดมาจากแมวป่าที่มีขนาดใหญ่กว่า ซึ่งลักษณะบางอย่างของแมวยังคงพบเห็นได้ในแมวบ้านปัจจุบัน</small>
               </span>
	              </a>
        <!— ภาพที่ 2 -->
	            <a href="https://www.mindphp.com/" target="_blank">
	            <img src="picture/cat2.jpg" alt="CAT" />
            	<span>
	           	<b>Cute Cat</b><br />
             <small>แมว  เป็นสัตว์เลี้ยงลูกด้วยนม  จะมีรูปร่างขนาดเล็ก ขนาดลำตัวยาว ช่วงขาสั้นและจัดอยู่ในกลุ่มของประเภทสัตว์กินเนื้อ มีเขี้ยวและเล็บแหลมคมสามารถหดซ่อนเล็บได้เช่นเดียวกับเสือ สืบสายเลือดมาจากแมวป่าที่มีขนาดใหญ่กว่า ซึ่งลักษณะบางอย่างของแมวยังคงพบเห็นได้ในแมวบ้านปัจจุบัน</small>
             </span>
             </a>
     </div>
</div

<script type="text/javascript">
        $(document).ready(function() {
        $('#Pic').coinslider();
								});
</script>
<script type="text/javascript">
								$(document).ready(function() {
								$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>

[b] :mrgreen: :mrgreen: Banner Slider and Gallery Slider ทำแกลเลอรีแบบเลื่อนไปมาสวย ๆ ด้วย jQuery :mrgreen: :mrgreen: [/b]


[attachment=1]1.jpg[/attachment]

:arrow: ก่อนอื่นเรียกใช้ไฟล์ CSS และ JS
ดาว์นโหลดไฟล์ css และ js ได้ที่[url=http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/]http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/[/url]
[code]<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />[/code]


:arrow: :arrow: ต่อมาเลือกรูปภาพที่ต้องการแสดงใน Slider

[code]<div id="Pic">
<div id="img">
<!-- ภาพที่ 1 -->
<a href="https://www.mindphp.com/ " target="_blank">
<img src="picture/cat1.jpg" alt="CAT" />
<span>
<b>Cute Cat</b><br />
<small>แมว เป็นสัตว์เลี้ยงลูกด้วยนม จะมีรูปร่างขนาดเล็ก ขนาดลำตัวยาว ช่วงขาสั้นและจัดอยู่ในกลุ่มของประเภทสัตว์กินเนื้อ มีเขี้ยวและเล็บแหลมคม สามารถหดซ่อนเล็บได้เช่นเดียวกับเสือ สืบสายเลือดมาจากแมวป่าที่มีขนาดใหญ่กว่า ซึ่งลักษณะบางอย่างของแมวยังคงพบเห็นได้ในแมวบ้านปัจจุบัน</small>
</span>
</a>
<!— ภาพที่ 2 -->
<a href="https://www.mindphp.com/" target="_blank">
<img src="picture/cat2.jpg" alt="CAT" />
<span>
<b>Cute Cat</b><br />
<small>แมว เป็นสัตว์เลี้ยงลูกด้วยนม จะมีรูปร่างขนาดเล็ก ขนาดลำตัวยาว ช่วงขาสั้นและจัดอยู่ในกลุ่มของประเภทสัตว์กินเนื้อ มีเขี้ยวและเล็บแหลมคมสามารถหดซ่อนเล็บได้เช่นเดียวกับเสือ สืบสายเลือดมาจากแมวป่าที่มีขนาดใหญ่กว่า ซึ่งลักษณะบางอย่างของแมวยังคงพบเห็นได้ในแมวบ้านปัจจุบัน</small>
</span>
</a>
</div>
</div[/code]


:!: :!: เรียกให้ Slider ทำงาน

[code]
<script type="text/javascript">
$(document).ready(function() {
$('#Pic').coinslider();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
[/code]

[attachment=0]2.jpg[/attachment]
:mrgreen: เรียนรู้วิธีการใช้งาน jQuery ได้ที่
:arrow: [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]บทเรียนที่ 1[/url]
:arrow: [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/joomla-extension-dev-eng-2.html]บทเรียนที่ 2[/url]