五张图片自动轮播（未完善的）

r囧r小猫 2022-12-20 15:58 113阅读 0赞

**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 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关五张图片自动轮播（已完善）

与本人博客“五张图片自动轮播(未完善）”略有不同，但原理一样的，都是使用position的绝对位置改变 html代码：注：图片路径替换一下，才能看出效果，并需要引用f

ゝ一纸荒年。/ 2022年12月21日 06:29/ 0 赞/ 124 阅读

相关五张图片自动轮播（未完善的）

js代码： var curNum=0; var count=$("inner").children('div').length;//8

r囧r小猫/ 2022年12月20日 15:58/ 0 赞/ 114 阅读

相关轮播图（自动轮播/动态添加图片数量的提示）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年10月27日 01:40/ 0 赞/ 139 阅读

相关无缝轮播/自动轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

爱被打了一巴掌/ 2022年10月27日 00:30/ 0 赞/ 336 阅读

相关 html实现自动图片轮播,图片轮播的实现（html__js）

1.简单实现 1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示

待我称王封你为后i/ 2022年10月06日 00:48/ 0 赞/ 300 阅读

相关 jquery实现图片自动轮播

这是自己以前实现的功能，在此和大家一起分享，以后多写博客咯，方便与大家共享知识，也为了自己可以更好的记忆。源代码： <!DOCTYPE html PUB

你的名字/ 2022年08月21日 03:15/ 0 赞/ 285 阅读

相关 jquery聚焦自动轮播图片

主页核心代码（Default.aspx）： \[html\] [view plain][] [copy][view plain] 1. <!DOCTYPE h

叁歲伎倆/ 2022年06月08日 13:06/ 0 赞/ 267 阅读

相关 mui 图片自动轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

你的名字/ 2022年04月22日 02:16/ 0 赞/ 241 阅读

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下 ![轮播和

川长思鸟来/ 2022年03月31日 02:12/ 0 赞/ 458 阅读

相关网页图片轮播,一张图时不轮播,大于一张时轮播

使用swiper做轮播，需求是images文件夹下有多少图片就轮播多少图片，一张图片时不轮播。因前端js不能获取目录和文件列表，所以在这里使用了php来读取图片文件列表，文

柔情只为你懂/ 2021年10月29日 12:18/ 0 赞/ 412 阅读