码迷,mamicode.com
首页 > 其他好文 > 详细

简单的一个轮播效果

时间:2014-08-18 23:18:12      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:style   io   ar   cti   div   html   log   时间   

刚刚学了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"
></li><li><img src="images/TB1HjqjFVXXXXcqaXXXSutbFXXX.jpg"
></li><li><img src="images/TB1MKkpFVXXXXXsXpXXSutbFXXX.jpg"
></li><li><img src="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>

简单的一个轮播效果,布布扣,bubuko.com

简单的一个轮播效果

标签:style   io   ar   cti   div   html   log   时间   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!