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

简单的轮播图代码

时间:2017-06-09 15:17:44      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:src   ann   ext   简单的   tin   htm   cti   float   dex   

<html>

<script type="text/javascript" src="./jquery.min.js"></script>

<body>
<style type="text/css">
.banner{ height:365px; overflow:hidden;}
.banner ul{ float:left; position:relative; left:50%; margin-left:-960px;}
.banner ul li{ float:left;}
</style>

<div class="banner clearfix">
<ul>
<li><img src="img/1.jpg" />1</li>
<li><img src="img/2.jpg" />2</li>
<li><img src="img/3.jpg" />3</li>
<li><img src="img/4.jpg" />4</li>
<li><img src="img/5.jpg" />5</li>
</ul>
</div>

</body>
<script type="text/javascript">

var pic_index=0;

//函数控制如果为大于4返回第一个
function slide_pic()
{
if(pic_index<4){pic_index = pic_index + 1}
else{pic_index=0}
}
//函数申明主体,以及图片切换函数
slide_pic.prototype = {
pic_slide : function() {
$(".banner ul li").eq(pic_index).show().siblings("li").hide()
}
}
//实例化函数。以及调用函数
function slide()
{
var obj = new slide_pic();
obj.pic_slide(pic_index);
}
//函数计时器
var slide_index = setInterval(slide,2000)
</script>
</html>

简单的轮播图代码

标签:src   ann   ext   简单的   tin   htm   cti   float   dex   

原文地址:http://www.cnblogs.com/bulang/p/6971777.html

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