ใครมีสคริป Slide Content บ้างครับ [มีตัวอย่าง] ขอหน่อยๆๆ ^ ^

เริ่มโดย kuzaa516, 23 เมษายน 2013, 18:24:48

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

kuzaa516

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

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

ขอบคุณครับ
[direct=https://aftercode.co]AFTERCODE.CO บริการพัฒนาเว็บไซต์ทุกรูปแบบ[/direct]
[direct=https://www.ceegamer.com]เติมเกม บัตรเติมเงิน ซื้อง่ายด้วยไลน์บอท[/direct]

hisupakorn

#1
24 เมษายน 2013, 00:29:25
คือผมว่าเค้าเขียนเองนะ ใช้ JQuery ละ โค้ดผมแกะให้ละน่าจะพอแก้ต่อได้นะครับ  :-[

hisupakorn

#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

#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 แต่ผมแกะแล้วมันไม่ได้ พอมาลองของท่านก็ยังไม่ได้อะครับ รบกวนด้วยนะครับ
[direct=https://aftercode.co]AFTERCODE.CO บริการพัฒนาเว็บไซต์ทุกรูปแบบ[/direct]
[direct=https://www.ceegamer.com]เติมเกม บัตรเติมเงิน ซื้อง่ายด้วยไลน์บอท[/direct]

hisupakorn

#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

#5
24 เมษายน 2013, 22:47:50
ผมเห็นของฟรีในเน็ตเพียบเลยครับ (ยังไม่เคยเอามาลองสักตัว !  :'()

kuzaa516

#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/


แหงะ ไม่ทันแล้วครับ ผมแกะของเจ้าอื่นไปเป็นที่เรียบร้อยแล้วงับ อิอิ แต่ก็ขอบคุณมากนะครับ ^ ^
[direct=https://aftercode.co]AFTERCODE.CO บริการพัฒนาเว็บไซต์ทุกรูปแบบ[/direct]
[direct=https://www.ceegamer.com]เติมเกม บัตรเติมเงิน ซื้อง่ายด้วยไลน์บอท[/direct]
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้