В этом примере используется реализация кода JavaScript Code для бесшовного прокрутки для вашей ссылки. Конкретный контент заключается в следующем]
Изображение воспроизведения:
Код реализации:
<! Doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz < /title> <style> *{margin: 0; Заполнение: 0; } body {width: 1000px; Маржа: 100px Auto; фоновый цвет: #fff; } #wrapper {overflow: hidden; Ширина: 600px; высота: 100px; позиция: относительно; } #wrapper ul {position: Absolute; слева: 0; Верх: 0; } #wrapper li {float: left; Список стиля: нет; } #wrapper li img {width: 150px; высота: 100px; граница-радий: 9px; } input [type = button] {margin-top: 20px; Ширина: 35px; Высота: 25px; высота линии: 25px; } </style> <script type = "text/javascript"> window.onload = function () {var timer = null; var speed = 4; var od = document.getElementbyId ("warpper"); var au = od.getElementsbytagname ('ul') [0]; var ali = au.getelementsbytagname ('li'); au.innerhtml = au.innerhtml+au.innerhtml; au.style.width = ali [0] .offsetwidth*ali.length+'px'; timer = setInterval (move, 30) function move () {if (au.offsetleft <-au.offsetwidth/2) {au.style.left = '0'; } if (au.offsetleft> 0) {au.style.left = -au.offsetWidth/2+'px'; } au.style.left = au.offsetleft+speed+'px'; } od.onmouseover = function () {clearInterval (timer); } od.onmouseout = function () {timer = setInterval (move, 30)} document.getElementById ("btn1"). OnClick = function () {speed = -4; } document.getElementById ("btn2"). onclick = function () {speed = 4; }} </script> </head> <body> <div id = "warper"> <ul> <li> <img src = "img/pic4.jpg"/> </li> <li> <img src = "img/pic3 src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <input type = "name =" "id =" btn1 "value =" слева "/> <входной тип =" id = "btn2" value = "right"/> </> </> </> </> </> </> </> </> </hodly </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </>)Вы можете обратиться к следующим темам для обучения:
«Сводка эффекта прокрутки JavaScript», «Сводка эффекта прокрутки jQuery», «Краткое описание эффекта карусели JQUERY», «
Выше приведено все об этой статье, и я надеюсь, что для всех будет полезно изучить программирование JavaScript.