در این آموزش با کمک جاوا اسکریپت و کتابخانه جی کوئری یک اسلایدر ساده طراحی می کنیم،این اسلایدشو می تواند در هر جای سایت قرار داده شده و پیام های دلخواه شما را نشان دهد.
برای طراحی اسلایدشو ابتدا آرایه هایی در جاوااسکریپت تعریف کرده لینک ها، عناوین و توضیحات اسلاید شو در در انها قرار می دهیم.
<script>
var lnk_list=['http://blog.webaca.ir','http://www.wpcodes.ir'];
var tit_list=['codenevisan','wpcodes'];
var dsc_list=['programming education','wordpress code snippets'];
</script>
در ادامه دو تابع با جاوااسکریپت می نویسم یکی برای نمایش اسلاید و یکی برای مخفی کردن اسلاید، در داخل هر کدام از این توابع، برای نمایش پیام ها از جلوه های ویژه جی کوئری استفاده می شود، توابعی مثل sideUp یا slideDown برای باز و بسته شدن اسلایدی پیام ها و یا توابع دیگری مثل fadeIn و fadeOut برای ظاهر شدن یا محو شدن آهسته پیام ها استفاده می شود.سرعت هر کدام از این اعمال را هم می توان تنظیم کرد.
<script src="jquery.min.js"></script>
<script>
function slideOff(p){
if (p < 1) p++; else p=1;
$('#cn_slider').slideUp(1000, function(){
slideOn(p);
}); }
function slideOn(p){
document.getElementById("cn_title").innerHTML = tit_list[p];
document.getElementById("cn_link").setAttribute('href',lnk_list[p]);
document.getElementById("cn_descr").innerHTML = dsc_list[p];
$('#cn_slider').slideDown(1000 , function(){
setTimeout("slideOff("+p+")",5000); }); }
</script>
برای اینکه بتوانیم از توابع جی کوئری استفاده کنیم باید فایل jquery.min.js را معرفی کنیم.
برای شروع بکار اسلایدشو باید تابع برای نمایش اسلاید را پس از آماده شدن سند فراخوانی کنیم.
<script>
<script>
$(document).ready(function(){
slideOn(0);
});
</script>
برای قالب بندی اجزای اسلایدر از استایل شیت استفاده شده است:
<style>
<style>
.cn-slider{
padding-top: 10px;
width: 800px;
margin: auto;
height:190px;
text-align:center;
display:block;
}
#cn_slider{
text-align:center;
}
#cn_title{
color:#fff;
font-size:40px;
}
#cn_descr{
color:#C0F59F;
font-size:30px;
line-height: 30px; }
a{text-decoration: none;}
</style>
و این هم طراحی html اسلایدر:
<div class="cn-slider" style="background-image: url('back.jpg');">
<div id="cn_slider" >
<a id="cn_link" href="">
<h3 id="cn_title">
</h3>
<h5 id="cn_descr">
</h5>
</a>
</div>
</div>
در پایان هم طراحی کامل صفحه وب را با HTML می بینید:
<html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
var lnk_list=['http://blog.webaca.ir','http://www.wpcodes.ir'];
var tit_list=['codenevisan','wpcodes'];
var dsc_list=['programming education','wordpress code snippets'];
</script>
<script>
function slideOff(p){
if (p < 1) p++; else p=1;
$('#cn_slider').slideUp(1000, function(){
slideOn(p);
});
}
function slideOn(p){
document.getElementById("cn_title").innerHTML = tit_list[p];
document.getElementById("cn_link").setAttribute('href',lnk_list[p]);
document.getElementById("cn_descr").innerHTML = dsc_list[p];
$('#cn_slider').slideDown(1000 , function(){
setTimeout("slideOff("+p+")",5000);
});
}
</script>
<script>
$(document).ready(function(){
slideOn(0);
});
</script>
<style>
<style>
<style>
.cn-slider{
padding-top: 10px;
width: 800px;
margin: auto;
height:190px;
text-align:center;
display:block;
}
#cn_slider{
text-align:center;
}
#cn_title{
color:#fff;
font-size:40px;
}
#cn_descr{
color:#C0F59F;
font-size:30px;
line-height: 30px; }
a{text-decoration: none;}
</style>
</head>
<body>
<div class="cn-slider" style="background-image: url('back.jpg');">
<div id="cn_slider" >
<a id="cn_link" href="">
<h3 id="cn_title">
</h3>
<h5 id="cn_descr">
</h5> </a>
</div></div>
</body>
</html>
می توانید از لینک زیر اسلایدر آماده شده در این آموزش را دریافت کنید