有没有人知道如何使用简单的javascript和小css构建此图像磁带效果?产品:>示例:http://coolcarousels.frebsite.nl/c/56/
答案 0 :(得分:1)
如果您查看页面源,您将看到此脚本。
<script type="text/javascript" language="javascript" src="/js/jquery.carouFredSel.js"></script>
您还可以看到其调用的javascript(jQuery)代码
$(function() {
var _direction = 'left';
$('#carousel').carouFredSel({
direction: _direction,
responsive: true,
circular: false,
items: {
width: 350,
height: '100%',
visible: {
min: 2,
max: 5
}
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 500,
pauseOnHover: 'immediate',
onEnd: function( data ) {
_direction = ( _direction == 'left' ) ? 'right' : 'left';
$(this).trigger( 'configuration', [ 'direction', _direction ] );
}
}
});
});
您还将看到它在网站上应用的CSS样式
html, #c-carousel {
height: 100%;
padding: 0;
margin: 0;
}
#c-carousel {
min-height: 600px;
background-color: #e6e6e6;
}
#c-carousel * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 100%;
height: 200px;
position: absolute;
top: 150px;
left: 0;
}
#carousel {
width: 100%;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#source {
text-align: center;
width: 400px;
margin: 0 0 0 -200px;
position: absolute;
bottom: 10px;
left: 50%;
}
#source, #source a {
color: #999;
font-size: 12px;
}