Javidhb
شنبه 09 آذر 1392, 11:13 صبح
سلام،
1. بجای تغییر left بهتره که عکسها رو مخفی و تک تک نمایش بدید...
2. برای شناختن و اجرای بی دردس توابع جاوااسکریپ، کدهاتون رو پایین body بنویسید.
3. کدتون اینجوری درست میشه اما بازم ایراد داره.. (بهتره از روش بالا استفاده کنید):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#slidercontainer
{
overflow:hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
width: 492px;
height: 214px;
margin: auto;
position: relative;
}
#slidercontainer img {
float: left;
margin: 2px;
width: 492px;
height:214px;
}
#sliderme {
position: absolute;
left: 0px;
width: 1024px;
height: 214px;
background:#fff;
}
.nev {
margin :auto ;
width:492px;
height:214px;
position :relative ;
top:-216px;
}
</style>
</head>
<body>
<div id="slidercontainer">
<div id="sliderme">
<img src="image/01.png" alt="pic1" />
<img src="image/02.gif" alt="pic2" />
<img src="image/03.png" alt="pic3" />
<img src="image/04.gif" alt="pic3" />
</div>
</div>
<div class="nev">
<a href="#" id="next"> <img src="image/next.png" alt="next" id="next" style="float:right; top :100px;"/></a>
<a href="#" id="prev">1<img src="image/prev.png" alt="prev" id="prev" /></a>
</div>
<script type="text/javascript">
var l = 0;
var r = 0;
function next() {
l += 492;
document.getElementById("sliderme").style.left =l + "px";
return false;
}
function prev() {
r -=492;
document.getElementById("sliderme").style.left =r + "px";
return false;
}
//توابع رو اینجوری صدا بزنید
document.getElementById('next').addEventListener(' click', function() {
next();
}, false);
document.getElementById('prev').addEventListener(' click', function() {
prev();
}, false);
</script>
</body>
</html>
برای دیدن ایراد روشتون، "overflow:hidden" رو از slidercontainer پاک کنید و کدتون رو اجرا کنید