ตอนนี้จะทำ slideshow อ่ะค่ะ คือเลื่อนจากขวาไปซ้าย ใครรู้ช่วยหน่อยนะค่ะ งานต้องรีบส่งจิง ๆ ลองหามาหลายวันแล้วก็ยังไม่ได้สักที
ต้องเอาโค้ดที่ทำอยู่มาโพสให้ดูก่อนครับ จะได้ช่วยดูได้ว่าเกิดปัญหาตรงไหน
Date :
2012-11-15 11:01:31By :
dreamlover
slide.php Code (JavaScript)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jquery sliders</title>
<link rel="stylesheet" href="../css_slide/style.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scripts.js"></script>
</head>
<body>
<div id="head"><div class="wrap">
<div id="slide-holder">
<div style="width:775px; height:290px; float:left; color:#FFFFFF; padding:10px; background:rgba(255,255,255,0.3);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3DFFFFFF,endColorstr=#3DFFFFFF);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3DFFFFFF,endColorstr=#3DFFFFFF);
text-align:left; margin-bottom:10px;">
<div id="slide">
<div id="slider">
<ul>
<?php
$sql = "SELECT * FROM slide_show LIMIT 0, 10";
$result=mysql_query($sql) or die(mysql_error());
$num=mysql_num_rows($result)or die(mysql_error());
$i=0;
while($i<$num){
$row=mysql_fetch_array($result);
$slid_name=$row['slid_name'];
if ($slid_name!=""){
?>
<img src="img_slideshow/<?php echo "$slid_name"; ?>" data-thumb="img_slideshow/<?php echo "$slid_name"; ?>" alt="" title="" />
<?php
$i++;
}
}
?>
</ul>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>
</div>
</div>
</div>
</body>
style.css
* {
margin : 0;
padding : 0;
}
html {
height : 100%;
}
body {
height : 100%;
color : #a4a4a4;
cursor : default;
font-size : 11px;
line-height : 16px;
text-align : center;
background-color : #000;
background-position : 50% 0;
background-repeat : no-repeat;
font-family : Tahoma, sans-serif;
}
a:link, a:visited {
color : #fff;
text-decoration : none;
}
a img {
border : 0;
}
div.wrap {
width : 993px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 993px;
height :52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#head {
margin : -1px 0 0;
}
div#video-head {
height : 683px;
margin : -1px 0 0;
}
/*div#header div.wrap {
height : 700px;
background : url(images/header-bg.png) no-repeat 50% 0;
}*/
div#head div#slide-holder {
z-index : 40;
width : 993px;
height : 280px;
position : absolute;
}
div#head div#slide-holder div#slide-runner {
top : 9px;
left : 9px;
width : 750px;
height :280px;
overflow : hidden;
position : absolute;
}
div#head div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#head div#slide-holder div#slide-controls {
left : 0;
bottom : 228px;
width : 750px;
height : 46px;
display : none;
position : absolute;
background : url(images/slide-bg.png) 0 0;
}
div#head div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#head div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#head div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#head div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#head div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(images/silde-nav.png);
}
div#nav ul li a {
background : url(images/nav.png) no-repeat;
}
scripts.js Code (JavaScript)
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
+'\nError description: \t'+desc
+'\nPage address: \t'+page
+'\nLine number: \t'+line
);*/
}
$(function(){
$('a').focus(function(){this.blur();});
SI.Files.stylizeAll();
slider.init();
$('input.text-default').each(function(){
$(this).attr('default',$(this).val());
}).focus(function(){
if($(this).val()==$(this).attr('default'))
$(this).val('');
}).blur(function(){
if($(this).val()=='')
$(this).val($(this).attr('default'));
});
$('input.text,textarea.text').focus(function(){
$(this).addClass('textfocus');
}).blur(function(){
$(this).removeClass('textfocus');
});
var popopenobj=0,popopenaobj=null;
$('a.popup').click(function(){
var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
var pobj=$('#'+pid);
if(!pobj.length)
return false;
if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
popopenobj.hide(50);
$(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
popopenobj=null;
}
return false;
});
$('p.images img').click(function(){
var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
$(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
$(this).parent().find('img').removeClass('on');
$(this).addClass('on');
return false;
});
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
$('div.sc-large div.img:has(div.tml)').each(function(){
$('div.tml',this).hide();
$(this).append('<a href="#" class="tml_open"> </a>').find('a').css({
left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
}).click(function(){
$(this).siblings('div.tml').slideToggle();
return false;
}).focus(function(){this.blur();});
});
});
var slider={
num:-1,
cur:0,
cr:[],
al:null,
at:10*1000,
ar:true,
init:function(){
if(!slider.data || !slider.data.length)
return false;
var d=slider.data;
slider.num=d.length;
var pos=Math.floor(Math.random()*1);//slider.num);
for(var i=0;i<slider.num;i++){
$('#'+d[i].id).css({left:((i-pos)*1000)});
$('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
}
$('img,div#slide-controls',$('div#slide-holder')).fadeIn();
slider.text(d[pos]);
slider.on(pos);
slider.cur=pos;
window.setTimeout('slider.auto();',slider.at);
},
auto:function(){
if(!slider.ar)
return false;
var next=slider.cur+1;
if(next>=slider.num) next=0;
slider.slide(next);
},
slide:function(pos){
if(pos<0 || pos>=slider.num || pos==slider.cur)
return;
window.clearTimeout(slider.al);
slider.al=window.setTimeout('slider.auto();',slider.at);
var d=slider.data;
for(var i=0;i<slider.num;i++)
$('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
slider.on(pos);
slider.text(d[pos]);
slider.cur=pos;
},
on:function(pos){
$('#slide-nav a').removeClass('on');
$('#slide-nav a#slide-link-'+pos).addClass('on');
},
text:function(di){
slider.cr['a']=di.client;
slider.cr['b']=di.desc;
slider.ticker('#slide-client span',di.client,0,'a');
slider.ticker('#slide-desc',di.desc,0,'b');
},
ticker:function(el,text,pos,unique){
if(slider.cr[unique]!=text)
return false;
ctext=text.substring(0,pos)+(pos%2?'-':'_');
$(el).html(ctext);
if(pos==text.length)
$(el).html(text);
else
window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
}
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
htmlClass:'SI-FILES-STYLIZED',
fileClass:'file',
wrapClass:'cabinet',
fini:false,
able:false,
init:function(){
this.fini=true;
},
stylize:function(elem){
if(!this.fini){this.init();};
if(!this.able){return;};
elem.parentNode.file=elem;
elem.parentNode.onmousemove=function(e){
if(typeof e=='undefined') e=window.event;
if(typeof e.pageY=='undefined' && typeof e.clientX=='number' && document.documentElement){
e.pageX=e.clientX+document.documentElement.scrollLeft;
e.pageY=e.clientY+document.documentElement.scrollTop;
};
var ox=oy=0;
var elem=this;
if(elem.offsetParent){
ox=elem.offsetLeft;
oy=elem.offsetTop;
while(elem=elem.offsetParent){
ox+=elem.offsetLeft;
oy+=elem.offsetTop;
};
};
};
},
stylizeAll:function(){
if(!this.fini){this.init();};
if(!this.able){return;};
}
};
index.php Code (JavaScript)
<? include("Conf/config.inc.php");
include("Conf/function_condb.php");?>
<!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>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pra_stamp</title>
</head>
<body>
<div id="wrapper">
<div id="body_wrapper">
<!-- header -->
<div id="header"></div>
<!-- /header -->
<!-- menu -->
<div id="menu">
<? include"include/menutop.php"; ?>
</div>
<!-- menu -->
<div id="body">
<!-- mode product -->
<div id="leftbody">
<? include"include/menuleft.php"; ?>
<!-- /mode product -->
<!-- search -->
<? include"include/search.php"; ?>
</div>
<!-- /search -->
<!-- linkmenutop -->
<div id="rightbody">
<? include"page/index.php"; ?>
</div>
<!-- /linkmenutop -->
<!-- footer -->
<div id="footer">
<? include"include/footer.php"; ?>
</div>
<!-- /footer -->
</div>
</div>
</div>
</body>
</html>
Date :
2012-11-15 14:22:43By :
bum
ผมดูจากโค้ดตอนนี้เห็นอยู่สองจุดคือCode (JavaScript)
if(!window.slider)
var slider={};
slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
Code (JavaScript)
if(!window.slider) {
var slider={};
slider.data=[...];
...
}
Date :
2012-11-15 15:19:57By :
dreamlover
ระวังเรื่องไฟล์ประกอบนะครับ เช่น .min.js ประมาณนี้
Date :
2012-11-15 16:09:25By :
Dragons_first
ขอบคุณมาก ๆๆ ค่ะ ตอนนี้ทามได้ แล้วค่ะ
Date :
2012-11-16 09:20:49By :
nuben
Server 00
Load balance : Server 00
