简单的一个轮播效果

刚刚学了Jquery,写了一个简单的图片滑动,但不是完成品。

<!DOCTYPE html>
<meta content="text/html" charset="utf-8"/>
<html>
<head>
<title></title>
<link href="css/lunbo.css" rel="stylesheet"/>
<script src="jquery-1.8.3.js"></script>
<script src="js/lunbo.js"></script>
</head>
<body>
<nav>
<div id="main">
<ul class="list">
<li><img src="images/TB1ERCWFVXXXXaVaXXXXK5zTVXX-520-280.png" alt=""
></li><li><img src="images/TB1HjqjFVXXXXcqaXXXSutbFXXX.jpg" alt=""
></li><li><img src="images/TB1MKkpFVXXXXXsXpXXSutbFXXX.jpg" alt=""
></li><li><img src="images/TB1naLvFVXXXXc6XVXXSutbFXXX.jpg" alt=""></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>

原文地址:https://www.cnblogs.com/limit1/p/3920554.html