ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingใครมีสคริป Slide Content บ้างครับ [มีตัวอย่าง] ขอหน่อยๆๆ ^ ^
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ใครมีสคริป Slide Content บ้างครับ [มีตัวอย่าง] ขอหน่อยๆๆ ^ ^  (อ่าน 1931 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
kuzaa516
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 230
ออฟไลน์ ออฟไลน์

กระทู้: 1,063



ดูรายละเอียด เว็บไซต์
« เมื่อ: 23 เมษายน 2013, 18:24:48 »
ต้องการสคริป Slide เนื้อหาอะครับ แบบของเว็บเอ็มไทย
ตรง ข่าวร้อน บันเทิง กีฬา หนัง/เพลง วาไรตี้ อะครับ

ไม่รู้ว่าใครพอจะมีไว้บ้างไหมครับ รบกวนขอหน่อย หรือใครมีทำขายก็เสนอราคามาหน่อยครับ อยากได้มาก

ขอบคุณครับ
บันทึกการเข้า
AFTERCODE.CO บริการพัฒนาเว็บไซต์ทุกรูปแบบ
เติมเกม บัตรเติมเงิน ซื้อง่ายด้วยไลน์บอท
hisupakorn
Newbie
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 44



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 24 เมษายน 2013, 00:29:25 »
คือผมว่าเค้าเขียนเองนะ ใช้ JQuery ละ โค้ดผมแกะให้ละน่าจะพอแก้ต่อได้นะครับ  Embarrassed
บันทึกการเข้า
hisupakorn
Newbie
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 44



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 24 เมษายน 2013, 00:44:35 »
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mthai</title>
</head>
<script src="http://st1.mthcdn.com/mthai2012/assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#tab-hilight ul li').click(function(){
		var tab_index = $('#tab-hilight ul li').index(this);		
		var newleft = 0;
		newleft = parseInt(tab_index*630);
		$('#hilight .wrap').animate({
			left: newleft*-1
		}, 300, function(){
			$('#tab-hilight').attr('class', 'tab-active-' parseInt(tab_index 1));
			$('#tab-hilight ul li').removeClass('active');
			$('#tab-hilight ul li').eq(tab_index).addClass('active');
		});
		clicked = true;
		clearInterval(hilight_interval);
	}); 
});
</script>
<style>
.leftpane {
float: left;
width: 630px;
margin-right: 10px;
}
#hilight {
position: relative;
z-index: 0;
width: 630px;
height: 669px;
overflow: hidden;
}
#hilight .wrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 3780px;
}
#hilight .wrap .item-fade {
float: left;
}
#hilight .banner, #hilight .banner img {
width: 630px;
height: 43px;
}
#sport-block .hilight {
background-color: #217a36;
}
.cssgradients #sport-block .other {
background: -webkit-linear-gradient(top,#c4f0cd,#afd4a1);
background: -moz-linear-gradient(top,#c4f0cd,#afd4a1);
background: linear-gradient(top,#c4f0cd,#afd4a1);
}
#hotnews-block{
background-color:#25DF00;
}
#entertain-block{
background-color:#CC0000;
}
#sport-block{
background-color:#1E39D6;
}
#moviemusic-block{
background-color:#FF3AD6;
}
#variety-block{
background-color:#C040F9;
}
</style>
<body>
<nav id="tab-hilight" class="tab-active-0">
	<ul>
	  <li id="hotnews-tab" class="">ข่าวร้อน</li>
	  <li id="entertain-tab" class="">บันเทิง</li>
	  <li id="sport-tab" class="active">กีฬา</li>
	  <li id="moviemusic-tab" class="">หนัง/เพลง</li>
	  <li id="variety-tab" class="">วาไรตี้</li>
	</ul>
</nav>
<div id="hilight">
	<div class="wrap" style="left: -1260px;">
		<section id="hotnews-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="entertain-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="sport-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="moviemusic-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
		<section id="variety-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
	</div>
</div>
</body>
</html>
บันทึกการเข้า
kuzaa516
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 230
ออฟไลน์ ออฟไลน์

กระทู้: 1,063



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 24 เมษายน 2013, 11:12:50 »
อ้างจาก: hisupakorn ที่ 24 เมษายน 2013, 00:44:35
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mthai</title>
</head>
<script src="http://st1.mthcdn.com/mthai2012/assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#tab-hilight ul li').click(function(){
		var tab_index = $('#tab-hilight ul li').index(this);		
		var newleft = 0;
		newleft = parseInt(tab_index*630);
		$('#hilight .wrap').animate({
			left: newleft*-1
		}, 300, function(){
			$('#tab-hilight').attr('class', 'tab-active-' parseInt(tab_index 1));
			$('#tab-hilight ul li').removeClass('active');
			$('#tab-hilight ul li').eq(tab_index).addClass('active');
		});
		clicked = true;
		clearInterval(hilight_interval);
	}); 
});
</script>
<style>
.leftpane {
float: left;
width: 630px;
margin-right: 10px;
}
#hilight {
position: relative;
z-index: 0;
width: 630px;
height: 669px;
overflow: hidden;
}
#hilight .wrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 3780px;
}
#hilight .wrap .item-fade {
float: left;
}
#hilight .banner, #hilight .banner img {
width: 630px;
height: 43px;
}
#sport-block .hilight {
background-color: #217a36;
}
.cssgradients #sport-block .other {
background: -webkit-linear-gradient(top,#c4f0cd,#afd4a1);
background: -moz-linear-gradient(top,#c4f0cd,#afd4a1);
background: linear-gradient(top,#c4f0cd,#afd4a1);
}
#hotnews-block{
background-color:#25DF00;
}
#entertain-block{
background-color:#CC0000;
}
#sport-block{
background-color:#1E39D6;
}
#moviemusic-block{
background-color:#FF3AD6;
}
#variety-block{
background-color:#C040F9;
}
</style>
<body>
<nav id="tab-hilight" class="tab-active-0">
	<ul>
	  <li id="hotnews-tab" class="">ข่าวร้อน</li>
	  <li id="entertain-tab" class="">บันเทิง</li>
	  <li id="sport-tab" class="active">กีฬา</li>
	  <li id="moviemusic-tab" class="">หนัง/เพลง</li>
	  <li id="variety-tab" class="">วาไรตี้</li>
	</ul>
</nav>
<div id="hilight">
	<div class="wrap" style="left: -1260px;">
		<section id="hotnews-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="entertain-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="sport-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="moviemusic-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
		<section id="variety-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
	</div>
</div>
</body>
</html>



ผมก็พอดูออกอยุครับว่าเป็น JQuery แต่ผมแกะแล้วมันไม่ได้ พอมาลองของท่านก็ยังไม่ได้อะครับ รบกวนด้วยนะครับ
บันทึกการเข้า
AFTERCODE.CO บริการพัฒนาเว็บไซต์ทุกรูปแบบ
เติมเกม บัตรเติมเงิน ซื้อง่ายด้วยไลน์บอท
hisupakorn
Newbie
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 44



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 24 เมษายน 2013, 21:47:01 »
อ้างจาก: kuzaa516 ที่ 24 เมษายน 2013, 11:12:50
อ้างจาก: hisupakorn ที่ 24 เมษายน 2013, 00:44:35
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mthai</title>
</head>
<script src="http://st1.mthcdn.com/mthai2012/assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#tab-hilight ul li').click(function(){
		var tab_index = $('#tab-hilight ul li').index(this);		
		var newleft = 0;
		newleft = parseInt(tab_index*630);
		$('#hilight .wrap').animate({
			left: newleft*-1
		}, 300, function(){
			$('#tab-hilight').attr('class', 'tab-active-' parseInt(tab_index 1));
			$('#tab-hilight ul li').removeClass('active');
			$('#tab-hilight ul li').eq(tab_index).addClass('active');
		});
		clicked = true;
		clearInterval(hilight_interval);
	}); 
});
</script>
<style>
.leftpane {
float: left;
width: 630px;
margin-right: 10px;
}
#hilight {
position: relative;
z-index: 0;
width: 630px;
height: 669px;
overflow: hidden;
}
#hilight .wrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 3780px;
}
#hilight .wrap .item-fade {
float: left;
}
#hilight .banner, #hilight .banner img {
width: 630px;
height: 43px;
}
#sport-block .hilight {
background-color: #217a36;
}
.cssgradients #sport-block .other {
background: -webkit-linear-gradient(top,#c4f0cd,#afd4a1);
background: -moz-linear-gradient(top,#c4f0cd,#afd4a1);
background: linear-gradient(top,#c4f0cd,#afd4a1);
}
#hotnews-block{
background-color:#25DF00;
}
#entertain-block{
background-color:#CC0000;
}
#sport-block{
background-color:#1E39D6;
}
#moviemusic-block{
background-color:#FF3AD6;
}
#variety-block{
background-color:#C040F9;
}
</style>
<body>
<nav id="tab-hilight" class="tab-active-0">
	<ul>
	  <li id="hotnews-tab" class="">ข่าวร้อน</li>
	  <li id="entertain-tab" class="">บันเทิง</li>
	  <li id="sport-tab" class="active">กีฬา</li>
	  <li id="moviemusic-tab" class="">หนัง/เพลง</li>
	  <li id="variety-tab" class="">วาไรตี้</li>
	</ul>
</nav>
<div id="hilight">
	<div class="wrap" style="left: -1260px;">
		<section id="hotnews-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="entertain-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="sport-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="moviemusic-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
		<section id="variety-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
	</div>
</div>
</body>
</html>



ผมก็พอดูออกอยุครับว่าเป็น JQuery แต่ผมแกะแล้วมันไม่ได้ พอมาลองของท่านก็ยังไม่ได้อะครับ รบกวนด้วยนะครับ


ได้แล้วนะยังไงลองกดตรง ข่าวร้อน บันเทิง กีฬา หนัง อะแถบสีจะเลื่อนครับ ตามลิ้งดูครับ
http://jsfiddle.net/Ms2GG/
บันทึกการเข้า
dekmv
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 222
ออฟไลน์ ออฟไลน์

กระทู้: 3,264



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 24 เมษายน 2013, 22:47:50 »
ผมเห็นของฟรีในเน็ตเพียบเลยครับ (ยังไม่เคยเอามาลองสักตัว !  Cry)
บันทึกการเข้า
kuzaa516
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 230
ออฟไลน์ ออฟไลน์

กระทู้: 1,063



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 25 เมษายน 2013, 00:01:21 »
อ้างจาก: hisupakorn ที่ 24 เมษายน 2013, 21:47:01
อ้างจาก: kuzaa516 ที่ 24 เมษายน 2013, 11:12:50
อ้างจาก: hisupakorn ที่ 24 เมษายน 2013, 00:44:35
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mthai</title>
</head>
<script src="http://st1.mthcdn.com/mthai2012/assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#tab-hilight ul li').click(function(){
		var tab_index = $('#tab-hilight ul li').index(this);		
		var newleft = 0;
		newleft = parseInt(tab_index*630);
		$('#hilight .wrap').animate({
			left: newleft*-1
		}, 300, function(){
			$('#tab-hilight').attr('class', 'tab-active-' parseInt(tab_index 1));
			$('#tab-hilight ul li').removeClass('active');
			$('#tab-hilight ul li').eq(tab_index).addClass('active');
		});
		clicked = true;
		clearInterval(hilight_interval);
	}); 
});
</script>
<style>
.leftpane {
float: left;
width: 630px;
margin-right: 10px;
}
#hilight {
position: relative;
z-index: 0;
width: 630px;
height: 669px;
overflow: hidden;
}
#hilight .wrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 3780px;
}
#hilight .wrap .item-fade {
float: left;
}
#hilight .banner, #hilight .banner img {
width: 630px;
height: 43px;
}
#sport-block .hilight {
background-color: #217a36;
}
.cssgradients #sport-block .other {
background: -webkit-linear-gradient(top,#c4f0cd,#afd4a1);
background: -moz-linear-gradient(top,#c4f0cd,#afd4a1);
background: linear-gradient(top,#c4f0cd,#afd4a1);
}
#hotnews-block{
background-color:#25DF00;
}
#entertain-block{
background-color:#CC0000;
}
#sport-block{
background-color:#1E39D6;
}
#moviemusic-block{
background-color:#FF3AD6;
}
#variety-block{
background-color:#C040F9;
}
</style>
<body>
<nav id="tab-hilight" class="tab-active-0">
	<ul>
	  <li id="hotnews-tab" class="">ข่าวร้อน</li>
	  <li id="entertain-tab" class="">บันเทิง</li>
	  <li id="sport-tab" class="active">กีฬา</li>
	  <li id="moviemusic-tab" class="">หนัง/เพลง</li>
	  <li id="variety-tab" class="">วาไรตี้</li>
	</ul>
</nav>
<div id="hilight">
	<div class="wrap" style="left: -1260px;">
		<section id="hotnews-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="entertain-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="sport-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>
		<section id="moviemusic-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
		<section id="variety-block" class="item-fade">
			<div class="banner"></div>
			<div class="hilight"></div>
			<div class="other"></div>
		</section>	
	</div>
</div>
</body>
</html>



ผมก็พอดูออกอยุครับว่าเป็น JQuery แต่ผมแกะแล้วมันไม่ได้ พอมาลองของท่านก็ยังไม่ได้อะครับ รบกวนด้วยนะครับ


ได้แล้วนะยังไงลองกดตรง ข่าวร้อน บันเทิง กีฬา หนัง อะแถบสีจะเลื่อนครับ ตามลิ้งดูครับ
http://jsfiddle.net/Ms2GG/



แหงะ ไม่ทันแล้วครับ ผมแกะของเจ้าอื่นไปเป็นที่เรียบร้อยแล้วงับ อิอิ แต่ก็ขอบคุณมากนะครับ ^ ^
บันทึกการเข้า
AFTERCODE.CO บริการพัฒนาเว็บไซต์ทุกรูปแบบ
เติมเกม บัตรเติมเงิน ซื้อง่ายด้วยไลน์บอท
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: