|
 |
| |
ถามเรื่อง java script ผมทำ ภาพให้เลื่อนขึ้น ครับ คือตอนนี้มันเลื่อนขึ้นแล้วพอครบแล้วภามันจะขาว |
| |
 |
|
|
 |
 |
|
ขอบคุณครับจะลองดู
|
 |
 |
 |
 |
| Date :
2009-09-28 10:36:07 |
By :
jack |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
แล้วท้าเอาเม้าไปโดนแล้วมันหยุดอะครับ
|
| |
|
|
| |
| Date :
2009-09-28 11:55:42 |
By :
jack |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมลองแล้วทำไมขึ้นมาแป๊บเดียวเอง
|
| |
|
|
| |
| Date :
2009-09-28 15:04:41 |
By :
wit |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อะไรคือขึ้นมาแปปเดียวครับ หมายถึงหยุดรอดูรูปภาพหรอ
|
| |
|
|
| |
| Date :
2009-09-28 15:54:30 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
หวัดดีคับผมไปหาตาม กลูเกิ้ลก็เลยมาเจอเวปนี้
จากโค้ดที่พี่ xbeginner01 ผมลองเอาไปทำดูแล้ว มันก็ใช้ได้นะคับ
แต่เวลาเปลี่ยนเป็นให้สไลด์รุปตามแนวนอน รูปมันต่ออยู่ด้านล่างด้วยอะคับ
จะทำไงให้มันต่อด้านข้างสไลด์ยาวเลยอะคับ
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เช็คให้แล้วครับ ก็ไม่มีปัญหานิ อันนี้เปลี่ยนจากซ้ายไปขวาลองดูครับ
อัพเดทใหม่เปลี่ยนตำแหน่งใส่ภาพแค่ใน img_name ไม่ต้องใส่ภาพที่ tag img
Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
var img_name= new Array();
img_name[0] = "img1.jpg"
img_name[1]=" img2.jpg "
img_name[2]="img3.jpg"
img_name[3]="img4.jpg"
// เพิ่มรูปได้ตรงนี้ img_name[x] ="image";
var imgs=new Image();
var width_slide = 100; // ความกว้างของสไลด์
var height_slide =100; // ความยาวของสไลด
var delay_us =10; // ความเร็วสไลด์
var wait_us=1000; // หยุดแสดงภาพ ถ้าไม่ต้องการเช็ตค่าเท่ากับ delay_us
var i=0;
var div= img_name.length;
var left =0;
var style_top=0;
var stop=false;
function getImage(){
document.getElementById('img1').src=img_name[3];
document.getElementById('img2').src=img_name[1];
document.getElementById('img3').src=img_name[2];
}
function slideshow(){
document.getElementById('block_slide').style.width =width_slide+"px";
document.getElementById('block_slide').style.height =height_slide+ "px";
i = i%div;
imgs.src= img_name[i];
var width1=imgs.width; //เลื่อนจาก ขวาไปซ้าย
var height1 =imgs.height; //เลื่อนจากล่างขึ้นบน
if(!stop){
/*----------------------------------------เลื่อนจาก ขวาไปซ้าย---------------------------------------------*/
if(left < -width1){
left=0;
document.getElementById('block_img').style.left =left+"px";
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------เลื่อนจากล่างขึ้นบน ---------------------------------------------*/
//if(style_top <-height1){
//style_top=0;
//document.getElementById('block_img').style.top =style_top+"px";
/*----------------------------------------------------------------------------------------------------------------*/
i=i+1;
document.images.img1.src=img_name[((i)%div)];
document.images.img2.src=img_name[((i+1)%div)];
document.images.img3.src=img_name[((i+2)%div)];
if(i == div){ i=0; }
setTimeout("slideshow()",wait_us);
}else{
/*----------------------------------------เลื่อนจาก ขวาไปซ้าย---------------------------------------------*/
document.getElementById('block_img').style.left =left+"px";
left = left-1;
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------เลื่อนจากล่างขึ้นบน ---------------------------------------------*/
//document.getElementById('block_img').style.top=style_top+"px";
//style_top =style_top-1;
/*----------------------------------------------------------------------------------------------------------------*/
setTimeout("slideshow()" ,delay_us);
}
}
}
function stop_slide(){
stop =true;
}
function play_slide(){
stop=false;
slideshow();
}
</script>
<style>
#block_slide{position:relative;z-index:1; overflow:hidden}
#block_img{position:relative; visibility:visible;top:0px;left:0px;z-index:2}
.inner , .inner tr ,.inner tr td{padding:0;margin:0;border-collapse:collapse;vertical-align:bottom}
.inner tr td img{margin-bottom:-4px;}
html* .inner tr td img{margin:0px;}
</style>
</head>
<body onload="slideshow()">
<div id="block_slide">
<div id="block_img">
<table class="inner" onmouseOver="stop_slide()" onmouseOut="play_slide()">
<!-- เลื่อนจากขวาไปซ้าย-->
<tr>
<td><img id="img1"/></td>
<td><img id="img2"/></td>
<td><img id="img3"/></td>
<script> getImage()</script>
</tr>
<!-- เลื่อนจากล่างขึ้นบน
<tr><td><img id="img1"/></td></tr>
<tr><td><img id="img2"/></td></tr>
<tr><td><img id="img3"/></td></tr>
<script> getImage()</script>
--->
</table>
</div>
</div>
</body>
สังเกตครับตำแหน่งว่าง <tr><td> ไม่เหมือนกัน
|
| |
|
|
| |
| Date :
2009-10-16 01:09:03 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ใช้กับรุปภาพอย่างเดียวใช่ไหมค่ะ
ใช้กับเนื้อหาที่คิวรี่มากจากดาต้าเบสได้หรือเปล่า
|
| |
|
|
| |
| Date :
2009-10-16 10:44:12 |
By :
Avrill |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมลองดัดแปลงให้แล้วครับ สงสัยตรงไหนถามได้
สไลด์เนื้อหา
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
var width_slide = 300; // ความกว้างของสไลด์
var height_slide =100; // ความยาวของสไลด
var width_div =300; // ความกว้างของเนื้อหา
var height_div=50; //ความยาวของเนื้อหา ความยาวควรมากกว่า (height_slide หาร 2)
var delay_us =50; // ความเร็วสไลด์
var wait_us=1000; // หยุดแสดงภาพ ถ้าไม่ต้องการเช็ตค่าให้เท่ากับ delay_us
var i=-2;
var div;
var style_top=0;
var stop=false;
function setSlide(){
div=document.getElementById('block_nums').value;
document.getElementById('block_slide').style.width =width_slide+"px";
document.getElementById('block_slide').style.height =height_slide+ "px";
document.getElementById('slide1').style.height=height_div+"px";
document.getElementById('slide2').style.height=height_div+"px";
document.getElementById('slide3').style.height=height_div+"px";
}
function slideshow(){
if(!stop){
if(style_top <-height_div){
style_top=0;
document.getElementById('block_img').style.top =style_top+"px";
if(i<0) document.getElementById('slide1').innerHTML="";
else document.getElementById('slide1').innerHTML=document.getElementById('s'+(i%div+1)).innerHTML;
if(i<-1) document.getElementById('slide2').innerHTML="";
else document.getElementById('slide2').innerHTML=document.getElementById('s'+((i+1)%div+1)).innerHTML;
if(i<-2) document.getElementById('slide3').innerHTML="";
else document.getElementById('slide3').innerHTML=document.getElementById('s'+((i+2)%div+1)).innerHTML;
i=i+1;
if(i == div){ i=0; }
setTimeout("slideshow()",wait_us);
}else{
document.getElementById('block_img').style.top=style_top+"px";
style_top =style_top-1;
setTimeout("slideshow()" ,delay_us);
}
}
}
function stop_slide(){
stop =true;
}
function play_slide(){
stop=false;
slideshow();
}
</script>
<style>
#block_slide{position:relative;z-index:1; overflow:hidden; border:solid 1px #FF0033;}
#block_img{position:relative; visibility:visible;top:0px;left:0px;z-index:2;cursor:pointer;}
</style>
</head>
<body onload="slideshow()">
<input type="text" id="txttest"/>
<div id="block_slide">
<div id="block_img" onmouseOver="stop_slide()" onmouseOut="play_slide()">
<div id="slide1" ></div>
<div id="slide2"></div>
<div id="slide3" ></div>
<div id="s1" style="display:none">หลักการสไลด์นี้คือสลับเนื้อหาเพียงแค่ 3 สไลด์ slide1 slide2 และ slide3</div>
<div id="s2" style="display:none">เราสามารถสร้าง tag อะไรก็ได้ขอเพียงคำหนึ่งถึงความกว้างและความยาวเนื้อหาที่กำหนดไว้</div>
<div id="s3" style="display:none">ตัวอย่าง <a href="">hyperlink</a> <b>ตัวหนา</b> <table border=1><tr><td>ตาราง</td></tr></table></div>
<div id="s4" style="display:none"><b>จำไว้!</b>เราควรส่งจำนวนสุดท้ายให้ block_nums ด้วยเพื่อบอกจำนวนเนื้อหาทั้งหมด</div>
<!-- เพิ่มเนื้อหาตรงนี้
<div id="s5" style="display:none">เนื้อหาส่วนที่ 5</div>
-->
<input type="hidden" id="block_nums" value="4"> <!-- value เท่ากับจำนวน เนื้อหาที่สร้างมาทั้งหมด -->
<script>setSlide()</script>
</div>
</div>
</body>
</html>
อันนี้ตัวอย่างกรณีที่เรียกข้อมูลในฐานข้อมูล
แก้ไขแค่ใน body
Code (PHP)
<body onload="slideshow()">
<input type="text" id="txttest"/>
<div id="block_slide">
<div id="block_img" onmouseOver="stop_slide()" onmouseOut="play_slide()">
<div id="slide1" ></div>
<div id="slide2"></div>
<div id="slide3" ></div>
<?php
$conn =mysql_connect("localhost","root","");
mysql_select_db("dbname");
$sql=mysql_query("select * from tbl_name ") or die(mysql_error());
$i=0;
while($rs=mysql_fetch_array($sql)){
$i++;
echo "<div id=\"s$i\" style=\"display:none\">ป้อนเนื้อหาที่ $i : $rs[field_name]</div>\n";
}
echo "<input type=\"hidden\" id=\"block_nums\" value=\"$i\">\n";
mysql_close($conn) or die(mysql_error());
?>
<script>setSlide()</script>
</div>
</div>
</body>
</html>
|
| |
|
|
| |
| Date :
2009-10-16 12:53:00 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณค่ะ เยี่ยมมากๆเลย
|
| |
|
|
| |
| Date :
2009-10-17 17:18:43 |
By :
Avrill |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากเลยครับ
แต่ว่า เหมือนความเร็วไม่คงที่หรือเปล่าครับ
คือบางทีเอาเม้าส์ไปชี้พอปล่อยก็จะเลื่อนเร็วขึ้น
ไม่ทราบว่าแก้ยังไงครับ เป็นกันหรือเปล่าครับ
|
| |
|
|
| |
| Date :
2010-01-13 11:42:39 |
By :
webdev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากๆ เลยคับ สุดยอด
|
| |
|
|
| |
| Date :
2010-01-31 19:54:30 |
By :
a |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คือว่าอยากได้แบบว่าเลื่อนติดต่อกันแบบต่อเนื่องอ่ะค่ะ ไม่ต้องหยุด
พอแก้แล้วก็ได้แค่ว่ามันไปสะดุดแทน แบบว่าพอภาพที่ 1 เลื่อนไปแล้วพอภาพที่ 2 ก็สะดุดหน่อยแล้วก็เลื่อน แบบนี้
วนแล้วมันก็สะดุด
|
| |
|
|
| |
| Date :
2011-01-27 21:45:01 |
By :
อยากรู้ |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อยากได้เหมือนกันคะ ลองเอาโค้ดที่ใช้ไปใช้แล้ว มันไม่ได้ตามคาดหมายไว้เลยคะ อยากได้โค้ดตามแนวนอนให้มันเลือนต่อเนื่อง เอาตามแนวนอนนะคะจากซ้ายไปขวานะคะ ใครทำได้บ้างช่วยตอบหน่อยได้ไหมคะ รออยู่คะ จะขอบคุณมากๆ เลยคะ
|
| |
|
|
| |
| Date :
2011-08-05 10:55:27 |
By :
pink |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ทำไมเล่นไม่ต่อเนื่องอ่ะค่ะ พอถึงภาพสุดท้ายก็หายไปเลย อยากให้มันเล่นได้ต่อเนื่องอ่ะค่ะ
|
| |
|
|
| |
| Date :
2012-03-14 11:57:52 |
By :
catwoman |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
