Home>

This is a jquery-based code with an index button and automatic carousel switching effects.The implementation process is simple.

Tip:If the browser does not work properly,Try switching the browsing mode.

Introduce css style in the head area:

<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">

The jquery with index button and automatic carousel switching special effects code shared for everyone is as follows

<! Doctype html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-language" content="zh-cn">
  <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
  <title>Tencent Weiyun homepage jquery focus map</title>
  <link rel="stylesheet" href="css/reset.css" media="screen">
  <link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
  <!-[If ie 6]><script type="text/javascript">try {document.execcommand ("backgroundimagecache", false, true);} catch (e) {}</script> ;<! [Endif]->
</head>
 <body>
  <div>
    <div>
      <div>
        <div>
          <div>
            <img src="images/banner4.jpg">
            <div>
              <h3>Weiyun, Life is Wonderful</h3>
              <p>
Wonderful from this moment!</p>
            </div>
          </div>
          <div>
            <img src="images/banner3.jpg">
            <div>
              <h3>Weiyun, Life is Wonderful</h3>
              <p>
Wonderful from this moment!</p>
            </div>
          </div>
          <div>
            <img src="images/banner2.jpg">
            <div>
              <h3>Weiyun, Life is Wonderful</h3>
              <p>
Wonderful from this moment!</p>
            </div>
          </div>
          <div>
            <img src="images/banner1.jpg">
            <div>
              <h3>Weiyun, Life is Wonderful</h3>
              <p>
Wonderful from this moment!</p>
            </div>
          </div>
        </div>
        <div>
          <a data-index="0" href="#">
            <span></span>
            <span></span>
          </a>
          <a data-index="1" href="#">
            <span></span>
            <span></span>
          </a>
          <a data-index="2" href="#">
            <span></span>
            <span></span>
          </a>
          <a data-index="3" href="#">
            <span></span>
            <span></span>
          </a>
        </div>
      </div>
    </div>
  </div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
  var glume=function (banners_id, focus_id) {
    this. $ctn=$("#" + banners_id);
    this. $focus=$("#" + focus_id);
    this. $adlis=null;
    this. $btns=null;
    this.switchspeed=5;//Autoplay interval (s)
    this.defopacity=1;
    this.crtindex=0;
    this.adlength=0;
    this.timerswitch=null;
    this.init ();
  };
  glume.prototype={
    fnnextindex:function () {
      return (this.crtindex>= this.adlength-1)?0:this.crtindex + 1;
    },    //Animation switch
    fnswitch:function (toindex) {
      if (this.crtindex == toindex) {return;}
      this. $adlis.css ("zindex", 0);
      this. $adlis.filter (":eq (" + this.crtindex + ")"). css ("zindex", 2);
      this. $adlis.filter (":eq (" + toindex + ")"). css ("zindex", 1);
      this. $btns.removeclass ("on");
      this. $btns.filter (":eq (" + toindex + ")"). addclass ("on");
      var me=this;
      $(this. $adlis [this.crtindex]). animate ({
        opacity:0
      }, 1000, function () {
        me.crtindex=toindex;
        $(this) .css ({
          opacity:me.defopacity,          zindex:0
        });
      });
    },    fnautoplay:function () {
      this.fnswitch (this.fnnextindex ());
    },    fnplay:function () {
      var me=this;
      me.timerswitch=window.setinterval (function () {
        me.fnautoplay ();
      }, me.switchspeed * 1000);
    },    fnstopplay:function () {
      window.cleartimeout (this.timerswitch);
      this.timerswitch=null;
    },    init:function () {
      this. $adlis=this. $ctn.children ();
      this. $btns=this. $focus.children ();
      this.adlength=this. $adlis.length;
      var me=this;
      //click to switch
      this. $focus.on ("click", "a", function (e) {
        e.preventdefault ();
        var index=parseint ($(this) .attr ("data-index"), 10)
        me.fnswitch (index);
      });
      this. $adlis.filter (":eq (" + this.crtindex + ")"). css ("zindex", 2);
      this.fnplay ();
      //pause animation when hover
      this. $ctn.hover (function () {
        me.fnstopplay ();
      }, function () {
        me.fnplay ();
      });
      if ($. browser.msie&&$.browser.version<7) {
        this. $btns.hover (function () {
          $(this) .addclass ("hover");
        }, function () {
          $(this) .removeclass ("hover");
        });
      }
    }
  };
  var player1=new glume ("_ banners", "_focus");
  </script>
</body>
</html>
  • Previous struts2 Demo Demo
  • Next Correct usage of previousSibling and nextSibling in javascript