abbas27
پنج شنبه 28 اسفند 1393, 17:31 عصر
سلام دوستان-من یه قطعه کداسلاید از یه سایت گرفتم حالا اسلاید توی کروم کار نمیکنه.یه قسمتش با jquery پیاده سازی شده.یه کد دیگه هم داشتم همین مشکل رو داره که بهش webkit اضافه کردم اونم درست نشد.
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../shoping/j-query/jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript">
$(function() {
carouselx("#carouselx1", "#pagerx1");
carouselx("#carouselx2", "#pagerx2");
carouselx("#carouselx3", "#pagerx3");
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, #pagerx3 {
text-align: center;
padding-top: 20px;
}
#pagerx1 a, #pagerx2 a, #pagerx3 a {
background: #ccc;
display: inline-block;
border-radius: 5px;
width: 10px;
height: 10px;
margin: 0 2px;
}
#pagerx1 a.selected, #pagerx2 a.selected, #pagerx3 a.selected {
background: #999;
}
.pager a:hover {
background: #666;
}
#pagerx1 a span, #pagerx2 a span, #pagerx3 a span {
display: none;
}
</style>
</head>
<body>
<div style="width:500px;height:110px;">
<div class="wrapperx">
<div class="carouselx" id="carouselx1">
<div class="dvimg"> <img src="img/fruit1.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></p>
<div style="width:500px;height:110px;">
<div class="wrapperx">
<div class="carouselx" id="carouselx3">
<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="pagerx3"></div>
</div>
</div>
</body>
</html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../shoping/j-query/jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript">
$(function() {
carouselx("#carouselx1", "#pagerx1");
carouselx("#carouselx2", "#pagerx2");
carouselx("#carouselx3", "#pagerx3");
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, #pagerx3 {
text-align: center;
padding-top: 20px;
}
#pagerx1 a, #pagerx2 a, #pagerx3 a {
background: #ccc;
display: inline-block;
border-radius: 5px;
width: 10px;
height: 10px;
margin: 0 2px;
}
#pagerx1 a.selected, #pagerx2 a.selected, #pagerx3 a.selected {
background: #999;
}
.pager a:hover {
background: #666;
}
#pagerx1 a span, #pagerx2 a span, #pagerx3 a span {
display: none;
}
</style>
</head>
<body>
<div style="width:500px;height:110px;">
<div class="wrapperx">
<div class="carouselx" id="carouselx1">
<div class="dvimg"> <img src="img/fruit1.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></p>
<div style="width:500px;height:110px;">
<div class="wrapperx">
<div class="carouselx" id="carouselx3">
<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="pagerx3"></div>
</div>
</div>
</body>
</html>