Perfect simple implementation of JQuery image switching effect, jquery image Switching

Perfect simple implementation of JQuery image switching effect, jquery image Switching

The effect is as follows:

Css:

Body {font-family: "Microsoft Yahei";} body, ul, li, img, h3, dl, dd, dt, h1 {margin: 0px; padding: 0px; list-style: none;} img {vertical-align: top;}/*** big chart switching ***/. scroll_view {margin: 0px auto; overflow: hidden; position: relative ;}. photo_view li {position: absolute; width: 100% ;}. photo_view li em ,. photo_view li h3 {position: absolute; bottom: 0px; z-index: 1; height: 35px; line-height: 35px; width: 100%; left: 0px ;}. photo_view li em {z-index: 1; background: rgba (0.5, 0,); filter: progid: DXImageTransform. microsoft. gradient (GradientType = 0, startColorstr = '#50000000', endColorstr = '#50000000'); _ background: #000 ;}. photo_view li h3 {z-index: 2; text-indent: 1em; font-weight: normal ;}. photo_view li h3 a {color: # fff ;}. photo_view li h3 a: hover {color: # f60 ;}. small_photo {position: absolute; bottom: 40px; right: 10px; cursor: pointer; z-index: 4 ;}. small_photo li {float: left; padding-right: 10px ;}. small_photo li img {width: 80px; height: 35px; border: solid 2px # ccc; border-radius: 2px ;}. small_photo li. active img {border: solid 2px # f60 ;}

Html:

<! -- Start: big chart switching --> <div class = "scroll_view"> <ul class = "photo_view"> <li>  <em> </em> 
Js:
$. Fn. extend ({imgScroll: function (options) {var def = {phtot_parent: $ (". scroll_view "), photo_view: $ (". photo_view "), small_photo: $ (". small_photo "), speed: 800, isauto: true, width: 800, height: 349}, opt = $. extend ({}, def, options), $ photo_view = opt. photo_view, $ small_photo = opt. small_photo, speed = opt. speed, isauto = opt. isauto, index = 0, _ length = $ photo_view.find ("li "). length, strTime = null; opt.phtot_parent.css ({width: o Pt. width, height: opt. height}); $ photo_view.find ("li: not (: first )"). hide ()//. find ("img "). hide (); $ photo_view.find ("li "). each (function (I) {$ small_photo.append ('<li>  </li>');}) $ small_photo.find (" li: first "). addClass ("active"); // thumbnail Mouse Action $ small_photo.find ("li "). bind ("mouseenter", function () {clearInterval (strTime); if (index! = $ (This ). index () {index = $ (this ). index (); animate (index )}}). bind ("mouseleave", function () {if (isauto) {start () ;}}); // hover over a large image $ photo_view.find ("li "). bind ("mouseenter", function () {clearInterval (strTime );}). bind ("mouseleave", function () {if (isauto) {start () ;}}); // automatically play if (isauto) {start ();} // start the automatic playback function start () {strTime = setInterval (function () {index >=_ length-1? Index = 0: index ++; animate (index) ;}, speed) ;}// animation effect function animate (_ index) {// console. log (_ index) $ small_photo.find ("li "). eq (_ index ). addClass ('active '). siblings (). removeClass ("active"); // change the widget navigation style $ photo_view.find ("li" ).eq(_index).css ("z-index", 12.16.siblings().css ("z-index", 0 ); // control the level of absolute $ photo_view.find ("li "). eq (_ index ). show (). find ("img" mirror.css ({"opacity": 0}); // set the opacity of the large image to 0 $ photo_view.find ("li "). eq (_ index ). find ("img "). animate ({opacity: 1}, 300, function () {$ (this ). removeAttr ("style"); // Delete the opacity $ photo_view.find ("li") after the animation "). eq (_ index ). show (). siblings (). hide (); // display a large image}); // display the currently displayed animation }}});
<script type="text/javascript">  $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:3000,isauto:true});   })</script>
The simple implementation of the above perfect JQuery image switching effect is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the help house.