<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
.outer{800px; height:400px; overflow:hidden; margin:0 auto;}
.inner{3200px; height:400px; position:relative;}
.inner ul{ position:absolute; left:0; top: 0;}
.inner ul li{ float:left;}
.inner ul li img{ 800px; height:400px;}
</style>
<script src="jquery-2.2.2.min.js"></script>
<script>
$(function(){
//选择器：
// console.log($(".outer + div"))//获取紧邻后的第一个兄弟 div
// console.log($(".outer>.inner").find("li").eq(0));//找到第一个li
// console.log($(".inner>ul>li")[0])//找到li元素
//筛选：
// console.log($("li:first "))//找到li中第一个
// console.log($("li:even").eq(0));//找到li中第一个
// console.log($("li:odd").eq(1));
// console.log($("li:lt(1)"));//从0开始 匹配所有小于给定索引值的元素 gt大于
// console.log($(".inner> ul > li:first-child"));//匹配第一个子元素
// console.log($(".inner> ul > li:nth-child(1)"));//从1开始 匹配其父元素下的第N个子或奇偶元素
// console.log($("li:even"));//获取偶数元素 从0开始 查找 0 2 4行
// console.log($("li:odd"));//获取奇数元素 从0开始 查找 1 3 5
})
</script>
</head>
<body>
<div class="outer">
<div class="inner">
<ul>
<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292323.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292325.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
</ul>
</div>
</div>
<div class="lll"></div>
</body>
</html>