JS achieves automatic carousel image effects (adaptive screen width + Mobile Phone Touch Screen sliding) and js adaptive

JS achieves automatic carousel image effects (adaptive screen width + Mobile Phone Touch Screen sliding) and js adaptive

1. In this article, we use js + jQuery to implement carousel images. We need to reference the jquery package. The other implementations are animate adaptive carousel and transform smooth carousel (in the annotation code ).

2. You can change the images in the Code. The style and logic are all written in js.

3. html tag code and js Code

<Div class = "slider"> // carousel arrow <p class = "lastpic">  </p> <p class =" nextpic ">  </p> // carousel images <ul id =" slides "class =" slides clearfix "> <li>  </li>  </li>  </li>  </li> </ul> </div>

<Script type = "text/javascript"> $ (document ). ready (function () {var len = $ (". slider li "). length-1; // set the style for the slider $ (". slider "detail .css ({" width ":" 100% "," height ":" inherit "," overflow ":" hidden "," display ": "inline-block"}); // set the width of ul $ (". slides "detail .css ({" position ":" relative "," width ":( (len + 1) * 100 ). toString () + "%", "margin": "0", "padding": "0"}); // set the percentage width for li $ (". slides li ").css ({" width ":( 100/(len + 1 )). toString () + "%", "float": "left"}); // set the width for the image $ (". responsive "detail .css ({" width ":" 100% "," height ":" inherit "}); // control point style $ (". slider p "detail .css ({" position ":" absolute "," z-index ":" 999 "," cursor ":" pointer "}); $ (". slider. lastpic ").css ({" left ":" 0 "," margin-top ":" 7% "}); $ (". slider. nextpic "detail .css ({" right ":" 0 "," margin-top ":" 7% "}); // animations move var I = 0; $ (". nextpic "). click (function () {moveNext (I) ;}); $ (". lastpic "). click (function () {moveLast (I) ;}); // automatic carousel var timer = setInterval (function () {moveNext (I) ;}, 5000 ); moveNext = function (n) {if (n = len) {I =-1; $ (". slider. slides "). animate ({right: ""}, 800);} else {$ (". slider. slides "). animate ({right :( (n + 1) * 100 ). toString () + "%"}, 800);} I ++;} moveLast = function (n) {if (n = 0) {I = len + 1; $ (". slider. slides "). animate ({right :( len * 100 ). toString () + "%"}, 800);} else {$ (". slider. slides "). animate ({right :( (n-1) * 100 ). toString () + "%"}, 800);} I --;} // var startX, endX, moveX; function touchStart (event) {var touch = event. touches [0]; startX = touch. pageX;} function touchMove (event) {var touch = event. touches [0]; endX = touch. pageX;} function touchEnd (event) {moveX = startX-endX; if (moveX> 50) {moveNext (I);} else if (moveX <-50) {moveLast (I) ;}} document. getElementById ("slides "). addEventListener ("touchstart", touchStart, false); document. getElementById ("slides "). addEventListener ("touchmove", touchMove, false); document. getElementById ("slides "). addEventListener ("touchend", touchEnd, false); // transition moves fixed width and cannot be adaptive // $ (". nextpic "). click (function () {// if (I = len) {// I =-1; // $ (". slider. slides "detail .css ({// 'transition-timing-function': 'linear ', // 'transition-duration': '800ms', // 'transform ': 'translatex (0px) '//}) //} else {// $ (". slider. slides "detail .css ({// 'transition-timing-function': 'linear ', // 'transition-duration': '800ms', // 'transform ': 'translatex (-'+ (I + 1) * width + 'px)' //}) //} // I ++ ;//}); // $ (". lastpic "). click (function () {// if (I = 0) {// I = len + 1; // $ (". slider. slides "detail .css ({// 'transition-timing-function': 'linear ', // 'transition-duration': '800ms', // 'transform ': 'translatex (-'+ len * width + 'px)' //}) //} else {// $ (". slider. slides "detail .css ({// 'transition-timing-function': 'linear ', // 'transition-duration': '800ms', // 'transform ': 'translatex (-'+ (I-1) * width + 'px)' //}) // I --; //}); </script>

The above is the JS Implementation of Automatic carousel image effects (adaptive screen width + Mobile Phone Touch Screen sliding) introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!