abbas27
دوشنبه 11 اسفند 1393, 17:32 عصر
سلام بر دوستان.
من یه اسلاید از یه سایت دانلود کردم بعد وقتی که از اسلاید یکبار تو صفحه استفاده بشه جواب میده ولی وقتی بخوام همون اسلاید رو دو یا چند بار تو صفحه استفاده کنم کار نمیکنه و فقط اسلاید اول کار میکنه و بقیه بدون حرکت میمونن
<!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> </p>
</body>
</html>
من یه اسلاید از یه سایت دانلود کردم بعد وقتی که از اسلاید یکبار تو صفحه استفاده بشه جواب میده ولی وقتی بخوام همون اسلاید رو دو یا چند بار تو صفحه استفاده کنم کار نمیکنه و فقط اسلاید اول کار میکنه و بقیه بدون حرکت میمونن
<!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> </p>
</body>
</html>