Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > javascript slide คือ อยากได้จาวาสคริปต์ แบบเป็นภาพแล้วค่อย ๆ จางลงเปลี่ยนเป็นอีกภาพ



 

javascript slide คือ อยากได้จาวาสคริปต์ แบบเป็นภาพแล้วค่อย ๆ จางลงเปลี่ยนเป็นอีกภาพ

 



Topic : 034085

Guest




slide

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



Tag : - - - -







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2009-11-09 17:17:50 By : ริมรั้ว View : 7749 Reply : 21
 

 

No. 1



โพสกระทู้ ( 1,439 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

เขียนเองเลยครับ ไม่ยากหรอก
ถ้ามีเวลาอาจจะเขียนให้น่ะ






Date : 2009-11-11 13:18:04 By : xbeginner01
 


 

No. 2



โพสกระทู้ ( 1,439 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

ยังทำไม่สมบูรณ์ 100% น่ะครับ มีเวลาจะมาอัพเดทให้ใหม่
แก้ไขตรงที่คอมเมนต์ให้ไว้น่ะ
Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> อัลบั้มรูปสไตล์ Opacity beta  By xbeginner01</title>
<style>
*{
	padding:0;
	margin:0;
}
#bb{
	position:relative;
	left:0;
	top:0;
	width:200px;    /* ความกว้างของภาพที่จะแสดง  */
	height:200px;  /*ความยาวของภาพที่จะแสดง */
}
#img1,#img2{
	position:absolute;
	left:0;
	top:0;
}
</style>
<script>

function slideStyleOpacity(){
	var list =3; // แสดงจำนวนรายการรูปทางด้านซ้าย
	var waitTime =1000 // หยุดแสดงภาพ 1 วินาที หน่วย  us
	var opaTime = 100  //ความเร็วต่อเฟรม ทำให้ภาพจาง หน่วย  us
	var  opaMulti = 10 // ตัวคูณ เพิ่มค่า opacity (ภาพจาง) ขึ้นอีก ไม่ควรเกิน 100 และเท่ากับ 0 ประมาณ 5-20 กำลังดี
	var imgArr = new Array();
	var opa= 0;
	var wait =false;
	var  im =0;
	var startList=0;
	this.addImage =  function(imgs,thumnail){
		imgArr[imgArr.length] ={imgs:imgs,thumnail:thumnail}
		ss.showImage(imgArr[0].imgs);
	}
	this.toList =function(){
		var  pic=document.getElementById('Pic');
		pic.innerHTML="";
		for(var i=0; i < list ; i++){
			var  pic=document.getElementById('Pic');
			var a =document.createElement('a');
			a.setAttribute('href',"javascript:ss.showImage('"+imgArr[startList+i].imgs+"')");
			var tagImg = document.createElement('img');
			tagImg.setAttribute('src',imgArr[startList+i].thumnail);
			tagImg.setAttribute('alt',imgArr[startList+i].thumnail);
			a.appendChild(tagImg);
			pic.appendChild(a);
			var br= document.createElement('br');
			pic.appendChild(br);

		}
		if(imgArr.length>list && imgArr.length>(startList+list) ) document.getElementById('downList').disabled=false;
		else  document.getElementById('downList').disabled=true;
		if(startList>0)document.getElementById('upList').disabled=false;
		else   document.getElementById('upList').disabled=true;
	
	}
	this.upList =function(){
		 startList--;
		 ss.toList();
	}
	this.downList=function(){
		startList++;
		ss.toList();
	}
	this.showImage=function(img1){
		var show=document.getElementById('showPic');
		show.innerHTML="<img src="+img1+" id=img1>";
		setOpacity(100,'img1');
		var len =imgArr.length;
		var j=0;
		while(j <len){	
					if(imgArr[j].imgs ==img1){
				show.innerHTML+="<img src="+imgArr[(j+1)%len].imgs+" id=img2 >";
				break;
			}
			j++;
		}
		setOpacity(0,'img2');
		opa=0;
		wait=true;
		im=j;
	}	
	
	this.slideImage=function(){
			opa++;
			setOpacity(100-opa*opaMulti,'img1');
			setOpacity(opa*opaMulti,'img2');
			if(opa*opaMulti >99 ){				
					var  next = imgArr[(im+1)%imgArr.length].imgs;
					im++;
					ss.showImage(next);								
			}
		if(wait){
			setTimeout("ss.slideImage()" ,waitTime);
			wait=false;
		}else{
			setTimeout("ss.slideImage()" ,opaTime);
		}
	}
	function setOpacity(setOpacity, objectId){
		var object = document.getElementById(objectId).style;	
		object.opacity = (setOpacity / 100);
		object.MozOpacity = (setOpacity / 100);
		object.KhtmlOpacity = (setOpacity / 100);
		object.filter = "alpha(opacity=" + setOpacity + ")";
		
	}

}

	var ss = new slideStyleOpacity;
window.onload =function(){
	/*เพิ่มภาพลงในสไลด์ โดยใส่ชื่อภาพจริง  ( เช่น img1.jpg)  และ ภาพย่อส่วน ( เช่น thumnail_img.jpg) ด้วยฟังก์ขัน ss.addImage()  ดูตย.ด้านล่าง*/
	ss.addImage('img1.jpg','thumnail_img1.jpg');
	ss.addImage('img2.jpg','thumnail_img2.jpg');
	ss.addImage('img3.jpg','thumnail_img3.jpg');
	ss.addImage('img4.jpg','thumnail_img4.jpg');
	/* กรณีเพิ่มภาพ แบบ array */
	for(var i=1 ; i<9 ; i++){
 	ss.addImage('img'+i+'.jpg','thumnail_img'+i+'.jpg');
	}
	ss.toList();
	ss.slideImage(0);

}
</script>
</head>
<body>
<center>
<b>สไลด์รูปสไตล์ opacity   โค้ดทดสอบ </b><br/>
<table border=1 bgcolor="gray" >
<tr >
	<td rowspan="3"  valign="top">
	<div id="bb">
		<div id="showPic" ></div>
		</div>
	</td>
	<td align="center"><input type="button" id="upList"  value="UP" onclick="ss.upList()" disabled="disabled" style="width:50px"></td>
</tr>
<tr>
	<td id="ptd" align="center">
	<div id="Pic"></div>
	</td>
</tr>
<tr>
	<td align="center"><input type="button"  value="DOWN"  id="downList" onclick="ss.downList()" disabled="disabled" style="width:50px"></td>
</tr>
</table>
</center>
</body>
</html>



ภาพตัวอย่าง

Date : 2009-11-12 06:21:58 By : xbeginner01
 

 

No. 3



โพสกระทู้ ( 1,439 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

สงสัย จขกท หายไปแหล่ะ แต่ไม่เป็นไรผมโพสไว้ให้คนอื่นเผื่อสนใจละกัน
แก้ไข:
- ให้มันทำงานดีขึ้น
- เพิ่มวิธีดึงภาพจากฐานข้อมูล
- แต่งตารางให้ดูดีขึ้น
ตัวอย่างรูป
imageslide
โค้ด
Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> อัลบั้มรูปสไตล์ Opacity   By xbeginner01</title>
<style>
*{
	padding:0;
	margin:0;
}
#tbSlide{
border-collapse:collapse;
border:none;
}
#tbSlide td{
	padding:0 3px;
}
#tbSlide #bb{
	position:relative;
	width:210px;    /* ความกว้างของภาพที่จะแสดง  +10px(border) */
	height:210px;   /*ความยาวของภาพที่จะแสดง  +10px(border)*/
	text-align:center;
	border:solid 1px #D8D8D8;
	overflow:hidden;
}

#tbSlide #bb #showPic img{	
	position:absolute;
	left:0;
	top:0;
	right:0;
	border:solid 4px #FFFFFF;
}
#tbSlide #Pic a  img{
	margin:1px 0;
	border:none;
}
</style>
<script>

function slideStyleOpacity(){
	var list =3; // แสดงจำนวนรายการรูปทางด้านซ้าย
	var waitTime =1000 // หยุดแสดงภาพ 1  หน่วย  us
	var opaTime = 100  //ความเร็วต่อเฟรม ทำให้ภาพจาง หน่วย  us
	var  opaMulti = 10 // ตัวคูณ เพิ่มค่า opacity (ภาพจาง) ขึ้นอีก ไม่ควรเกิน 100 และเท่ากับ 0 ประมาณ 5-20 กำลังดี
	var imgArr = new Array();
	var opa= 0;
	var wait =false;
	var  im =0;
	var startList=0;
	this.addImage =  function(imgs,thumnail){
		imgArr[imgArr.length] ={imgs:imgs,thumnail:thumnail}
		ss.showImage(imgArr[0].imgs);
		ss.toList();
	}
	this.toList =function(){
		var  pic=document.getElementById('Pic');
		pic.innerHTML="";
		for(var i=0; i < list ; i++){
			try{
				var  pic=document.getElementById('Pic');
				var a =document.createElement('a');
				a.setAttribute('href',"javascript:ss.showImage('"+imgArr[startList+i].imgs+"')");
				var tagImg = document.createElement('img');
				tagImg.setAttribute('src',imgArr[startList+i].thumnail);
				tagImg.setAttribute('alt',imgArr[startList+i].thumnail);
				a.appendChild(tagImg);
				pic.appendChild(a);
				var br= document.createElement('br');
				pic.appendChild(br);
			}catch(e){}
		}
		if(imgArr.length>list && imgArr.length>(startList+list) ) document.getElementById('downList').disabled=false;
		else  document.getElementById('downList').disabled=true;
		if(startList>0)document.getElementById('upList').disabled=false;
		else   document.getElementById('upList').disabled=true;
	
	}
	this.upList =function(){
		 startList--;
		 ss.toList();
	}
	this.downList=function(){
		startList++;
		ss.toList();
	}
	this.showImage=function(img1){
		var show=document.getElementById('showPic');
		show.innerHTML="<img src="+img1+" id=img1>";
		setOpacity(100,'img1');
		var len =imgArr.length;
		var j=0;
		while(j <len){	
				if(imgArr[j].imgs ==img1){
				show.innerHTML+="<img src="+imgArr[(j+1)%len].imgs+" id=img2 >";
				break;
			}
			j++;
		}
		setOpacity(0,'img2');
		opa=0;
		wait=true;
		im=j;
	}	
	
	this.slideImage=function(){
			if(wait){
				setTimeout("ss.slideImage()" ,waitTime);
				wait=false;
			}else{
				setTimeout("ss.slideImage()" ,opaTime);
				opa++;
				setOpacity(100-opa*opaMulti,'img1');
				setOpacity(opa*opaMulti,'img2');
				if(opa*opaMulti >99 ){				
					var  next = imgArr[(im+1)%imgArr.length].imgs;
					im++;
					ss.showImage(next);								
				}
			}		
	}
	function setOpacity(setOpacity, objectId){
		var object = document.getElementById(objectId).style;	
		object.opacity = (setOpacity / 100);
		object.MozOpacity = (setOpacity / 100);
		object.KhtmlOpacity = (setOpacity / 100);
		object.filter = "alpha(opacity=" + setOpacity + ")";
		
	}

}

var ss = new slideStyleOpacity;
window.onload =function(){
/*เพิ่มภาพลงในสไลด์ โดยใส่ชื่อภาพจริง  (iimg1.jpg)  และ ภาพย่อส่วน (thumnail_img.jpg) ด้วยฟังก์ขัน ss.addImage()  ดูตย.ด้านล่าง*/
/*####################  เพิ่มรูปทีละชุด  ####################  */
	/**/	
	ss.addImage('img1.jpg','thumnail_img1.jpg');
	ss.addImage('img2.jpg','thumnail_img2.jpg');
	ss.addImage('img3.jpg','thumnail_img3.jpg');
	ss.addImage('img4.jpg','thumnail_img4.jpg');
	ss.slideImage(0);
	/**/
/*############################### ####################  */

/*#################  เพิ่มรูปด้วยวิธีวนรูป  ##################  */
	/*	
	for(var i=4 ; i<9 ; i++){
 		ss.addImage('img'+i+'.jpg','thumnail_img'+i+'.jpg');
	}
	ss.slideImage(0);
	/
/*############################### ####################  */

}
</script>
</head>
<body>
<center>
<b>สไลด์รูปสไตล์ opacity    </b><br/><br/>
<table  id="tbSlide" >
<tr >
	<th rowspan="3" >
	<div id="bb"><div id="showPic" ></div></div>
	</th>
	<td align="center"><input type="button" id="upList"  value="UP" onclick="ss.upList()" disabled="disabled" style="width:50px"></td>
</tr>
<tr>
	<td>
	<div id="Pic"></div>
	</td>
</tr>
<tr>
	<td align="center"><input type="button"  value="DOWN"  id="downList" onclick="ss.downList()" disabled="disabled" style="width:50px"></td>
</tr>
</table><!--tbSlide-->
</center>
</body>
</html>
<?php 
/*######  เพิ่มรูปจากฐานข้อมูล (ควรไว้หลัง </html> หรือ </table><!--tbSlide--> ) ####  */
/*
echo "<script>\n";
require ("config.inc");
$sql =mysql_query("select * from tblxxx ") or die(mysql_error());
while($rs =mysql_fetch_array($sql)){
	echo "ss.addImage('".$rs[imgs]."','".$rs[thumnail]."');\n");
 }
 echo "ss.slideImage(0);\n";
 echo "</script>\n";
 */
 /*###############################################################  */
?>

Date : 2009-11-12 14:26:14 By : xbeginner01
 


 

No. 4



โพสกระทู้ ( 392 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณทั้งคนถาม และคนตอบเลยนะครับ บังเอินผมได้ใช้พอดี เอาไป +1
Date : 2009-11-12 23:07:58 By : puchong1
 


 

No. 5



โพสกระทู้ ( 228 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

+1
Date : 2009-11-13 10:51:09 By : rasabut
 


 

No. 6



โพสกระทู้ ( 3,748 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

อยากได้มานานแระแบบนี้ขอบคุณครับ
Date : 2009-11-13 11:11:32 By : Dragons_first
 


 

No. 7



โพสกระทู้ ( 62 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณเช่นกันครับ +1
Date : 2009-11-14 11:16:29 By : Mal2s
 


 

No. 8



โพสกระทู้ ( 12 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณอีกคนครับ
Date : 2009-11-14 15:53:46 By : signalnco746
 


 

No. 9



โพสกระทู้ ( 60 )
บทความ ( 0 )



สถานะออฟไลน์


เอาไปเลย +1 กระโหลก
Date : 2009-11-14 16:19:08 By : sung55
 


 

No. 10

Guest


ขอบคุณมากเลยค่ะ ได้ความรู้เพิ่มขึ้นเยอะเลย
Date : 2010-04-21 23:03:40 By : Guest
 


 

No. 11



โพสกระทู้ ( 55 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ใช่ค่ะ ขอบคุณทั้งคน ถาม และคนตอบ ได้ใจไปเลยเต็มๆค่ะ น่าร๊ากกกกกกกกกกกกกกกก ที่ ซู๊ดดดดดดดดดดดด
Date : 2011-04-02 10:45:52 By : TarnNee
 


 

No. 12

Guest


ขอบคุณค่ะ ทามาตั้งน้านนาน
Date : 2011-06-09 17:14:19 By : Aiengs
 


 

No. 13



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook



Go to : prettyPhoto jQuery lightbox SlideShow สร้าง lightbox ทำ Gallery ด้วย prettyPhoto

Go to : ColorBox jQuery Images SlideShow ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ

Go to : Popup Fancybox jQuery and PHP Mysql สร้างกล่อง Fancybox ทำงานร่วมกับ PHP และ MySQL
Date : 2011-10-28 21:18:14 By : webmaster
 


 

No. 14



โพสกระทู้ ( 11 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณมากนะค่ะ แบบนี้อ่ะอยากได้มานานแระ
Date : 2011-12-19 12:19:59 By : kornwipa
 


 

No. 15



โพสกระทู้ ( 11 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณมากนะค
Date : 2012-01-15 17:14:48 By : aomnina
 


 

No. 16



โพสกระทู้ ( 127 )
บทความ ( 0 )



สถานะออฟไลน์


Code (PHP)
        ss.addImage('banner.jpg','banner.jpg'); ตรงนี้อยากกำหนดขนาดรูปค่ะ
	ss.addImage('add_personlity.jpg','add_personlity.jpg');
	ss.addImage('admin.jpg','admin.jpg');
	ss.addImage('back.jpg','back.jpg');
	ss.slideImage(0);

รบกวนถามหน่อยค่ะว่าเราจะกำหนดขนาดรูปภาพตรงไหน


ประวัติการแก้ไข
2012-01-26 13:00:55
Date : 2012-01-26 11:24:02 By : fight2932
 


 

No. 17



โพสกระทู้ ( 122 )
บทความ ( 0 )



สถานะออฟไลน์


+1ไปเลยครับผ่านมาได้ใช้พอดี

***อยากได้วิธีของพี่วินนะครบวงจรดี ตามดูมาหลายรอบแล้ว แต่ไม่เข้าใจเอามากๆ

พอเอาไปเชื่อมกับ DB แล้วงงเป็นบอลไปซ้าย เด เกอา พุ่งไปขวาเลย
Date : 2012-02-16 16:29:59 By : imperator
 


 

No. 18



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

Quote:
+1ไปเลยครับผ่านมาได้ใช้พอดี

***อยากได้วิธีของพี่วินนะครบวงจรดี ตามดูมาหลายรอบแล้ว แต่ไม่เข้าใจเอามากๆ

พอเอาไปเชื่อมกับ DB แล้วงงเป็นบอลไปซ้าย เด เกอา พุ่งไปขวาเลย


ไม่ยากหรอกครับ ตัวอย่างก็มีให้สำเร็จ
Date : 2012-02-16 17:37:29 By : webmaster
 


 

No. 19

Guest


ช่วยอธิบายเพิ่มตรงที่วนลูปได้ป่าวค่ะ พอดีไปแก้แล้วมันไม่ขึ้นนะค่ะ พอดีอยากได้แบบวนลูปเพราะรูปมันเยอะนะค่ะ
Date : 2012-02-26 10:38:53 By : จุ๊
 


 

No. 20



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณนะค่ะ
Date : 2012-07-11 13:31:09 By : chaaimwarn
 


 

No. 21



โพสกระทู้ ( 16 )
บทความ ( 0 )



สถานะออฟไลน์


เอาไปเลย บวก +10 อยากได้พอดีเลยครับ
Date : 2013-01-22 15:49:05 By : Sarunkonn
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : javascript slide คือ อยากได้จาวาสคริปต์ แบบเป็นภาพแล้วค่อย ๆ จางลงเปลี่ยนเป็นอีกภาพ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่