Jquery production-Focus Image carousel, jquery-focus
The carousel focus chart is often used in company projects, so I wrote a horizontal carousel focus chart in the form of jq. You can click a small dot or the Left or Right button to switch between them, which belongs to the fixed width type. It is not difficult to change the width of bannerCon in css to the percentage, and then change the width of ul and li in js to the width of the parent container, $ (window) is required ). resize: currently, the company has not used this function for the moment. Let's just release this fixed width.
Compatible with IE6 + and later browsers, with two parameters: carousel speed and switching interval. As follows:
The Html code is as follows:
<! Doctype html>
The Css style is as follows:
@ Charset "UTF-8";/* simple reset */body, p, ul, ol, li {margin: 0; padding: 0;} ul, ol {list-style: none;} img {border: none;} a, button {outline: none ;}. clearfix: after {visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0 ;}/ * specific style */. banner {position: relative; height: 400px; overflow: hidden ;}. banner. bannerCon {position: absolute; top: 0; left: 50%; width: 800px; height: 400px; margin-left:-400px; overflow: hidden ;}. bannerCon. imgList {position: absolute; top: 0; left: 0; width: 99999px; height: 400px ;}. bannerCon. imgList li {float: left; width: 800px; height: 400px ;}. bannerCon. imgList li a {position: relative; display: block; height: 100% ;}. bannerCon. imgList li img {width: 800px; height: 400px ;}. bannerCon. pre-nex {display: none; position: absolute; top: 50%; width: 40px; height: 60px; margin-top:-40px; font: bold 40px/60px Simsun; color: # ccc; text-align: center; border: none; background: rgba (0, 0, 0 ,. 30); filter: progid: DXImageTransform. microsoft. gradient (startColorStr = #4c000000, endColorStr = #4c000000); cursor: pointer; z-index: 3 ;}. bannerCon. the pre-nex.show {display: inline-block ;}. bannerCon. prev {left: 13% ;}. bannerCon. next {right: 13% ;}. bannerCon. btnList {position: absolute; left: 0; bottom: 20px; width: 100%; height: 12px; text-align: center; z-index: 2; _ overflow: hidden ;}. bannerCon. btnList li {display: inline ;}. bannerCon. btnList li span {display: inline-block; width: 12px; height: 12px; margin: 0 5px; border-radius: 6px; background-color: # 14829e; cursor: pointer ;}. bannerCon. btnList li. cur span {background-color: # f30 ;}View Code
The Js Code is as follows:
// The js statement loaded after the text is read starts ============================== ================================== function Scroll (obj, speed, interval) {// parent container, carousel speed, switching interval $ (". "+ obj ). each (function () {var $ box = $ (this), $ imgUl = $ box. children (". imgList "), $ imgLi = $ imgUl. children ("li"), $ btnUl = $ box. children (". btnList "), $ btnLi = $ btnUl. children ("li"), $ btnPreNex = $ box. children (". pre-nex "), $ btnPre = $ box. children (". prev "), $ btnNex = $ Box. children (". next "), n = $ imgLi. length, width = $ imgLi. width (), left = parsefloat(javasimgul.css ("left"), k = 0, Player; extends imgul.css ("width", n * width); function scroll () {// carousel event $ imgUl. stop (). animate ({left:-width}, speed, function () {k + = 1; extends imgul.css ("left", 0); $ imgUl. children ("li: first "). appendTo ($ (this); $ btnLi. removeClass ('cur'); if (k> = n) {k = 0;} $ btnUl. children ("li "). eq (k ). addClass ('cur') ;}) ;}$ BtnLi. click (function () {// small dot click Event var index = $ btnLi. index (this); $ (this ). addClass ('cur '). siblings ("li "). removeClass ('cur'); if (index> = k) {var dif = index-k; left =-dif * width; $ imgUl. stop (). animate ({left: left}, speed, function () {limit imgul.css ("left", 0); $ imgUl. children ("li: lt (" + dif + ")"). appendTo ($ imgUl) ;}) ;}else {var j = n-(k-index); extends imgul.css ("left", (index-k) * width ); $ imgUl. children ("Li: lt (" + j + ")"). appendTo ($ imgUl); $ imgUl. stop (). animate ({left: 0}, speed) ;}k = index ;}); $ btnPreNex. click (function () {// left/right button and click event var index = $ btnLi. index (this); if ($ (this ). hasClass ('Next') {if (! $ ImgUl. is (": animated") {k + = 1; $ imgUl. animate ({left:-width}, speed, function () {limit imgul.css ("left", 0); $ imgUl. children ("li: first "). appendTo ($ (this); if (k> = n) {k = 0;} $ btnUl. children ("li "). removeClass ('cur '). eq (k ). addClass ('cur') ;}}} else {if (! $ ImgUl. is (": animated") {k + =-1; using imgul.css ("left",-width); $ imgUl. children ("li: last "). prependTo ($ imgUl); $ imgUl. stop (). animate ({left: 0}, speed); if (k <0) {k = n-1;} $ btnUl. children ("li "). removeClass ('cur '). eq (k ). addClass ('cur') ;}}); $ box. hover (// move the mouse in/out event function () {clearInterval (Player); $ btnPreNex. addClass ('show') ;}, function () {Player = setInterval (function () {scroll ()}, interval); $ btnPreNex. removeClass ('show') ;}); Player = setInterval (function () {scroll ()}, interval) ;}$ (function () {// read the carousel event Scroll ("bannerCon );});View Code
Note that I used 1.9.1 to load the jq library. In fact, there are no problems with 1.7 +. If you think it is helpful to you, give it a compliment ~~~