اینم از سورس کد
کد HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> slide </title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#slider{
width:100%;
height:700px;
background:url(slide1.jpg);
background-size:100% 100%;
}
#s_controller{
width:100%;
height:40px;
padding-top:330px;
}
#next{
float:right;
padding-right:10px;
width:40px;
height:40px;
}
#prev{
float:left;
padding-left:10px;
}
</style>
</head>
<body>
<div id="slider">
<div id="s_controller">
<div id="next"><img src="c_r.png"></div>
<div id="prev"> <img src="c_l.png"></div>
</div>
</div>
<script type="text/javascript">
document.getElementById('next').onclick=function(){
alert('okk');
};
var aksha=new Array('slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg');
var adad=0;
index=0;
var interval;
function start(){
interval = setInterval(function(){
document.getElementById('slider').style.backgroundImage="url("+aksha[adad]+")";
adad++;
if(adad===4){
adad=0;
}
},3000);
}
function next(){
clearInterval(interval);
index++;
if(index===aksha.length){
index=0;
}
document.getElementById('slider').style.backgroundImage="url("+aksha[index]+")";
}
function prev(){
clearInterval(interval);
if(index===0){
index=aksha.length;
}
index--;
document.getElementById('slider').style.backgroundImage="url("+aksha[index]+")";
}
function slider(){
start();
document.getElementById('next').onclick=next;
document.getElementById('prev').onclick=prev;
}
slider();
</script>
</body>
</html>
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول