jQuery第六天

一.爱好选择器_原生

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>
<form method="post" action="">
  你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全 选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反 选"/>
  <input type="button" id="sendBtn" value="提 交"/>
</form>
<script type="text/javascript">
  /*
   功能说明:
     1. 点击'全选': 选中所有爱好
     2. 点击'全不选': 所有爱好都不勾选
     3. 点击'反选': 改变所有爱好的勾选状态
     4. 点击'提交': 提示所有勾选的爱好
     5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
     6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   技术点:
     1.DOM查询
     2.事件回调函数绑定
     3.checkbox操作
     4.事件回调函数中的this
     5.逻辑思维能力
   */

  window.onload = function () {

    var items = document.getElementsByName("items");

    //1.#checkedAllBtn
    var checkedAllBtn = document.getElementById("checkedAllBtn");
    checkedAllBtn.onclick = function () {
      setItemsChecked(true);
      checkedAllBox.checked = true;
    };

    //2.#checkedNoBtn
    var checkedNoBtn = document.getElementById("checkedNoBtn");
    checkedNoBtn.onclick = function () {
      setItemsChecked(false);
      checkedAllBox.checked = false;
    };
    //3.#checkedRevBtn
    var checkedRevBtn = document.getElementById("checkedRevBtn");
    checkedRevBtn.onclick = function () {
      setItemsChecked();
      //点满时将checkedAllBox.checked设置为true
      //统计当前items中被选中的个数
      checkedAllBox.checked = isAllChecked();
    };

    //4.#checkedAllBox
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function () {
      setItemsChecked(this.checked);
    };

    //5.#sendBtn
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function () {
      for (var i = 0; i < items.length; i++) {
        if (items[i].checked) {
          alert(items[i].value);
        }
      }
    };
    //6.items
    for (var i = 0; i < items.length; i++) {
      items[i].onclick = function () {
        //点满时将checkedAllBox.checked设置为true
        //统计当前items中被选中的个数
        checkedAllBox.checked = isAllChecked();
      }
    }

    function isAllChecked() {
      for (var j = 0; j < items.length; j++) {
        if (!items[j].checked)
          return false;
      }
      return true;
    }

    function setItemsChecked(checked) {
      for (var i = 0; i < items.length; i++) {
        items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
      }
    }
  }
</script>
</body>
</html>

二.jQuery爱好选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>

<form>
  你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全 选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反 选"/>
  <input type="button" id="sendBtn" value="提 交"/>
</form>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'全选': 选中所有爱好
   2. 点击'全不选': 所有爱好都不勾选
   3. 点击'反选': 改变所有爱好的勾选状态
   4. 点击'提交': 提示所有勾选的爱好
   5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   */
  var $checkedAllBox = $('#checkedAllBox')
  var $items = $(':checkbox[name=items]')

  // 1. 点击'全选': 选中所有爱好
  $('#checkedAllBtn').click(function () {
    $items.prop('checked', true)
    $checkedAllBox.prop('checked', true)
  })

  // 2. 点击'全不选': 所有爱好都不勾选
  $('#checkedNoBtn').click(function () {
    $items.prop('checked', false)
    $checkedAllBox.prop('checked', false)
  })

  // 3. 点击'反选': 改变所有爱好的勾选状态
  $('#checkedRevBtn').click(function () {
    $items.each(function () {
      this.checked = !this.checked
    })
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })

  //4. 点击'提交': 提示所有勾选的爱好
  $('#sendBtn').click(function () {
    $items.filter(':checked').each(function () {
      alert(this.value)
    })
  })

  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  $checkedAllBox.click(function () {
    $items.prop('checked', this.checked)
  })

  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  $items.click(function () {
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })
</script>
</body>

</html>

三.添加删除记录_原生js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>添加删除记录练习</title>
	<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

	<script type="text/javascript">
		/*
		 功能说明:
			 1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
			 2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
		 技术要点:
			 1. DOM查询
			 2. 绑定事件监听
			 3. DOM增删改
			 5. 取消事件的默认行为
		 */
		function removeTr(){
			var trNode = this.parentNode.parentNode;
			var tds = trNode.getElementsByTagName("td");
			var nameStr = tds[0].firstChild.nodeValue;
			var flag = confirm("真的要删除" + nameStr + "的信息吗?");
			if(flag){
				trNode.parentNode.removeChild(trNode);
			}

			return false;
		}

		window.onload = function(){
			//目标1:点击Delete删除记录
			var aEles = document.getElementsByTagName("a");
			for(var i = 0;i < aEles.length;i++){
				aEles[i].onclick = removeTr;
			}

			//目标2:点击Submit增加记录
			var subBtn = document.getElementById("addEmpButton");
			subBtn.onclick = function(){
				var nameText = trim(document.getElementById("empName").value);
				var emailText = trim(document.getElementById("email").value);
				var salaryText = trim(document.getElementById("salary").value);

				document.getElementById("empName").value = nameText;
				document.getElementById("email").value = emailText;
				document.getElementById("salary").value = salaryText;

				if(nameText == "" || emailText == "" || salaryText == ""){
					alert("您输入的内容不完整");
					return ;
				}

				//组装节点
				var nameTd = document.createElement("td");
				nameTd.appendChild(document.createTextNode(nameText));
				var emailTd = document.createElement("td");
				emailTd.appendChild(document.createTextNode(emailText));
				var salaryTd = document.createElement("td");
				salaryTd.appendChild(document.createTextNode(salaryText));
				var aTd = document.createElement("td");
				var aNewEle = document.createElement("a");
				aNewEle.href = "deleteEmp?id=XXX";
				aNewEle.appendChild(document.createTextNode("Delete"));
				aNewEle.onclick = removeTr;
				aTd.appendChild(aNewEle);

				var trNode = document.createElement("tr");
				trNode.appendChild(nameTd);
				trNode.appendChild(emailTd);
				trNode.appendChild(salaryTd);
				trNode.appendChild(aTd);

				var empTable = document.getElementById("employeeTable");
				empTable.appendChild(trNode);
			}

			function trim(str){
				var reg = /^\s*|\s*$/g;
				return str.replace(reg,"");
			}
		}
	</script>
</body>
</html>

四.添加删除记录_jQuery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>添加删除记录练习</title>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>

<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>tom@tom.com</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>jerry@sohu.com</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@tom.com</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>

</table>

<div id="formDiv">

  <h4>添加新员工</h4>

  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
  1. 添加
  2. 删除
   */
  $('#addEmpButton').click(function () {
    //1. 收集输入的数据
    var $empName = $('#empName')
    var $email = $('#email')
    var $salary = $('#salary')
    var empName = $empName.val()
    var email = $email.val()
    var salary = $salary.val()

    //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中
    /*
     <tr>
       <td>Bob</td>
       <td>bob@tom.com</td>
       <td>10000</td>
       <td><a href="deleteEmp?id=003">Delete</a></td>
     </tr>
     */
    var $xxx = $('<tr></tr>')
      .append('<td>'+empName+'</td>') // 拼串
      .append('<td>'+email+'</td>')
      .append('<td>'+salary+'</td>')
      .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
      .appendTo('#employeeTable>tbody')
      .find('a')
      .click(clickDelete)

    //3. 清除输入
    $empName.val('')
    $email.val('')
    $salary.val('')
  })

  // 给所有删除链接绑定点击监听
  $('#employeeTable a').click(clickDelete)

  /*
  点击删除的回调函数
   */
  function clickDelete () {
    var $tr = $(this).parent().parent()
    var name = $tr.children(':first').html()
    if(confirm('确定删除'+name+'吗?')) {
      $tr.remove()
    }

    return false
  }
  
</script>
</body>
</html>

五.添加删除记录_jQuery2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>添加删除记录练习</title>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>

<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>tom@tom.com</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>jerry@sohu.com</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@tom.com</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>

</table>

<div id="formDiv">

  <h4>添加新员工</h4>

  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
  1. 添加
  2. 删除
   */
  $('#addEmpButton').click(function () {
    //1. 收集输入的数据
    var $empName = $('#empName')
    var $email = $('#email')
    var $salary = $('#salary')
    var empName = $empName.val()
    var email = $email.val()
    var salary = $salary.val()

    //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中
    /*
     <tr>
       <td>Bob</td>
       <td>bob@tom.com</td>
       <td>10000</td>
       <td><a href="deleteEmp?id=003">Delete</a></td>
     </tr>
     */
    var $xxx = $('<tr></tr>')
      .append('<td>'+empName+'</td>') // 拼串
      .append('<td>'+email+'</td>')
      .append('<td>'+salary+'</td>')
      .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
      .appendTo('#employeeTable>tbody')

    //3. 清除输入
    $empName.val('')
    $email.val('')
    $salary.val('')
  })

  // 通过table实现对所有a的click事件委托
  $('#employeeTable').delegate('a', 'click', clickDelete)

  /*
  点击删除的回调函数
   */
  function clickDelete () {
    var $tr = $(this).parent().parent()
    var name = $tr.children(':first').html()
    if(confirm('确定删除'+name+'吗?')) {
      $tr.remove()
    }

    return false
  }
  
</script>
</body>
</html>

六.轮播图_原生js

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>焦点轮播图</title>
  <style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    /*让<body有20px的内边距*/
    body {
      padding: 20px;
    }

    /*最外围的div*/
    #container {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }

    /*包含所有图片的<div>*/
    #list {
      width: 4200px; /*7张图片的宽*/
      height: 400px;
      position: absolute; /*绝对定位*/
      z-index: 1; /*???*/
    }

    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }

    /*包含所有圆点按钮的<div>*/
    #buttons {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }

    /*所有的圆点<span>*/
    #buttons span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }

    /*第一个<span>*/
    #buttons .on {
      background: orangered;
    }

    /*切换图标<a>*/
    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 180px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }

    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }

    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }

    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }

    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>
</head>
<body>

<div id="container">
  <div id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="1"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="5"/>
  </div>
  <div id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击向右(左)的图标, 平滑切换到下(上)一页
   2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
   3. 每隔3s自动滑动到下一页
   4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
   5. 切换页面时, 下面的圆点也同步更新
   6. 点击圆点图标切换到对应的页
   */
  /**
   * 根据id得到对应的标签对象
   * @param {Object} id
   */
  function $(id) {
    return document.getElementById(id);
  }
  /**
   * 给指定id对应的元素绑定点击监听
   * @param {Object} id
   * @param {Object} callback
   */
  function click(id, callback) {
    $(id).onclick = callback;
  }

  window.onload = function () {

    var listDiv = $("list");
    var totalTime = 400;//换页的总时间
    var intervalTime = 20;//移动的间隔时间
    var intervalId;//循环定时器的id(翻页中的不移动)
    var imgCount = 5; //图片的个数
    var moveing = false; //是否正在移动中
    var index = 0;//当前显示图片的下标(从0开始到imgCount-1)
    var buttonSpans = $("buttons").children; //所有标识圆点标签的集合
    var containerDiv = $("container");
    var intervalId2; //循环定时器的id(自动翻页)

    //给下一页绑定点击监听
    click("next", function () {
      //切换到下一页
      nextPage(true);
    });

    //给上一页绑定点击监听
    click("prev", function () {
      //切换到上一页
      nextPage(false);
    });

    //给所有的提示圆点绑定点击监听
    clickButtons();

    //启动定时自动翻页
    autoNextPage();
    //给容器div绑定鼠标移入的监听: 停止自动翻页
    containerDiv.onmouseover = function () {
      clearInterval(intervalId2);
    }
    //给容器div绑定鼠标移出的监听: 启动自动翻页
    containerDiv.onmouseout = function () {
      autoNextPage();
    };

    /**
     * 启动定时自动翻页
     */
    function autoNextPage() {
      intervalId2 = setInterval(function () {
        nextPage(true);
      }, 3000);
    }

    /**
     * 切换到下一页/上一页
     * true 下
     * false 上
     * index 目标页
     * @param {Object} next true
     */
    function nextPage(next) {

      //如果正在移动, 直接结束
      if (moveing) {
        return;
      }
      //标识正在移动
      moveing = true;

      //需要进行的总偏移量
      var offset;
      if (typeof next === 'boolean') {
        offset = next ? -600 : 600;
      } else {
        offset = -600 * (next - index);
      }
      //var offset = next ? -600 : 600;
      //每个小移动需要做的偏移量
      var itemOffset = offset / (totalTime / intervalTime);
      //切换完成时div的left的坐标
      var targetLeft = listDiv.offsetLeft + offset;
      //循环定时器
      intervalId = setInterval(function () {
        //var currentLeft = listDiv.offsetLeft;
        //得到当前这次偏移的样式left坐标
        var left = listDiv.offsetLeft + itemOffset;
        //如果已经到达目标位置
        if (left == targetLeft) {
          //移除定时器
          clearInterval(intervalId);

          //如果当前到达的是最左边的图片, 跳转到右边第二张图片的位置
          if (left == 0) {
            left = -imgCount * 600;
          } else if (left == -600 * (imgCount + 1)) {//如果当前到达的是最右边的图片, 跳转到左边第二张图片的位置
            left = -600;
          }
          //标识没有移动了
          moveing = false;
        }
        //指定div新的left坐标
        listDiv.style.left = left + "px";
      }, intervalTime);

      //更新标识圆点
      updateButtons(next);
    }

    /**
     * 更新标识圆点
     * @param {Object} next
     */
    function updateButtons(next) {
      //将当前的圆点更新为一般圆点
      buttonSpans[index].removeAttribute("class");
      //计算出目标圆点的下标
      var targetIndex;
      if (typeof next == 'boolean') {
        if (next) {
          targetIndex = index + 1;
          if (targetIndex == imgCount) {
            targetIndex = 0;
          }
        } else {
          targetIndex = index - 1;
          if (targetIndex == -1) {
            targetIndex = imgCount - 1;
          }
        }
      } else {
        targetIndex = next;
      }
      //将标圆点的下标更新为当前下标
      index = targetIndex;
      //将目标圆点设置为当前圆点
      buttonSpans[index].className = 'on';
    }

    /**
     * 给所有的圆点设置点击监听
     */
    function clickButtons() {
      for (var i = 0, length = buttonSpans.length; i < length; i++) {

        buttonSpans[i].index = i;
        buttonSpans[i].onclick = function () {
          nextPage(this.index);
        };

        /*
         (function (index) {
         buttonSpans[index].onclick = function () {
         nextPage(index);
         };
         })(i);
         */
      }
    }
  };
</script>
</body>
</html>

七.轮播图_jQuery

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>焦点轮播图</title>
  <style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    /*让<body有20px的内边距*/
    body {
      padding: 20px;
    }

    /*最外围的div*/
    #container {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }

    /*包含所有图片的<div>*/

    #list {
      width: 4200px; /*7张图片的宽: 7*600 */
      height: 400px;
      position: absolute; /*绝对定位*/
      z-index: 1;
    }

    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }

    /*包含所有圆点按钮的<div>*/
    #pointsDiv {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }

    /*所有的圆点<span>*/

    #pointsDiv span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }

    /*第一个<span>*/

    #pointsDiv .on {
      background: orangered;
    }

    /*切换图标<a>*/

    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 180px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }

    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }

    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }

    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }

    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>
</head>

<body>

<div id="container">
  <div id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
  </div>
  <div id="pointsDiv">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>
/*
 功能说明:
 1. 点击向右(左)的图标, 平滑切换到下(上)一页
 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
 3. 每隔3s自动滑动到下一页
 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
 5. 切换页面时, 下面的圆点也同步更新
 6. 点击圆点图标切换到对应的页

 bug: 快速点击时, 翻页不正常
 */
$(function () {

  var $container = $('#container')
  var $list = $('#list')
  var $points = $('#pointsDiv>span')
  var $prev = $('#prev')
  var $next = $('#next')
  var PAGE_WIDTH = 600 //一页的宽度
  var TIME = 400 // 翻页的持续时间
  var ITEM_TIME = 20 // 单元移动的间隔时间
  var imgCount = $points.length
  var index = 0 //当前下标
  var moving = false // 标识是否正在翻页(默认没有)


  // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
  $next.click(function () {
    // 平滑翻到下一页
    nextPage(true)
  })
  $prev.click(function () {
    // 平滑翻到上一页
    nextPage(false)
  })

  // 3. 每隔3s自动滑动到下一页
  var intervalId = setInterval(function () {
    nextPage(true)
  }, 1000)

  // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
  $container.hover(function () {
    // 清除定时器
    clearInterval(intervalId)
  }, function () {
    intervalId = setInterval(function () {
      nextPage(true)
    }, 1000)
  })

  // 6. 点击圆点图标切换到对应的页
  $points.click(function () {
    // 目标页的下标
    var targetIndex = $(this).index()
    // 只有当点击的不是当前页的圆点时才翻页
    if(targetIndex!=index) {
      nextPage(targetIndex)
    }
  })

  /**
   * 平滑翻页
   * @param next
   * true: 下一页
   * false: 上一页
   * 数值: 指定下标页
   */
  function nextPage (next) {
    /*
      总的时间: TIME=400
      单元移动的间隔时间: ITEM_TIME = 20
      总的偏移量: offset
      单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)

      启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
     */

    //如果正在翻页, 直接结束
    if(moving) { //已经正在翻页中
      return
    }
    moving = true // 标识正在翻页

    // 总的偏移量: offset
    var offset = 0
    // 计算offset
    if(typeof next==='boolean') {
      offset = next ? -PAGE_WIDTH : PAGE_WIDTH
    } else {
      offset = -(next-index)* PAGE_WIDTH
    }

    // 计算单元移动的偏移量: itemOffset
    var itemOffset = offset/(TIME/ITEM_TIME)
    // 得到当前的left值
    var currLeft = $list.position().left
    // 计算出目标处的left值
    var targetLeft = currLeft + offset

    // 启动循环定时器不断更新$list的left, 到达目标处停止定时器
    var intervalId = setInterval(function () {
      // 计算出最新的currLeft
      currLeft += itemOffset
      if(currLeft===targetLeft) { // 到达目标位置
        // 清除定时器
        clearInterval(intervalId)

        // 标识翻页停止
        moving = false

        // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
        if(currLeft===-(imgCount+1) * PAGE_WIDTH) {
          currLeft = -PAGE_WIDTH
        } else if(currLeft===0){
          // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
          currLeft = -imgCount * PAGE_WIDTH
        }

      }
      // 设置left
      $list.css('left', currLeft)
    }, ITEM_TIME)

    // 更新圆点
    updatePoints(next)
  }

  /**
   * 更新圆点
   * @param next
   */
  function updatePoints (next) {

    // 计算出目标圆点的下标targetIndex
    var targetIndex = 0
    if(typeof next === 'boolean') {
      if(next) {
        targetIndex = index + 1   // [0, imgCount-1]
        if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点
          targetIndex = 0
        }
      } else {
        targetIndex = index - 1
        if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点
          targetIndex = imgCount-1
        }
      }
    } else {
      targetIndex = next
    }


    // 将当前index的<span>的class移除
    // $points.eq(index).removeClass('on')
    $points[index].className = ''
    // 给目标圆点添加class='on'
    // $points.eq(targetIndex).addClass('on')
    $points[targetIndex].className = 'on'

    // 将index更新为targetIndex
    index = targetIndex
  }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值