属性:
效果:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.min.js"></script>
<title></title>
<style>
#pic{width:320px; height:150px; overflow:hidden;}
#pic img{width:320px; height:150px;}
</style>
</head>
<body>
<div id="pic">
<img src="./images/img_1.png" alt="" />
<img src="./images/img_2.png" alt="" />
<img src="./images/img_3.png" alt="" />
</div><!--pic-->
<script>
$(function(){
$('#pic').cycle({
fx: 'scrollLeft', //特效
speed: 300, //特效时间
timeout: 2000, //切换间隔时间
pause: 1, //布尔值,鼠标指上去是否暂停
});
});
</script>
</body>
</html>
效果:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.min.js"></script>
<title></title>
<style>
#pic{width:320px; height:150px; overflow:hidden;}
#pic img{width:320px; height:150px;}
</style>
</head>
<body>
<div id="pic">
<img src="./images/img_1.png" alt="" />
<img src="./images/img_2.png" alt="" />
<img src="./images/img_3.png" alt="" />
</div><!--pic-->
<script>
$(function(){
$('#pic').cycle({
fx: 'scrollLeft', //特效
speed: 300, //特效时间
timeout: 2000, //切换间隔时间
pause: 1, //布尔值,鼠标指上去是否暂停
});
});
</script>
</body>
</html>