JQuery implements image switching (automatic switch + manual switch) and jquery Automatic Switch

JQuery implements image switching (automatic switch + manual switch) and jquery Automatic Switch

I have accumulated many interesting small examples when I learned JavaScript, but I have not found any good platforms to demonstrate these JS effects. Today, I found RunJS, a platform for sharing code. I can't wait to share it with you.

When browsing the websites of major malls or the homepage of some websites, some images related to this website are displayed in real time, this article will share with you an example of using jQuery to automatically switch images.

Core homepage code (Default. aspx ):

<! DOCTYPE html> 


Csscode (tupianqiehuan.css ):

*{margin:0;padding:0;}body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{zoom:1;}ul,li{list-style:none;}img{border:0;}.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}/* focus */#focus{width:800px;height:280px;overflow:hidden;position:relative;}#focus ul{height:380px;position:absolute;}#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}#focus ul li div{position:absolute;overflow:hidden;}#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}#focus .btn span.on{background:#fff;}#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;}#focus .pre{left:0;}#focus .next{right:0;background-position:right top;}



JS Code (tupianqiehuan. js ):

$ (Function () {var sWidth = $ ("# focus "). width (); // obtain the width (display area) of the focus chart var len = $ ("# focus ul li "). length; // obtain the number of focal points var index = 0; var picTimer; // The following Code adds a number button and a translucent bar after the button, there are also buttons var btn = "<div class = 'btnbg '> </div> <div class = 'btn'>"; for (var I = 0; I <len; I ++) {btn + = "<span> </span> ";} btn + = "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div> "; $ ("# focus "). append (btn); $ ("# focus. btnBg "mirror.css (" opacity ", 0.5); // Add a mouse slide event for a small button to display the corresponding content $ (" # focus. btn span "2.16.css (" opacity ", 0.4 ). mouseover (function () {index = $ ("# focus. btn span "). index (this); showPics (index );}). eq (0 ). trigger ("mouseover"); // process the transparency of buttons on the previous page and next page $ ("# focus. preNext "pai.css (" opacity ", 0.2 ). hover (function () {$ (this ). stop (true, false ). animate ({"opacity": "0.5"}, 300) ;}, function () {$ (this ). stop (true, false ). animate ({"opacity": "0.2"}, 300) ;}); // previous page button $ ("# focus. pre "). click (function () {index-= 1; if (index =-1) {index = len-1;} showPics (index );}); // next page button $ ("# focus. next "). click (function () {index + = 1; if (index = len) {index = 0;} showPics (index) ;}); // This example uses left and right scrolling, that is, all the li elements are floating to the left in the same row, so the width of the peripheral ul elements needs to be calculated here $ ("# focus ul" ).css ("width ", sWidth * (len); // stop automatic playback when you move the mouse over the focus chart, and start automatic playback when the mouse slides out $ ("# focus "). hover (function () {clearInterval (picTimer) ;}, function () {picTimer = setInterval (function () {showPics (index); index ++; if (index = len) {index = 0 ;}, 4000); // This 4000 represents the automatic playback interval, in milliseconds }). trigger ("mouseleave"); // display the image function, and display the corresponding content based on the received index value. function showPics (index) {// normal switch var nowLeft =-index * sWidth; // calculate the left value of the ul element based on the index value $ ("# focus ul "). stop (true, false ). animate ({"left": nowLeft}, 300); // adjust the ul element to scroll to the calculated position $ ("# focus. btn span "). stop (true, false ). animate ({"opacity": "0.4"}, 300 ). eq (index ). stop (true, false ). animate ({"opacity": "1"}, 300); // switch the current button to the selected effect }});


For more information, seeEffect demonstration

Here we will give you an appealer, which will briefly summarize how to publish your own mini programs on RunJS and some tips on using RunJS.