我使用了旋转木马滑块,它给出了我想要的东西,但问题是它需要动态宽度到我不想要的滑块。根据桌面屏幕分辨率,它设置div“caroufredsel_wrapper”的宽度。我只想将这个类的大小设置为1024px。我所做的如下:
<div style="height:150px;width:1024px;display:inline-block;">
<div id="carousel" style="overflow:hidden; float:right;">
<div>
<img src="img/1.png" alt="fruit1" width="105" height="116" />
</div>
<div>
<img src="img/2.jpg" alt="fruit2" width="105" height="116" />
</div>
<div>
<img src="img/3.jpg" alt="fruit3" width="105" height="116" />
</div>
<div>
<img src="img/4.jpg" alt="fruit4" width="105" height="116" />
</div>
<div>
<img src="img/5.jpg" alt="fruit5" width="105" height="116" />
</div>
<div>
<img src="img/6.jpg" alt="fruit6" width="105" height="116" />
</div>
<div>
<img src="img/7.jpg" alt="fruit7" width="105" height="116" />
</div>
<div>
<img src="img/8.jpg" alt="fruit8" width="105" height="116" />
</div>
<div>
<img src="img/9.jpg" alt="fruit9" width="105" height="116" />
</div>
<div>
<img src="img/10.jpg" alt="fruit10" width="105" height="116" />
</div>
<div>
<img src="img/11.jpg" alt="fruit11" width="105" height="116" />
</div>
<div>
<img src="img/12.jpg" alt="fruit12" width="105" height="116" />
</div>
</div>
</div>
的style.css
#carousel {
margin-top: 20px;
}
#carousel div {
text-align: center;
width: 130px;
height: 130px;
float: left;
position: relative;
}
#carousel div img {
border: none;
border-radius:10px;
box-shadow:5px 5px 5px #333;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
line-height: 22px;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 30px;
left: 50%;
border-radius: 3px;
}
然后下面是我使用的脚本:
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 10,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
任何人都可以告诉我应该怎么做才能将此轮播滑块宽度设置为1024px。提前谢谢..