PDA

View Full Version : مشکل در slide


abbas27
دوشنبه 11 اسفند 1393, 18:28 عصر
سلام بر دوستان.
من یه اسلاید از یه سایت دانلود کردم بعد وقتی که از اسلاید یکبار تو صفحه استفاده بشه جواب میده ولی وقتی بخوام همون اسلاید رو دو یا چند بار تو صفحه استفاده کنم کار نمیکنه و فقط اسلاید اول کار میکنه و بقیه بدون حرکت میمونن



<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript">
$(function() {


$('#carouselx').carouFredSel({
width: '100%',
items: {
visible: 'odd+2'
},
scroll: {
pauseOnHover: 'immediate',
onBefore: function() {
$(this).children().removeClass( 'hover' );
}
},
auto: {
items: 1,
easing: 'linear',
duration: 3000,
timeoutDuration: 0
},
pagination: {
container: '#pagerx',
items: 1,
duration: 0.5,
queue: 'last',
queue: 'last',
onAfter: function() {
var cur = $(this).triggerHandler( 'currentVisible' ),
mid = Math.floor( cur.length / 2 );


cur.eq( mid ).addClass( 'hover' );
}
}
});


});
</script>
<style type="text/css">
.dvimg {
width: 50px;
height: 50px;
}
#wrapperx {
background-color: #fff;
border-top: 1px solid #ccc;
width: 400px;
height: 80px;
position: relative;
left: 0;
bottom: 0;
display: inline-block;
}
#carouselx div {
text-align: center;
width: 50px;
height: 50px;
float: left;
position: relative;
overflow: hidden;
}
#carouselx div img {
border: none;
width: 50px;
height: 50px;
}
#carouselx div span {
display: none;
}
#carouselx div:hover span, #carouselx div.hover span {
background-color: #333;
color: #fff;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 0;
left: 50%;
border-radius: 3px;
}
#pagerx {
text-align: center;
padding-top: 20px;
}
#pagerx a {
background: #ccc;
display: inline-block;
border-radius: 5px;
width: 10px;
height: 10px;
margin: 0 2px;
}
#pagerx a.selected {
background: #999;
}
#pager a:hover {
background: #666;
}
#pagerx a span {
display: none;
}
#donate-spacer {
height: 100%;
}
#donatex {
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donatex p, #donate form {
margin: 0;
float: left;
}
#donatex p {
width: 650px;
}
#donatex form {
width: 100px;
}
</style>
</head>
<body>
<div style="width:500px;height:110px;">
<div id="wrapperx">
<div id="carouselx">
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit1" width="200" height="200" /> <span>Apple</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit2" width="200" height="200" /> <span>Mandarin</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit3" width="200" height="200" /> <span>Banannas</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit4" width="200" height="92" /> <span>Cherries</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit5" width="200" height="200" /> <span>Orange</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
</div>
<div id="pagerx"></div>
</div>
</div>
<div style="width:500px;height:110px;">
<div id="wrapperx">
<div id="carouselx">
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit1" width="200" height="200" /> <span>Apple</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit2" width="200" height="200" /> <span>Mandarin</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit3" width="200" height="200" /> <span>Banannas</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit4" width="200" height="92" /> <span>Cherries</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit5" width="200" height="200" /> <span>Orange</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
</div>
<div id="pagerx"></div>
</div>
</div>
<p>&nbsp;</p>
</body>
</html>
Omid Jackson
دوشنبه 11 اسفند 1393, 20:51 عصر
فایل رو تست نکردم، ولی تنها احتمالی که میدم بخاطر این هست که از یک آی دی برای چند تگ استفاده کردین، آی دی فقط برای یک تگ استفاده میشه به همین دلیل اولین تگ با آی دی رو میگیره دیگه با بقیه کاری نداره، مثال هم زدم:
http://jsfiddle.net/Blend_Design/qtfuov2k/
4 تا دیو تست هست بدون رنگ که با جی کوئری رنگ دادم به آی دی تست، میاد اولین تست رو فقط رنگی میکنه، چاره کار این هست که تمامی آی دی ها رو به جاش بنویسیم کلاس و تمام "#" ها رو هم بکنیم "." هم css و هم js، مورد اول هم که تو html
abbas27
دوشنبه 11 اسفند 1393, 21:27 عصر
این کارهایی که گفتی رو هم انجام دادم درست شد ولی یه مشکل داره.اونم اینه که فرض کن من از این اسلاید4 بار تو صفحه استفاده کرده باشم بعد یه قسمت داره که تصاویر رو عقب و جلو میبره.وقتی به فرض من بخوایم تصاویر بکی از اسلاید ها رو مرور کنم و کلید next رو بزنم همه اسلایدها با هم به جلو حرکت میکنن.دلیلش هم کدهای jquery هست که برای همه اسلایدها فقط از همون یه دونه کد استفاده میشه.اگه بخوام هر کدوم بطور مجزا کار کنه آیا باید برای هر کدوم از css و jquery متفاوت استفاده کنم؟نمیدونم چیکارش کنم.راهی نیست که نخوام کدها رو تکرار کنم؟
Omid Jackson
دوشنبه 11 اسفند 1393, 22:21 عصر
چاره کار اینه همه اون آی دی ها که گفتم رو کلاس کنین ولی آی دی carouselx رو بذارین بمونه (مثلا دیو رو با این شکل تغییر بدین):

<div id="carouselx" class="carouselx">
توی CSS از کلاس استفاده کنین ولی توی جی کوئری از آی دی
فقط یه نکته!!!
آی دی ها با هم فرق داشته باشن! مثلا آی دی ها رو اینجوری بدین (کلاس ها یکی باشن چون تو CSS استفاده میشه یکی هست):
carouselx1
carouselx2
carouselx3
carouselx4
حالا توی جاوا اسکریپت نحوه استفاده کردن ازش فرق داره، باید بنویسین:
$(function () {
$('#carouselx1, #carouselx2, #carouselx3, #carouselx4').carouFredSel({
width: '100%',
items: {
visible: 'odd+2'
},
scroll: {
pauseOnHover: 'immediate',
onBefore: function () {
$(this).children().removeClass('hover');
}
},
auto: {
items: 1,
easing: 'linear',
duration: 3000,
timeoutDuration: 0
},
pagination: {
container: '#pagerx',
items: 1,
duration: 0.5,
queue: 'last',
queue: 'last',
onAfter: function () {
var cur = $(this).triggerHandler('currentVisible'),
mid = Math.floor(cur.length / 2);
cur.eq(mid).addClass('hover');
}
}
});
});
اینجوری از هم جدا میشن
abbas27
سه شنبه 12 اسفند 1393, 19:50 عصر
کدها رو به این شکل تغییر دادم اما وقتی میخوام مثلاتصویر چهارم رو نگاه کنم مشکل داره.تصویر زیر نگاه کن وقتی روی هر کدوم از اون دایرهای کوچیک برای پیمایش عکس کلیک میکنم فقط رو تصویر پایین اثر میذاره و فقط همون عقب جلو میشه و ترتییب انتخاب دایره ها هم به میریزه.(مثلا رو دایره اولی کلیک کنی تصویر پایین پیمایش میشه اما رو هر دوتا دایره های پیمایش اثر میزاره بدون اینکه تصویر بالایی تغییر تغییر کنه).قسمت جاوا اسکریپت( container: '#pagerx1,#pagerx2) رو هم اینجوری تغییر دادم.همین قسمت رو با آیدی و با کلاس هم امتحانش کردم نشد129069



<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript">
$(function() {


$('#carouselx1,#carouselx2').carouFredSel({
width: '100%',
items: {
visible: 'odd+2'
},
scroll: {
pauseOnHover: 'immediate',
onBefore: function() {
$(this).children().removeClass( 'hover' );
}
},
auto: {
items: 1,
easing: 'linear',
duration: 5000,
timeoutDuration: 0
},
pagination: {
container: '#pagerx1,#pagerx2',
items: 1,
duration: 0.5,
queue: 'last',
queue: 'last',
onAfter: function() {
var cur = $(this).triggerHandler( 'currentVisible' ),
mid = Math.floor( cur.length / 2 );


cur.eq( mid ).addClass( 'hover' );
}
}
});


});
</script>
<style type="text/css">
.dvimg {
width: 50px;
height: 50px;
}
.wrapperx {
background-color: #fff;
border-top: 1px solid #ccc;
width: 400px;
height: 80px;
position: relative;
left: 0;
bottom: 0;
display: inline-block;
}
.carouselx div {
text-align: center;
width: 50px;
height: 50px;
float: left;
position: relative;
overflow: hidden;
}
.carouselx div img {
border: none;
width: 50px;
height: 50px;
}
.carouselx div span {
display: none;
}
.carouselx div:hover span, .carouselx div.hover span {
background-color: #333;
color: #fff;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 0;
left: 50%;
border-radius: 3px;
}
.pagerx {
text-align: center;
padding-top: 20px;
}
.pagerx a {
background: #ccc;
display: inline-block;
border-radius: 5px;
width: 10px;
height: 10px;
margin: 0 2px;
}
.pagerx a.selected {
background: #999;
}
.pager a:hover {
background: #666;
}
.pagerx a span {
display: none;
}
</style>
</head>
<body>
<div style="width:500px;height:110px;">
<div id="wrapperx1" class="wrapperx">
<div id="carouselx1" class="carouselx">
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit1" width="200" height="200" /> <span>Apple</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit2" width="200" height="200" /> <span>Mandarin</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit3" width="200" height="200" /> <span>Banannas</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit4" width="200" height="92" /> <span>Cherries</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit5" width="200" height="200" /> <span>Orange</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
</div>
<div id="pagerx1" class="pagerx"></div>
</div>
</div>
<div style="width:500px;height:110px;">
<div id="wrapperx2" class="wrapperx">
<div id="carouselx2" class="carouselx">
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit1" width="200" height="200" /> <span>Apple</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit2" width="200" height="200" /> <span>Mandarin</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit3" width="200" height="200" /> <span>Banannas</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit4" width="200" height="92" /> <span>Cherries</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit5" width="200" height="200" /> <span>Orange</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
</div>
<div id="pagerx2" class="pagerx"></div>
</div>
</div>
<p>&nbsp;</p>
</body>
</html>
Omid Jackson
چهارشنبه 13 اسفند 1393, 02:13 صبح
<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript">
$(function() {
carouselx("#carouselx1", "#pagerx1");
carouselx("#carouselx2", "#pagerx2");
function carouselx(car, pager) {
$(car).carouFredSel({
width: '100%',
items: {
visible: 'odd+2'
},
scroll: {
pauseOnHover: 'immediate',
onBefore: function () {
$(this).children().removeClass('hover');
}
},
auto: {
items: 1,
easing: 'linear',
duration: 3000,
timeoutDuration: 0
},
pagination: {
container: pager,
items: 1,
duration: 0.5,
queue: 'last',
queue: 'last',
onAfter: function () {
var cur = $(this).triggerHandler('currentVisible'),
mid = Math.floor(cur.length / 2);

cur.eq(mid).addClass('hover');
}
}
});
};
});
</script>
<style type="text/css">
.dvimg {
width: 50px;
height: 50px;
}

.wrapperx {
background-color: .fff;
border-top: 1px solid .ccc;
width: 400px;
height: 80px;
position: relative;
left: 0;
bottom: 0;
display: inline-block;
}

.carouselx div {
text-align: center;
width: 50px;
height: 50px;
float: left;
position: relative;
overflow: hidden;
}

.carouselx div img {
border: none;
width: 50px;
height: 50px;
}

.carouselx div span {
display: none;
}

.carouselx div:hover span,
.carouselx div.hover span {
background-color: #333;
color: #fff;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 0;
left: 50%;
border-radius: 3px;
}

#pagerx1, #pagerx2 {
text-align: center;
padding-top: 20px;
}

#pagerx1 a, #pagerx2 a {
background: #ccc;
display: inline-block;
border-radius: 5px;
width: 10px;
height: 10px;
margin: 0 2px;
}

#pagerx1 a.selected, #pagerx2 a.selected {
background: #999;
}

.pager a:hover {
background: #666;
}

#pagerx1 a span, #pagerx2 a span {
display: none;
}

.donate-spacer {
height: 100%;
}

.donatex {
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}

.donatex p,
.donate form {
margin: 0;
float: left;
}

.donatex p {
width: 650px;
}

.donatex form {
width: 100px;
}
</style>
</head>

<body>
<div style="width:500px;height:110px;">
<div class="wrapperx">
<div class="carouselx" id="carouselx1">
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit1" width="200" height="200" /> <span>Apple</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit2" width="200" height="200" /> <span>Mandarin</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit3" width="200" height="200" /> <span>Banannas</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit4" width="200" height="92" /> <span>Cherries</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit5" width="200" height="200" /> <span>Orange</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
</div>
<div id="pagerx1"></div>
</div>
</div>
<div style="width:500px;height:110px;">
<div class="wrapperx">
<div class="carouselx" id="carouselx2">
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit1" width="200" height="200" /> <span>Apple</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit2" width="200" height="200" /> <span>Mandarin</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit3" width="200" height="200" /> <span>Banannas</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit4" width="200" height="92" /> <span>Cherries</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit5" width="200" height="200" /> <span>Orange</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
<div class="dvimg"> <img src="img/fruit12.png" alt="fruit12" width="100" height="200" /> <span>Melon</span> </div>
</div>
<div id="pagerx2"></div>
</div>
</div>
<p>&nbsp;</p>
</body>

</html>
من با یه شیوه دیگه درست کردمش
اون رو به عنوان تابع نوشتم و به جای یه سری چیز ها پارامتر تعریف کردم، کافیه تابع رو یک بار فراخوانی بکنیم با پارامتر مختلف مثل:
carouselx("#carouselx1", "#pagerx1");
carouselx("#carouselx2", "#pagerx2");
نسبت به این شما میتونین یک تابع جدید بنویسین فقط تو کد ها دقت کنید (HTML) که چه چیز هایی تغییر کرده
به نظر خودم درست کار میکنه، تست کنید و بهم بگین جواب رو
abbas27
چهارشنبه 13 اسفند 1393, 11:08 صبح
مرسی داری استاد.الان عالی شد.خیلی زحمت کشیدی/ممنون:خجالت::خجالت::خجالت::خ الت::خجالت::خجالت: