jQuery實現一組圖片迴圈滾動

阿新 • • 發佈：2022-01-26

本文例項為大家分享了實現一組圖片迴圈http://www.cppcns.com滾動的具體程式碼，供大家參考，具體內容如下

效果：

jQuery實現一組圖片迴圈滾動

程式碼：

<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8">
    <title>實現一組圖片的迴圈滾動</title>
    <style type="text/">
      *{
        margin: 0;
        padding: 0;
      }
      div{
        width: 1066px;/*2張圖片的總寬度*/
        height: 300px;
        background-color: #000000;
       owpGSBLqI 
 margin: 120px auto;
        overflow: hidden;/*超出的隱藏*/
        border: 1px solid #00ff37;
      }
      ul{
        width: 3198px; /*6張圖片的總寬度 放在一行*/
        height: 300px;
        list-style: none;
        background-color: #000000;
      }
      ul>li {
        float: left;
      }
    </style>
    <script type="text/" src="/jquery-1.12.4.js"></script>
    <script type="text/script">
      $(function () {
        //編寫一個可以讓圖片自動迴圈滾動的函式(弄一個定時器，回撥函式裡設定它的marginLeft)
        var timer
        var offset = 0 //待會用這個變數設定它的marginLeft (js程式碼可以不寫分號的，我是懶得寫了)
        function autoRun(){
          timer = setInterval(function () {
            offset += -10 //這是marginLeft
          http://www.cppcns.com 
  if(offset <= -2132){
              //滾動了四張圖片 接著滾動
              offset = 0
            }
            $("ul").css({
              marginLeft:offset
            })
          },131.4)
        }
        autoRun()//滾動起來
        //監聽li的移入 移出事件
        $("li").hover(function () {
          //滑鼠指標放上面 不讓ta滾動(停掉這個定時器)
          clearInterval(timerwww.cppcns.com 
)
          //滑鼠指標沒有放上面的圖片 給他們一個黑色的背景 這樣顯得選中的這個亮
          $(this).siblings().fadeTo(120,0.33)
          //當前的這個圖片亮
          $(this).fadeTo(120,1)
        },function () {
          autoRun() //滾動
          $("li").fadeTo(120,1) //1-->全亮
        })


      })
    </script>
  </head>
  <body>
    <div>
      <ul>
        <li>
          <img src="img/111.jpg">
        </li>
    owpGSBLqI    <li>
          <img src="img/222.jpg">
        </li>
        <li>
          <img src="img/333.jpg">
        </li>
        <li>
          <img src="img/444.jpg">
        </li>
        <li>
          <img src="img/111.jpg">
        </li>
        <li>
          <img src="img/222.jpg">
        </li>
      </ul>
    </div>
  </body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

jQuery實現一組圖片迴圈滾動

本文例項為大家分享了實現一組圖片迴圈http://www.cppcns.com滾動的具體程式碼，供大家參考，具體內容如下

jQuery實現移動端圖片上傳預覽元件的方法分析

本文例項講述了jQuery實現移動端圖片上傳預覽元件的方法。分享給大家供大家參考，具體如下：

jquery實現上傳圖片功能

本文例項為大家分享了jquery實現上傳圖片功能的具體程式碼，供大家參考，具體內容如下

js點選按鈕實現多張圖片迴圈切換

本文例項為大家分享了點選按鈕實現多張圖片迴圈切換的具體程式碼，供大家參考，具體內容如下

c++ 如何做出實現一組資料的實際索引

是一種計算機高階程式設計語言，由C語言擴充套件升級而產生，最早於1979年由本賈尼·斯特勞斯特盧普在AT&T貝爾工作室研發。

jquery實現圖片無縫滾動蒙版遮蔽效果

本文例項為大家分享了jquery實現圖片無縫滾動、蒙版效果的具體程式碼，供大家參考，具體內容如下

jQuery 實現列表自動滾動迴圈滾動顯示新聞通知

需求頁面中一個小區域迴圈滾動展示通知（公告、新聞、活動、圖片等），並且滑鼠hover時停止滾動並提示，滑鼠離開後，繼續滾動。

jquery實戰(一)——jquery實現table的滾動

技術標籤：JQueryjquerytable滾動系列文章目錄提示：這裡可以新增系列文章的所有文章的目錄，目錄需要自己手動新增例如：第一章 Python 機器學習入門之pandas的使用

Vue實現一種簡單的無限迴圈滾動動畫的示例

本文主要介紹了Vue實現一種簡單的無限迴圈滾動動畫的示例，分享給大家，具體如下：

基於jQuery實現列表迴圈滾動小技巧(超簡單)

看到一個很好的思路，記錄一下之前使用做滾動效果，在這兩篇文章裡有寫：文一、文二，分別使用了scrollLeft()與scrollTop()、scroll()來實現

python實現批量處理將圖片貼上到另一張圖片上並儲存

pillow真的是一個很強大的影象處理庫！！！！本人利用pillow庫實現了將資料夾下的批量照片隨機貼上到另一張圖片上，並批量儲存到指定資料夾！！！

jQuery實現點選滾動到指定元素上的方法分析

本文例項講述了jQuery實現點選滾動到指定元素上的方法。分享給大家供大家參考，具體如下：

jQuery實現中獎播報功能（讓文字滾動起來）簡單設定數值即可

在很多場景中，我們需要使用到中獎資訊播報，或者一些文字資訊迴圈滾動播報，在結合實際的開發中，然後也百度查詢了相關的知識點，現在送上jQuery實現文字滾動。

TP5框架實現一次選擇多張圖片並預覽的方法示例

本文例項講述了TP5框架實現一次選擇多張圖片並預覽的方法。分享給大家供大家參考，具體如下：

Unity3D實現待機狀態圖片迴圈淡入淡出

本文例項為大家分享了Unity3D實現圖片迴圈淡入淡出的具體程式碼，供大家參考，具體內容如下

TP框架實現上傳一張圖片和批量上傳圖片的方法分析

本文例項講述了TP框架實現上傳一張圖片和批量上傳圖片的方法。分享給大家供大家參考，具體如下：

jQuery實現的移動端圖片縮放功能元件示例

本文例項講述了jQuery實現的移動端圖片縮放功能元件。分享給大家供大家參考，具體如下：

jQuery實現滑鼠滑動切換圖片

本文例項為大家分享了jQuery實現滑鼠滑動切換圖片的具體程式碼，供大家參考，具體內容如下

python opencv把一張圖片嵌入（疊加）到另一張圖片上的實現程式碼

python opencv把一張圖片嵌入（疊加）到另一張圖片上 1、背景：最近做了個煙火生成系統的介面設計，需要將煙霧圖片嵌入到任意一張圖片中，因此需要python opencv把一張圖片嵌入（疊加）到另一張圖片上的知識。（圖中

Android ListView實現無限迴圈滾動

本文例項為大家分享了Android無限迴圈滾動的具體程式碼，供大家參考，具體內容如下