首页 > 代码库 > 简单的一个轮播效果
简单的一个轮播效果
刚刚学了Jquery,写了一个简单的图片滑动，但不是完成品。
<!DOCTYPE html>
<meta content="text/html" charset="utf-8"/>
<html>
<head>
<title></title>
<link href="http://www.mamicode.com/css/lunbo.css" rel="stylesheet"/>
<script src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script src="http://www.mamicode.com/js/lunbo.js"></script>
</head>
<body>
<nav>
<div id="main">
<ul class="list">
<li><img src="http://www.mamicode.com/images/TB1ERCWFVXXXXaVaXXXXK5zTVXX-520-280.png"
></li><li><img src="http://www.mamicode.com/images/TB1HjqjFVXXXXcqaXXXSutbFXXX.jpg"
></li><li><img src="http://www.mamicode.com/images/TB1MKkpFVXXXXXsXpXXSutbFXXX.jpg"
></li><li><img src="http://www.mamicode.com/images/TB1naLvFVXXXXc6XVXXSutbFXXX.jpg" ></li></ul>
</div>
</nav>
</body>
<script>
setInterval(function(){
//图片滑轮效果要在setinterval中执行，改方法有2个参数一个时，执行的函数，一个时时间间隔
$(‘.list li‘).first().animate({marginLeft:‘-520px‘},1000,function(){
//jquery获取元素的节点跟css很相似， 在该类选择器的li中得到li中的第一个元素，方法是first()方法，得到的元素要滑动，则执行动画效果，向右移动520px,这个移动的时间是1s,再动画中添加一个匿名函数，来使得前面执行完的图片接着后面执行。
// console.log(this)
//打印得出当前的移动对象
var temp=$(this).clone();
//进行对当前对象克隆一份
temp.css({marginLeft:‘0px‘});
//克隆的对象包含之前的css属性，我们要重新定义
$(‘.list‘).append(temp);
//把对象添加到类容器中
$(this).remove();
//删除之前的对象，为了下一个移动
})
},2000)
</script>
</html>