JS シームレススクロール-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS シームレススクロール

高洛峰

Nov 19, 2016 am 11:07 AM

javascript

<!DOCTYPE html>
<html>
 
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   ul,
   li {
    margin: 0;
    padding: 0;
    list-style-type: none;
   }
 
   img {
    height: 300px;
    width: 300px;
   }
 
   ul {
    position: absolute;
    left: 0;
    top: 0;
   }
 
   li {
    float: left;
   }
 
   #div1 {
    height: 300px;
    width: 1200px;
    background-color: red;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
   }
   input{
    border: 1px solid #8A2BE2;
    height: 100px;
    width: 200px;
    font-size: 20px;
    color: white;
    background-color: #FFB6C1;
    margin-left: 100px;
   }
  </style>
 </head>
 
 <body>
  <div id="div1">
   <ul>
    <li><img src="img/014.jpg" /></li>
    <li><img src="img/017.jpg" /></li>
    <li><img src="img/018.jpg" /></li>
    <li><img src="img/019.jpg" /></li>
   </ul>
  </div>
  <input type="button" value="向左滚动" />
  <input type="button" value="向右滚动" />
 </body>
 <script type="text/javascript">
 // 实现无缝滚动，鼠标移入停止滚动，移出继续滚动，以及可以调节滚动方向效果
  var oDiv = document.getElementById("div1");
  var ul = document.getElementsByTagName("ul")[0];
  var liS = document.getElementsByTagName("li");
 
  var timer = null;
  var speed = 4;
  ul.innerHTML = ul.innerHTML + ul.innerHTML;
  ul.style.width = liS[0].offsetWidth * liS.length + "px";
 
  timer = setInterval(move, 30);
 
  oDiv.onmouseover = function() {//实现鼠标移入暂停
   clearInterval(timer);
  }
  oDiv.onmouseout = function() {//鼠标移出继续滚动
   timer = setInterval(move, 30);
 
  }
 
  move();//每次执行move()的时候都会延迟30ms，//
/在第一次的实际效果上有瑕疵，在外面调用一次move()
 
  function move() {
   if(-ul.offsetLeft > ul.offsetWidth / 2) {//左滚无缝
    ul.style.left = 0 + "px";
   }
 
   if(ul.offsetLeft > 0) {//右滚无缝
    ul.style.left = -ul.offsetWidth / 2 + "px";
   }
 
   ul.style.left = ul.offsetLeft + speed + "px";
  }

ログイン後にコピー

//ボタンによる進行方向変更機能を実現

  var inputs = document.getElementsByTagName("input");
  inputs[0].onclick = function() {
   speed = -4;
  }
  inputs[1].onclick = function() {
   speed = 4;
  }
 </script>
 
</html>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7530

CakePHP チュートリアル

1379

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワークプロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラデバイスがあるとします。

See all articles

JS シームレススクロール

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック