jq简单轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</head>
<body>
    <div class="banner clearfix">
<ul>
<li><img src="15018173122.png" /></li>
<li><img src="clipboard.png" /></li>
<li><img src="15018173122.png" /></li>
<li><img src="clipboard.png" /></li>
<li><img src="15018173122.png" /></li>
</ul>
</div>
  <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_num : '5',
   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,1000)
  </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值