js原生之焦點圖轉換加定時器

来源:http://www.cnblogs.com/ljm-fight/archive/2016/12/11/6160717.html
-Advertisement-
Play Games

在jQuery之焦點圖轉換-左右的基礎上,將jQuery代碼改成js原生,並添加定時器(setInterval()和clearInterval()) ...


jQuery之焦點圖轉換-左右的基礎上,將jQuery代碼改成js原生,並添加定時器(setInterval()和clearInterval())

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>焦點圖轉換--原生和定時器</title>
  6     <link rel="stylesheet" href="css/reset.css">
  7     <style type="text/css">
  8         .pic-show{width: 480px;overflow: hidden;}
  9         #pic{width: 1920px;height: 320px;position: relative;}
 10         #pic img{display: block;float: left;}
 11         .pic-show>img{display: block;cursor: pointer;opacity: 0.8; position: absolute;top: 142px;left: 30px;}
 12         .pic-show>img:last-child{display: block; position: absolute;left: 414px; } 
 13         ul{width: 120px;height: 18px;position: absolute;top: 280px;left: 185px;}
 14         li{float: left;width: 20px;height: 18px;margin-left: 5px;}
 15         a{display: block;width: 20px;height: 18px;text-decoration: none;border: 1px solid #ccc;border-radius: 50%;background-color: #ccc;opacity: 0.6;}
 16         a:hover{background-color: #094a99;}
 17         .aCss{background-color: #094a99;}
 18         p{width: 480px;text-align: center;}
 19         
 20     </style>
 21 </head>
 22 <body>
 23     <div class="pic-show">
 24         <div id="pic">
 25             <img src="images/1.jpg" alt="">
 26             <img src="images/2.jpg" alt="">
 27             <img src="images/3.jpg" alt="">
 28             <img src="images/4.jpg" alt="">
 29         </div>
 30         <img id="prev" src="images/slider-prev.png" alt="">
 31         <img id="next" src="images/slider-next.png" alt="">
 32     </div>
 33     <ul id="list">
 34         <li><a href="#" title="日落"></a></li>
 35         <li><a href="#" title="鋼琴"></a></li>
 36         <li><a href="#" title="大海"></a></li>
 37         <li><a href="#" title="秋色"></a></li>
 38     </ul>
 39     <p id="p">這是一段測試文字</p>
 40     <script src="js/jquery-3.0.0.js"></script>
 41     <script type="text/javascript">
 42         var num=0;
 43         function G(id){
 44             return document.getElementById(id)
 45         }
 46         var pic = G('pic')
 47         var next = G('next')
 48         var prev = G('prev')
 49         var p = G('p')
 50         var list = G('list')
 51         var arr = G('list').getElementsByTagName('a')
       //點擊next
52 next.onclick=function(){ 53 if(num<3){ 54 num=num+1; 55 } 56 else{ 57 num=0; 58 } 59 console.log(num); 60 var mlNum=num * -480+'px'; 61 pic.style.marginLeft=mlNum; 62 for(var j=0;j<arr.length;j++){ 63 arr[j].style.backgroundColor='#ccc'; 64 } 65 arr[num].style.backgroundColor="#094a99"; 66 event.preventDefault(); 67 68 var txt=arr[num].getAttribute("title"); 69 console.log(txt); 70 p.textContent=txt; 71 }
       //點擊prev
72 prev.onclick=function(){ 73 if(num>0){ 74 num=num-1; 75 } 76 else{ 77 num=3; 78 } 79 console.log(num); 80 var mlNum2=num * -480+'px'; 81 pic.style.marginLeft=mlNum2; 82 for(var j=0;j<arr.length;j++){ 83 arr[j].style.backgroundColor='#ccc'; 84 } 85 arr[num].style.backgroundColor="#094a99"; 86 event.preventDefault(); 87 88 var txt=arr[num].getAttribute("title"); 89 console.log(txt); 90 p.textContent=txt; 91 } 92 for(var i=0;i<arr.length;i++){ 93 arr[i].index=i;//創建索引值 94 arr[i].onclick=function(event){ 95 num=this.index; 96 var mlNum3=num * -480+'px'; 97 pic.style.marginLeft=mlNum3; 98 for(var j=0;j<arr.length;j++){ 99 arr[j].style.backgroundColor='#ccc'; 100 } 101 this.style.backgroundColor='#094a99'; 102 event.preventDefault(); 103 104 var txt=this.getAttribute("title"); 105 p.textContent=txt; 106 } 107 }
       //函數封裝
108 function lunbo(){ 109 if(num<3){ 110 num=num+1; 111 } 112 else{ 113 num=0; 114 } 115 console.log(num); 116 var mlNum=num * -480+'px'; 117 pic.style.marginLeft=mlNum; 118 for(var j=0;j<arr.length;j++){ 119 arr[j].style.backgroundColor='#ccc'; 120 } 121 arr[num].style.backgroundColor="#094a99"; 122 event.preventDefault(); 123 124 var txt=arr[num].getAttribute("title"); 125 console.log(txt); 126 p.textContent=txt; 127 }
       //通過定時器調用封裝好的函數
128 var stop=setInterval(lunbo,1500);
       //滑鼠放上和離開時定時器的狀態
129 pic.onmouseenter=function(){ 130 clearInterval(stop) 131 } 132 pic.onmouseleave=function(){ 133 stop=setInterval(lunbo,1500) 134 } 135 </script> 136 137 </body> 138 </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實現多態的前提 1。 要有繼承 2。 要有方法重寫,沒有也可以,但是沒有的話 就沒有意義 3。 要有父類引用 指向子類對象 如: 父類 f=new 子類(); * 多態中的成員訪問特點 * A, 成員變數 編譯看左邊, 運行看左邊 * B, 構造方法 創建子類對象的時候,,訪問 父類的構造方法, 對 ...
  • 推薦大家可以看看這個:http://wenku.baidu.com/link?url=RQU2exzV_EF3GATc3bzQU2o9LGMuCmiN5nUJth5SLG3E2TrxtBLQodJU_kZgfJjd9ljtR5XhZlHdzoHJ6kLeAF4uC9dttM1sNer60lg09gS ...
  • 功能強大的 jQuery 表單驗證插件,適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證,除自身擁有豐富的驗證規則外,還可以添加自定義的驗證規則。 相容 IE 6+, Chrome, Firefox, Safari, Opera 10+ 版本: jQuery v1.7+ jQuer ...
  • CSS不像其它高級語言一樣支持算術運算、變數、流程式控制制與面向對象特性,所以CSS樣式較多時會引起一些問題,如修改複雜,冗餘,某些別的語言很簡單的功能實現不了等。而javascript則是一種半面向對象的動態語言,有java的影子,有C的味道,中間有比其它語言多的糟粕,使用預處理辦法可以解決這些問題。 ...
  • 本文主要說明Json的基本概念,和一個在Html中使用Json給元素賦值的小例子,屬於基礎性信息 什麼是 JSON ? JSON 指的是 JavaScript 對象表示法(JavaScript Object Notation) JSON 是輕量級的文本數據交換格式 JSON 獨立於語言 * JSON ...
  • 1、typeof 用來檢測數據類型的運算符 typeof value 返回值首先是一個字元串,其次裡面包含了對應的數據類型,例如:"number"、"string"、"boolean"、"undefined"、"object"、"function" 局限性:1)typeof null ->"obje ...
  • 一、數據類型 5種基本數據類型:Null/Undefined/String/Boolean/Number 1種複雜數據類型:Object 二、數據類型檢測 傳送門《幾種JS數據類型方式及其局限性》 1、typeof 2、instanceof/constructor 3、Object.prototyp ...
  • 一、jQuery插件支持的轉換方式 二、瀏覽器支持的轉換方式(Firefox,Chrome,Opera,Safair,IE9,IE8) 註意:由於ie8(相容模式),ie7和ie6沒有JSON對象,需要使用JSON官方的方式,引入json.js。 三、javascript支持的轉換方式 註意:ie8 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...