r4hgozar
چهارشنبه 05 تیر 1392, 14:41 عصر
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<?php bloginfo('name'); ?>
</title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
</head>
این فایل index.php
<div id="wapper-slider">
<div id="slider"> <a href="#right" class="right"></a> <a href="#left" class="left"></a>
<div id="image">
<ul>
<li><img src="<?php bloginfo('template_url'); ?>/img/slider/1.png" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/slider/2.png" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/slider/3.png" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/slider/4.png" /></li>
</ul>
</div>
</div>
این فایل جی کوئری خودم
// JavaScript Document
$(function(){
var i=0;
$('#image').css('overflow-x' , 'hidden');
$('#slider a').css('display' , 'block');
$('#slider a').css ('opacity' , '0.0')
$('#image').scrollLeft(0);
window.setInterval(function (){
if (i>3)
i=-1;
i++;
$('#image').animate({scrollLeft: i*400},500);
},1000)
$('#slider').mouseenter(function(){
$('#slider a').animate({opacity: 1.0},300);
});
$('#slider').mouseleave(function(){
$('#slider a').animate({opacity:0.0},300)
});
$('#slider .right').click(function(){
if (i>3)
i=-1;
i++;
$('#image').animate({scrollLeft: i*400},500);
});
$('#slider .left').click(function(){
if(i<=0)
i=4;
i--;
$('#image').animate({scrollLeft: i*400},500);
});
});
و اون هم که فایل اصلی جی کوئری.
اومدم واسه تمرین داشتم یه اسلایدر ساده می نوشتم واسه وردپرس.