五张图片自动轮播(未完善的)

37 篇文章 1 订阅
24 篇文章 1 订阅

js代码:

 var curNum=0;
 var count=$("#inner").children('div').length;//8

 setInterval("test()",5000);

 function test(){
 //如果到了最后一个元素,停止
 if((count-curNum)<=7){
 curNum=0;
 $("#inner").css("left","0");
 test();
 // return false;
 }
 curNum+=1;
 $("#inner").animate({
 // 每次点击都从左边裁剪280像素
 left:'-=280'
 },100);
 }

 $(function(){

 //左滑动
 $(".btnleft").click(function(){
 //如果到了最后一个元素,停止
 if((count-curNum)<=4){
 return false;
 }
 curNum+=1;
 $("#inner").animate({
 // 每次点击都从左边裁剪280像素
 left:'-=280'
 },500);
 });

 //右滑动
 $(".btnright").click(function(){
 //如果到了第一个元素,停止
 if(curNum<=0){
 return false;
 }
 curNum-=1;
 $("#inner").animate({
 // 每次点击都从左边补充280像素
 left:'+=280'
 },500);
 });
 });

css代码:

#warpper {
	width: 1120px; /*一列展示几个的宽度 ,4*280 动态算*/
	height: 150px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	border: 1px solid red;
}

#inner {
	/*元素个数*280(div宽度)  动态算 1120px[4个元素] 1440px[5个元素]  1680px[6个元素]  2240px[8个元素]
      用JS动态设置改值
      */
	width: 2520px;
	position: absolute;
}

#inner div {
	width: 270px;
	height: 150px;
	/*使用浮动元素排列*/
	float: left;
	margin: 0 5px;
}

#optrbtn {
	text-align: center;
	font-size: 20px;
}

#optrbtn span {
	display: inline-table;
	border: 1px solid red;
	width: 50px;
	cursor: pointer;
	margin-right: 5px;
}

#inner div img {
	width: 100%;
	height: 100%;
}

html代码:

<div id="main">
  <div id="warpper">
    <div id="inner">
      <div><img src="../images/add_img.png"/></div>
      <div><img src="../images/add.png"/></div>
      <div><img src="../images/addressRenewal1.png"/></div>
      <div><img src="../images/addressRenewal3.png"/></div>
      <div><img src="../images/addressRenewal4.png"/></div>
      <div><img src="../images/android.png"/></div>
      <div><img src="../images/app_download.png"/></div>
      <div><img src="../images/beian.png"/></div>
      <div><img src="../images/biangeng.png"/></div>
      <div><img src="../images/add_img.png"/></div>
      <div><img src="../images/add.png"/></div>
      <div><img src="../images/addressRenewal1.png"/></div>
    </div>
  </div>
</div>

<br /> <br />

<div id="optrbtn">
	<span class="btnleft">«</span> <span class="btnright">»</span>
</div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值