vahid

عمل نکردن دو تا function که برای دکمه های next و prev

vahid ۱۳۹۵/۰۴/۰۹ زبان برنامه‌نویسی جاوا‌اسکریپت

سلام به همگی..

من یه اسلایدر دارم میسازم ولی کدی که براش زدم کار نمیکنه وفقط یه بار function  اجرا میکنه...به نظرتون ایرادش از کجاست؟از این اسلایدرایی هستش که چندتا عکس اولش هست بعدش با کلیک دونه دونه جابجا میشن مثله همونی که تو سایت دیواره...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Css.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<title>Untitled Document</title>

<script>


var i;
$(document).ready(function(e) {
	for(i=0;i<$("img").length;i++){
		
    $("#next").on("click" ,function(){
		$(".container").css("right","300px");	
	});}
	
	for(i=0;i<$("img").length;i++){
		
    $("#pre").on("click" ,function(){
		$(".container").css("left","300px");	
	});}
	

});
</script>
</head>

<body>

<div class="slider">

   <div class="container">
   	<img src="images/1.jpg" width="1920" height="300px"/>
    <img src="images/2.jpg" width="1920" height="300px"/>
    <img src="images/3.jpg" width="1920" height="300px"/>
    <img src="images/4.jpg" width="1920" height="300px"/>
    <img src="images/2.jpg" width="1920" height="300px"/>
    <img src="images/3.jpg" width="1920" height="300px"/>
    <img src="images/2.jpg" width="1920" height="300px"/>
   </div>
<a id="next" href="#">next</a>
<a id="pre" href="#">pre</a>
</div>

</body>
</html>
پاسخ‌ها به این تاپیک
stack programer
stack programer
۱۳۹۵/۰۴/۱۱

سلام،فانکشنی که برای کلیک کردن نوشتی اصلا نباید کار کنه،خود فانکشن را داخل حلقه فورگذاشتی!!!حلقه فور خیلی سریع ران می شه و اون مرحله شما اصلا زمان کلیک کردن ندارید....

از این سورس استفاده کنید

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {

	var currentIndex = 0,
  items = $('.container div'),
  itemAmt = items.length;

function cycleItems() {
  var item = $('.container div').eq(currentIndex);
  items.hide();
  item.css('display','inline-block');
}

var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 3000);

$('.next').click(function() {
  clearInterval(autoSlide);
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});

$('.prev').click(function() {
  clearInterval(autoSlide);
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
  cycleItems();
});

});
</script>

<style>
.container {
  max-width: 400px;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.container div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.container img {
  width: 100%;
  height: auto;
}

button {
  position: absolute;
}

.next {
  right: 5px;
}

.prev {
  left: 5px;
}	



</style>
</head>
<body>
<section class="demo">
  <button class="next">Next</button>
  <button class="prev">Previous</button>
  <div class="container">
    <div style="display: inline-block;">
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
     <img src="https://placeimg.com/400/200/any"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/nature"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/architecture"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/animals"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/tech"/>
    </div>
  </div>
</section>

<div class="explanation">
  Building a slideshow like pattern that can accurately cycle through a number of unknown divs, forwards and backwards. Trying to use as little code as possible. Leave a comment if you see a way to do it better!
</div>
</body>
</html>

 

 

 

 

برای تست به اینترنت وصل باشید....بعد حالا این را به عنوان یک سمپل شروع کنید برای خودتون تحلیل کنید که داره چه کار می کند...بعد از این الهام بگیرید رو مدل خودتون پیاده کنید اینجا به اشتراک بگذارید اگه ممکنه در مورد نحوه کار کردنش هم یک توضیح بدهید..

vahid
vahid
۱۳۹۵/۰۴/۰۹

اینم css

body{
	margin:0;
	padding:0;
	
}

.slider{
	position:relative;
	width:900px;
	background-color:blue;
	overflow:hidden;
	margin:auto;
}

.container{
	width:6000px;
	height:250px;
	background-color:red;
	position:relative;
	overflow:auto;
}

img{
width:300px;
float:left;
}

#next{
	position:absolute;
	top:130px;
	right:2px;
}

#pre{
	position:absolute;
	top:130px;
	left:2px;
}