merlin425
شنبه 30 شهریور 1392, 18:59 عصر
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/a.css" rel="stylesheet" />
<script src="jquery-1.7.1.min.js"></script>
<script src="Private/SliderScript.js"></script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="~/Images/NewFolder1/003.jpg" /></li>
<li><img src="~/Images/NewFolder1/1.jpg" /></li>
<li><img src="~/Images/NewFolder1/2.jpg" /></li>
<li><img src="~/Images/NewFolder1/3.jpg" /></li>
</ul>
</div>
</body>
</html>
$(document).ready(function () {
var imgs = $('#slider').find('img'),
current = 0;
$("#slider ul li").fadeOut(0);
$("#slider ul li:eq(0)").fadeIn(0);
setInterval(Slide, 5000);
function Slide() {
var next;
if (current === imgs.length - 1)
next = 0;
else
next = current + 1;
$("#slider ul li:eq(" + current +")").fadeOut(1000);
$("#slider ul li:eq(" + next + ")").fadeIn(1000);
current = next;
}
});
body {
margin:0px;
padding:0px;
direction:rtl;
}
#slider {
background-color:white;
height:400px;
width:700px;
margin:100px auto;
overflow:hidden;
position:relative;
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
من اینا رو واسه خودم نوشتم استفاده کردم حالا شما بدون افکت میخای Script رو واسه خودت تغییر بده