Jquery ทำภาพสไลด์โชว์

Posted: July 19, 2010 in Jquery
Tags: , , ,

วิธีการทำ ภาพสไลด์โชว เดียวนี้ไม่ใช้แฟลช แระ ใช้ ่jquery เลย ง่ายๆๆครับ
ก็อบโค็ตโลด

ตัวอย่าง

1. ก่อนอื่นโหลดไฟล์ ไปดูกันก่อนเลย easyslide.zip

คราวนี้มาดูเลยครับ ในส่วนแรก

2.ยัด โค็ต java ไปในส่วน head ก่อนเลย   สองบรรทัดแรก คือเรียก ไฟล์ java มาใช้ จากที่โหลดไป บรรทักที่ 3 คือการลิงค์ ไฟล์ CSS เข้ามาใช้

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/easySlider1.7.js”></script>
<link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” /><br />

3. ต่อไปใส่ ชุดนี้ลงไป ส่วน headเหมือนเดิม

<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true
});
});
</script>

4.ต่อไปส่วน body นะ

<div id=”container”>
<div id=”content”>
<div id=”slider”>
<ul>
<li><a href=”http://templatica.com/preview/30″><img src=”images/01.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://templatica.com/preview/7″><img src=”images/02.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://templatica.com/preview/25″><img src=”images/03.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://templatica.com/preview/26″><img src=”images/04.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://templatica.com/preview/27″><img src=”images/05.jpg” alt=”Css Template Preview” /></a></li>
</ul>
</div>
</div>
</div>

ลองดุนะครับ

เพิ่มรูปก็ แบบนี้นะ

<li><a href=”http://templatica.com/preview/27″><img src=”images/05.jpg” alt=”Css Template Preview” /></a></li>

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/easySlider1.7.js”></script>
<link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” /><br />
<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true
});
});
</script>
Comments
  1. iiinumwan says:

    ขอบคุณมาก ๆ เลยนะคะ

  2. funikio says:

    ขอบคุณค่ะ อยากให้สอนเกี่ยวกับการแต่งเว็บด้วย j อีก เยอะๆค่ะ

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s