Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

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

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

เริ่มหัวข้อใหม่

Guest

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

Tag : - - - -

Date : 2009-11-09 17:17:50

By : ริมรั้ว

View : 7921

Reply : 21

No. 1

xbeginner01

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

เขียนเองเลยครับ ไม่ยากหรอก

ถ้ามีเวลาอาจจะเขียนให้น่ะ

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

By : xbeginner01

No. 2

xbeginner01

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

ยังทำไม่สมบูรณ์ 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

xbeginner01

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

สงสัย จขกท หายไปแหล่ะ

แต่ไม่เป็นไรผมโพสไว้ให้คนอื่นเผื่อสนใจละกัน

แก้ไข:
- ให้มันทำงานดีขึ้น
- เพิ่มวิธีดึงภาพจากฐานข้อมูล
- แต่งตารางให้ดูดีขึ้น
ตัวอย่างรูป
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

The Gunner

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

ขอบคุณทั้งคนถาม และคนตอบเลยนะครับ บังเอินผมได้ใช้พอดี เอาไป +1

Date : 2009-11-12 23:07:58

By : puchong1

No. 5

Roronoa Zoro

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

Date : 2009-11-13 10:51:09

By : rasabut

No. 6

หมาของเซสชั่น

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

อยากได้มานานแระแบบนี้ขอบคุณครับ

Date : 2009-11-13 11:11:32

By : Dragons_first

No. 7

Mal2s

โพสกระทู้ ( 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

-GruPrE-

โพสกระทู้ ( 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

TarnNee

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

ใช่ค่ะ ขอบคุณทั้งคน ถาม และคนตอบ ได้ใจไปเลยเต็มๆค่ะ น่าร๊ากกกกกกกกกกกกกกกก ที่ ซู๊ดดดดดดดดดดดด

Date : 2011-04-02 10:45:52

By : TarnNee

No. 12

Guest

ขอบคุณค่ะ ทามาตั้งน้านนาน

Date : 2011-06-09 17:14:19

By : Aiengs

No. 13

TC Admin

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

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

aomnina

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

ขอบคุณมากนะค่ะ แบบนี้อ่ะอยากได้มานานแระ

Date : 2011-12-19 12:19:59

By : kornwipa

No. 15

aomnina

โพสกระทู้ ( 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

chicha

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

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

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

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

Date : 2012-02-16 16:29:59

By : imperator

No. 18

TC Admin

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

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

chaaimwarn

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

ขอบคุณนะค่ะ

Date : 2012-07-11 13:31:09

By : chaaimwarn

No. 21

golf

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

เอาไปเลย บวก +10 อยากได้พอดีเลยครับ

Date : 2013-01-22 15:49:05

By : Sarunkonn

ค้นหาข้อมูล

แสดงความคิดเห็น

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

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

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

Load balance : Server 05

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); javascript slide คือ อยากได้จาวาสคริปต์ แบบเป็นภาพแล้วค่อย ๆ จางลงเปลี่ยนเป็นอีกภาพ

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

No. 21

ค้นหาข้อมูล

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

Notice

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