jquery hover Control Picture Carousel--code simple _jquery

jquery implementation of the mouse hover picture automatic carousel effect, when the mouse hovers over the picture, the image will continue to loop, the speed is very fast, the effect is very realistic, and in the martial arts film, the use of jquery implementation, the following small series for everyone analysis JQ hover control picture Carousel, see the effect of the facet.

Online preview Source Download

The code for the implementation is as follows:

<!--Carousel advertising--> <div id= "Banner_tabs" class= "Flexslider" > <ul class= "Slides" > <li> <a titl E= "" target= "_blank" href= "#" >  </a> </li> <li> <a title=" "href=" # "> < IMG width= "1920" height= "482" alt= "style=" Background:url (images/banner2.jpg) no-repeat Center; "Src=" images/ Alpha.png "> </a> </li> <li> <a title=" "href=" # ">  </a> </li&gt
 ; </ul> <ul class= "Flex-direction-nav" > <li><a class= "Flex-prev" javascript:; " >Previous</a></li> <li><a class= "Flex-next" href= "javascript:;" >Next</a></li> </ul> <ol id= "Bannerctrl" class= "Flex-conTrol-nav flex-control-paging "> <li><a>1</a></li> <li><a>2</a></li > <li><a>2</a></li> </ol> </div> <script src= "Js/jquery-1.10.2.min.js" ></script> <script src= "js/slider.js" ></script> <script type= "Text/javascript" > $ ( function () {var bannerslider = new Slider ($ (' #banner_tabs '), {time:5000, delay:400, event: ' Hover ', auto:t
  Rue, mode: ' Fade ', Controller: $ (' #bannerCtrl '), Activecontrollercls: ' Active '});
  $ (' #banner_tabs. Flex-prev '). Click (function () {Bannerslider.prev ()});
 $ (' #banner_tabs. Flex-next '). Click (function () {Bannerslider.next ()});
 }) </script>

CSS code:

. flexslider {margin:0px auto 20px;
  position:relative;
  width:100%;
  height:482px;
  Overflow:hidden;
 Zoom:1;
  }. Flexslider. slides Li {width:100%;
  height:100%;
  }. Flex-direction-nav a {width:70px;
  height:70px;
  Line-height:99em;
  Overflow:hidden;
  Margin: -35px 0 0;
  Display:block;
  Background:url (images/ad_ctr.png) no-repeat;
  Position:absolute;
  top:50%;
  Z-index:10;
  Cursor:pointer;
  opacity:0;
  Filter:alpha (opacity=0);
  -webkit-transition:all 3s ease;
 border-radius:35px;
  }. Flex-direction-nav. flex-next {background-position:0 -70px;
 right:0;
 }. Flex-direction-nav. flex-prev {left:0;
  }. Flexslider:hover. flex-next {opacity:0.8;
 Filter:alpha (OPACITY=25);
  }. Flexslider:hover. flex-prev {opacity:0.8;
 Filter:alpha (OPACITY=25);
  }. Flexslider:hover. Flex-next:hover, flexslider:hover flex-prev:hover {opacity:1;
  Filter:alpha (OPACITY=50);
  }. flex-control-nav {width:100%; PosItion:absolute;
  bottom:10px;
 Text-align:center;
  }. Flex-control-nav Li {margin:0 2px;
  Display:inline-block;
  Zoom:1;
  *display:inline;
  }. flex-control-paging Li a {background:url (images/dot.png) no-repeat 0-16px;
  Display:block;
  height:16px;
  Overflow:hidden;
  Text-indent: -99em;
  width:16px;
 Cursor:pointer;
  Flex-control-paging Li A.flex-active,. flex-control-paging li.active a {background-position:0 0;
  }. Flexslider. Slides a img {width:100%;
  height:482px;
 Display:block;
 }

The above code is this article uses JQ to realize hover control picture carousel content, hope everybody likes.