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

ゝ一纸荒年。 2022-12-21 06:29 123阅读 0赞

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

**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%;
    }

**js代码：**

//初始化当前位置（可看到的轮播图的最左边的图片的位置）
    var curNum = 0;
    
    // 初始化(获取）轮播图所有的图片数量
    var count = $("#inner").children('div').length; //9
    
    // 设置轮播图中可以看到的图片数量
    var totalViews = 4;
    
    // 获取轮播图其中一个图片的宽度
    var imgDivWidth = $('#inner div').width();
    
    //每隔5秒自动轮播(总图片要超过可以看到的图片数量才轮播哦)
    if(count > totalViews){ 
      setInterval("autoTest()", 5000);
    }
    
    function autoTest() { 
    	//如果到了最后一个元素，停止
      curNum ++;
    	if ((count - curNum) <= 7) { 
    		curNum = 0;
    	}
    	$('#inner').css('left', -(curNum * (imgDivWidth+10)));//加10是因为margin左右边距各位5px
    }
    
    $(function() { 
    	//由右向左轮播
    	$(".btnleft").click(function() { 
          curNum ++;
    		//如果到了最后一个元素，重来
    		if ((count - curNum) < totalViews) { 
              curNum =0;
    		}
    		$('#inner').css('left', -(curNum * (imgDivWidth+10)));
    	});
    
    	//由左向右轮播
    	$(".btnright").click(function() { 
          curNum --;
    		//如果到了第一个元素，重来
    		if (curNum == -1) { 
    			curNum = (count - totalViews); 
    		}
    		$('#inner').css('left', -(curNum * (imgDivWidth+10)));
    	});
    });