В примере в этой статье используется JS для достижения прокрутки изображений с эффектом паузы, управляемой кнопками, для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Seamless Scroll 2 </title> <style> #warp {width: 1250px; Высота: 300px; переполнение: скрыто; Маржа: 100px Auto 0; Overflow-X: Auto; } #warp #con {width: 4000px; Высота: 300px; переполнение: скрыто; } #warp #con #box1 {float: left; переполнение: скрыто; } #warp #con #box2 {float: left; переполнение: скрыто; } #warp img {float: left; Право маржи: 10px; Ширина: 200px; Высота: 300px; } .btn {text-align: center; маржинальная версия: 10px; } .btn кнопка {font-size: 16px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "Images/meinv2.jpg"> <img src = "Images/meinv3.jpg"> <img src ". <img src="images/meinv5.jpg"> <img src="images/meinv6.jpg"> </div> <div id="box2"></div> </div> </div> <div> <button id="scrollL"><<scroll left</button> <button id="scrollR">Scroll right>></button> </div> <script> var warp = document.getElementbyId ('arpp'); var con = document.getElementbyId ('con'); var box1 = document.getElementbyId ('box1'); var box2 = document.getElementbyId ('box2'); var img = box1.getElementsbytagname ('img') [0]; var scrolll = document.getElementbyId ('scrolll'); var scrollr = document.getElementbyId ('scrollr'); var -timer1 = null, timer2 = null, flage = 1; box2.innerhtml = box1.innerhtml; max = box1.clientWidth; imgmax = img.clientWidth+10; функция scrollleft () {flag = 1; ClearInterval (таймер1); timer1 = setInterval (function () {warp.scrollleft ++; if (warp.scrollleft> = max) {warp.scrollleft = 0;} if (warp.scrollleft%imgmax == 0) {clearInterval (timer1); cleartimeout (timer2); timer2 = settim timer1 = setInterval (scrollleft, 5)}, 2000)}}, 5)} функция scrollright () {flag = 0; ClearInterval (таймер1); timer1 = setInterval (function () {warp.scrollleft--; if (warp.scrollleft <= 0) {warp.scrollleft = max;} if (warp.scrollleft%imgmax == 0) {clearinterval (timer1); cleartimeout (timer2); timer2 = settim timer1 = setInterval (scrollright, 5)}, 2000)}}, 5)} scrollleft (); scrolll.onclick = function () {// clearInterval (timer1); // cleartimeout (timer2); scrollleft (); } scrollr.onclick = function () {// clearInterval (timer1); // cleartimeout (timer2); scrollright (); } warp.onmouseenter = function () {clearInterval (timer1); ClearTimeout (Timer2); } warp.onmouseleave = function () {clearInterval (timer1); ClearTimeout (Timer2); console.log (Flage); if (flage) {scrollleft ();} else {scrollright ();}} </script> </body> </html>Специфический эффект этого эффекта состоит в том, чтобы поднять мышь вверх и прокручивать, а затем прокрутить. При прокрутке, это прокрутка картинок один за другим, то есть после прокрутки одной картинки в течение 2 секунд, остановитесь и начните прокручивать следующую картинку. Пожалуйста, обратитесь к коду для конкретного контента.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.