first commit

历届学生/刘合群/学校官网实战/js/index.js

@@ -0,0 +1,31 @@
+(function() {
+
+
+  var tabTitle = (document.getElementsByClassName("tab-title")[0]).getElementsByTagName("li");
+  var tabContent = (document.getElementsByClassName("tab-content")[0]).getElementsByTagName("li");
+
+  /**
+   *  index.js 和 swiper.js 中变量 i 冲突
+   *  1: 更换index.js中变量i的名称，例如：ff
+   *  2: (function(){  })() 自执行函数+闭包 防止变量污染
+   */
+
+  // 第一次for循环主要作用是为了给标题绑定 onmousemove 事件
+  for(let i = 0;i<tabTitle.length;i++) {
+    tabTitle[i].onmousemove = function () {
+      
+      // 第二次for是为了清除标题和内容的激活样式
+      for(let j = 0;j<tabTitle.length;j++) {
+        tabTitle[j].className = ""
+        tabContent[j].className = "tab-content-item"
+      }
+
+      // 为当前悬浮的对象设置 激活样式
+      tabTitle[i].className = "selected"
+      tabContent[i].className = "tab-content-item item-active"
+    }
+    
+  }
+
+  
+})()

历届学生/刘合群/学校官网实战/js/swiper.js

@@ -0,0 +1,136 @@
+// 自执行函数 形成闭包
+
+(function () {
+
+
+  var left = $("action-left"),
+    right = $("action-right"),
+    timer,
+    index = 1,
+    offsetWidths = document.body.clientWidth;
+
+
+left.onclick = function () {
+  if(index<=1) {
+    index = 6
+  }else {
+    index--
+  }
+  animation(offsetWidths)
+  clickChangeStop()
+}
+
+right.onclick = function () {
+  //alert("下一页")
+  if(index>5) {
+    index = 1
+  }else {
+    index++
+  }
+  animation(-offsetWidths)
+  clickChangeStop()
+}
+
+/**
+ * 切换小圆点样式
+ */
+function clickChangeStop(){
+  var li = $("swiper-spot").getElementsByTagName("li")
+  clearSpotActive()
+  li[index - 1].className = "active"
+}
+
+/**
+ * 鼠标悬浮的时候，清除自动播放
+ */
+$("banner").onmouseover = function () {
+  clearInterval(timer)
+}
+
+/**
+ * 鼠标离开的时候，开始自动播放
+ */
+$("banner").onmouseout = function () {
+  autoPlay()
+}
+
+/**
+ * 自动播放
+ */
+function autoPlay() {
+  timer = setInterval(function(){
+    right.onclick()
+  },2000)
+}
+
+/**
+ * 小圆点被点击时候切换轮播图
+ */
+function spotClick() {
+  var li = $("swiper-spot").getElementsByTagName("li")
+  for(let i = 0;i<li.length;i++){
+    
+    li[i].onclick = function () {
+      index = i + 1
+      $("swiper-content").style.left = ( i * -offsetWidths ) + 'px'
+      // 先把所有的li的激活样式 active 都清除
+      clearSpotActive()
+      // 然后为你点击的元素li单独设置激活样式
+      li[i].className = "active"
+    }
+  }
+}
+
+/**
+ * 清除所有小圆点上的激活样式
+ */
+function clearSpotActive() {
+  var li = $("swiper-spot").getElementsByTagName("li")
+  for(let i = 0;i<li.length;i++){
+    li[i].className = ""
+  }
+}
+
+/**
+ * 动画切换函数
+ * @param {*} offset 
+ */
+function animation (offset) {
+  var juli = parseInt($("swiper-content").style.left) + offset;
+  if(juli < getFullWidth()){
+    $("swiper-content").style.left = "0px"
+  } else if (juli > 0) {
+    $("swiper-content").style.left = getFullWidth() + 'px'
+  }else {
+    $("swiper-content").style.left = juli + 'px'
+  }
+} 
+
+
+
+/**
+ * 获取最后一张图片的距离 图片数量 * 单个图片宽度
+ */
+function getFullWidth () {
+  let len = ($("swiper-content").getElementsByTagName("li").length) - 1
+  return len * - offsetWidths
+}
+
+
+/**
+ * 获取元素
+ * @param {*} className 
+ */
+function $(className){
+  return document.getElementsByClassName(className)[0]
+}
+
+
+
+autoPlay()
+spotClick()
+
+
+})()
+
+