Home>

This is an imitation Taobao homepage jquery carousel focus map.Based on jquery, the special effect of the small focus map in the middle of the Taobao homepage is realized.

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

The jquery image carousel special effect code for everyone to share is as follows

<! Doctype html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<Title>Imitation Taobao homepage jquery carousel focus image</title>
<style>
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input (margin:0;padding:0;}
body {font-size:12px;}
img {border:none;}
li {list-style:none;}
input, select, textarea {outline:none;}
textarea {resize:none;}
a {text-decoration:none;}
/* Clear floating * /
.clearfix:after {content:"";display:block;clear:both;}
.clearfix {zoom:1;}
.banner {width:520px;height:280px;position:relative;overflow:hidden;}
.banner-btn {display:none;}
.banner-btn a {display:block;line-height:40px;position:absolute;top:120px;width:40px;height:40px;background-color:#000;opacity:0.3;filter:alpha (opacity=30 ) color:rgb (255, 255, 255);overflow:hidden;z-index:4;}
.prevbtn {left:5px;}
.nextbtn {right:5px;}
.banner-img {font-size:0;* word-spacing:-1px;/* ie6, 7 */letter-spacing:-3px;position:relative;}
.banner-img li {display:inline-block;* display:inline;* zoom:1;/* ie6, 7 */vertical-align:top;letter-spacing:normal;word-spacing:normal;font-size :12px;}
.banner i {background:url (http://gtms01.alicdn.com/tps/i1/t1sznbfzlmxxx8qsdi-400-340.png) no-repeat;width:15px;height:23px;cursor:pointer;margin:8px 0 0 12px;display:block;}
.banner .nextbtn i {background-position:-200px -24px;}
.banner .prevbtn i {background-position:-200px 0px;}
.banner-circle {position:absolute;left:50%;bottom:15px;height:13px;text-align:center;font-size:0;border-radius:10px;background:rgba (255,255,255,0.3);filter :alpha (opacity:30);}
.banner-circle li {border-radius:10px;margin:2px;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1;}
.banner-circle li a {display:block;padding-top:9px;width:9px;height:0;border-radius:50%;background:#b7b7b7;overflow:hidden;}
.banner-circle .selected a {background:#f40;}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(function () {
 var $banner=$(". banner");
 var $banner_ul=$(". banner-img");
 var $btn=$(". banner-btn");
 var $btn_a=$btn.find ("a")
 var v_width=$banner.width ();
 var page=1;
 var timer=null;
 var btnclass=null;
 var page_count=$banner_ul.find ("li"). length;//Assign this value to the number of dots
 var banner_cir="<li href =" #"><a></a></li>";
 for (var i=1;i<page_count;i ++) {
  //Dynamic dots added dynamically
  banner_cir +="<li><a href =" #"></a></li>";
  }
 $(". banner-circle"). append (banner_cir);
 var cirleft=$(". banner-circle"). width () * (-0.5);
 $(". banner-circle"). css ({"marginleft":cirleft});
 $banner_ul.width (page_count * v_width);
 function move (obj, classname) {
  //Manual and automatic playback
 if (! $banner_ul.is (":animated")) {
  if (classname == "prevbtn") {
   if (page == 1) {
     $banner_ul.animate ((left:-v_width * (page_count-1)));
     page=page_count;
     cirmove ();
   }
   else {
     $banner_ul.animate ({left:"+ =" + v_width}, "slow");
     page--;
     cirmove ();
   }
  }
  else {
   if (page == page_count) {
     $banner_ul.animate ({left:0});
     page=1;
     cirmove ();
    }
   else {
     $banner_ul.animate ({left:"-=" + v_width}, "slow");
     page ++;
     cirmove ();
    }
   }
  }
 }
 function cirmove () {
  //Check the value of page to make the current page consistent with the selected dot
  $(". banner-circle li"). eq (page-1) .addclass ("selected")
            .siblings (). removeclass ("selected");
 }
 $banner.mouseover (function () {
  $btn.css ({"display":"block"});
  clearinterval (timer);
    }). mouseout (function () {
  $btn.css ({"display":"none"});
  clearinterval (timer);
  timer=setinterval (move, 3000);
    }). trigger ("mouseout");//Activate autoplay
 $btn_a.mouseover (function () {
  //Achieve transparent gradient,Stop bubbling
   $(this) .animate ({opacity:0.6}, "fast");
   $btn.css ({"display":"block"});
    return false;
  }). mouseleave (function () {
   $(this) .animate ({opacity:0.3}, "fast");
   $btn.css ({"display":"none"});
    return false;
  }). click (function () {
   //Manually click to clear the timer
   btnclass=this.classname;
   clearinterval (timer);
   timer=setinterval (move, 3000);
   move ($(this), this.classname);
  });
 $(". banner-circle li"). live ("click", function () {
   var index=$(". banner-circle li"). index (this);
   $banner_ul.animate ({left:-v_width * index}, "slow");
   page=index + 1;
   cirmove ();
  });
});
</script>
</head>
<body>
<div align="center">
<div>
 <div>
 <a href="javascript:;"><i></i></a>
 <a href="javascript:;"><i></i></a>
 </div>
 <ul>
 <li><a href="#"><img src="images/t1b1jyfcpdxxazukp7-520-280.jpg"></a></li>
 <li><a href="#"><img src="images/t16ytife4axxb1upjx.jpg"></a></li>
 <li><a href="#"><img src="images/t1oi0ofrfkxxb1upjx.jpg"></a></li>
 <li><a href="#"><img src="images/t1ltlpfppjxxb1upjx.jpg"></a></li>
 <li><a href="#"><img src="images/t1ggjwfvpgxxazukp7-520-280.jpg"></a></li>
 <li><a href="#"><img src="images/t104hzfbvdxxazukp7-520-280.jpg"></a></li>
 </ul>
 <ul></ul>
</div>
</div>
<divmicrosoft yahei ";">
</div>
</body>
</html>
  • Previous TreeView in C # implements a selected node method suitable for two-level nodes
  • Next ASPNET MVC5 Website Development User Registration (4)