Home>

Doing dom with jquery is really convenient,And jquery provides a very user-friendly API to meet our various needs,Greatly simplified the js code.

Production principle:

Here is an overview of the entire process:

1. Hide all pictures except the first one,

2. Obtain the alt information of the first picture and display it in the information bar.And add click events

3. Add click listen for 4 buttons,Click the appropriate button.Display pictures with fadeout, fadein methods

4. Set setinterval to execute the switching function regularly

Code description:

filter (":visible"):get all visible elements

unbind ():remove bound events from matched elements

siblings:get an element set containing all unique sibling elements of each element in the matched element set

Program source

html part:

<body>
<div>
 <div></div>
 <div></div>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <div>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_ blank"><img src="imgs/img_1.jpg "/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_ blank"><img src="imgs/img_2.jpg "/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_ blank"><img src="imgs/img_3.jpg "/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_ blank"><img src="imgs/img_4.jpg "/></a>
 </div>
</div>
</body>

css part:

<style type="text/css">
#banner {position:relative;width:478px;height:286px;border:1px solid #666;overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute;bottom:0;background-color:#000;height:30px;filter:alpha (opacity=30);opacity:0.3;z-index:1000;
cursor:pointer;width:478px;}
#banner_info {position:absolute;bottom:0;left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002;right:3px;bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter:alpha (opacity=80);opacity:0.8;border:1px solid #fff;z-index:1002;
   margin:0;padding:0;bottom:3px;right:5px;}
#banner ul li {padding:0px 8px;float:left;display:block;color:#fff;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on {background:#900}
#banner_list a {position:absolute;}
</style>

javascript code:

<script type="text/javascript">
 var t=n=0, count;
 $(document) .ready (function () {
  count=$("#banner_list a"). length;
  $("#banner_list a:not (:first-child)"). hide ();
  $("#banner_info"). html ($("#banner_list a:first-child"). find ("img"). attr ("alt"));
  $("#banner_info"). click (function () {window.open ($("#banner_list a:first-child"). attr ("href"), "_blank")});
  $("#banner li"). click (function () {
   var i=$(this) .text () -1;//Get the value inside the li element,Ie 1, 2, 3, 4
   n=i;
   if (i>= count) return;
   $("#banner_info"). html ($("#banner_list a"). eq (i) .find ("img"). attr ("alt"));
   $("#banner_info"). unbind (). click (function () {window.open ($("#banner_list a"). eq (i) .attr ("href"), "_blank")})
   $("#banner_list a"). filter (":visible"). fadeout (500) .parent (). children (). eq (i) .fadein (1000);
   document.getelementbyid ("banner"). style.background="";
   $(this) .toggleclass ("on");
   $(this) .siblings (). removeattr ("class");
  });
  t=setinterval ("showauto ()", 4000);
  $("#banner"). hover (function () {clearinterval (t)}, function () {t=setinterval ("showauto ()", 4000);});
 })
 function showauto ()
 {
  n=n>= (count -1)?0:++ n;
  $("#banner li"). eq (n) .trigger ("click");
 }
</script>
  • Previous Java uses Rhino/Nashorn instead of third-party JSON conversion libraries
  • Next Canvas simply and quickly realizes the background effect of the login page