javascript 标签轮播

html

    <div id="banner-switch">
      <!-- 切换内容 -->
        <div class="notice-content">
          <div class="notice-item content-active"><a href="./schoolReport_dl.jsp"><img src="http://www.tfjyzx.com:8089/images/notice/01_ignite.jpg" alt="点亮校园活动" /></a></div>
          <div class="notice-item"><a href="./act-upload.jsp?id=1"><img src="http://www.tfjyzx.com:8089/images/notice/02_writer.jpg" alt="未来小作家征文活动" /></a></div>
          <div class="notice-item"><a href="javascript:;"><img src="http://www.tfjyzx.com:8089/images/notice/03_daren.jpg" alt="校园小达人答题活动" /></a></div>
          <div class="notice-item"><a href="./local_list.jsp?id=2&title=%E6%B4%BB%E5%8A%A8%E6%B5%8B%E8%AF%95"><img src="http://www.tfjyzx.com:8089/images/notice/04_guoxue.jpg" alt="商丘市国学经典诵读大赛" /></a></div>
          <div class="notice-item"><a href="javascript:;"><img src="http://www.tfjyzx.com:8089/images/notice/05_shangqiu.jpg" alt="商丘市第一中学" /></a></div>
        </div>
        <!-- 切换标签 -->
        <div class="notice-title">
            <ul>
                <li class="title-item title-active"><a href="./schoolReport_dl.jsp">点亮校园活动</a></li>
                <li class="title-item"><a href="./act-upload.jsp?id=1">未来小作家征文活动</a></li>
                <li class="title-item"><a href="javascript:;">校园小达人答题活动</a></li>
                <li class="title-item"><a href="./local_list.jsp?id=2&title=%E6%B4%BB%E5%8A%A8%E6%B5%8B%E8%AF%95">商丘市国学经典诵读大赛</a></li>
                <li class="title-item"><a href="./page.jsp?school=商丘市第一中学">商丘市第一中学</a></li>
            </ul>
        </div>
    </div>

　　css:

/* banner switch */
#banner-switch {
  width: 1200px;
  height: 320px;
}

#banner-switch > .notice-title {
  float: left;
  width: 285px;
  height: 295px;
  background-color: #112F49;    
  padding: 10px 20px;  
}

#banner-switch > .notice-title li {
    height: 50px;
    line-height: 50px;
    margin-top: 5px;
    border-bottom: 1px solid #ccc;        
}

#banner-switch > .notice-title li:last-child {
  border: none;
}

#banner-switch a {
  color: #a2a2a2;
  font-size: 16px;
}

#banner-switch  .title-item.title-active > a {
  color: #ffffff;
}
#banner-switch > .notice-content {
    position: relative;
    float: left;    
}

#banner-switch > .notice-content > .notice-item img {
  width: 900px;
  outline: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

#banner-switch > .notice-content > .notice-item {    
    width: 900px;
    height: 320px;
    display: none;
}

#banner-switch > .notice-content > .notice-item.content-active {
  display: block;
}

　　javascript:

function trigger(dom, event) {
    var myEvent = document.createEvent('Event')
    myEvent.initEvent(event, true, true);
    dom.dispatchEvent(myEvent);
}

function bannerSwitchTabs() {
    var bs = document.getElementById("banner-switch");
    var tabs = bs.querySelectorAll(".title-item"),
        contents = bs.querySelectorAll(".notice-item");

    var ts = "title-active",
        cs = "content-active";
    var last = 0; // 上一次选中元素的index

    tabs.forEach(function (tab, i) {
        (function (i) {
            tab.addEventListener("mouseover", function () {

                tabs[last].classList.remove(ts);
                contents[last].classList.remove(cs);
                last = i;

                this.classList.add(ts);
                contents[i].classList.add(cs);
            });
        })(i);
    });
    
    var carousel = (function (tabs) {
        var timer = 0, index = 0, size = tabs.length;
        return {
            isPlaying: function() {
                return timer;
            },
            play: function () {
                trigger(tabs[index], "mouseover");
                index = (index + 1) % size;
                var that = this;
                timer = setTimeout(function () {
                    that.play();
                }, 5000);
            },
            cancel: function () {
                clearTimeout(timer);
                timer = 0;
            }
        }
    })(tabs);

    carousel.play();

    bs.onmouseover = function() {
        // console.log(carousel.isPlaying());
        carousel.cancel();        
    }
    bs.onmouseleave = function() {
        // console.log(carousel.isPlaying());
        carousel.play();
    }
}

bannerSwitchTabs();