2. 程式人生 > >js輪播圖教程

js輪播圖教程

阿新 • • 發佈：2019-02-16
window.onload = function() { var list = document.getElementById('list'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var box = document.getElementById('box'); function animate(offset) { //獲取的是style.left，是相對左邊獲取距離，所以第一張圖後style.left都為負值，
//且style.left獲取的是字串，需要用parseInt()取整轉化為數字。 var newLeft = parseInt(list.style.left) + offset; if(newLeft < -11520){ newLeft = -3840; }//當到邊界時, 返回圖片的當前位置 if(newLeft > 0){ newLeft = -7680
; } list.style.left = newLeft + 'px'; } // prev.onclick = function() { // animate(1920); // } // next.onclick = function() { // animate(-1920); // } var timer; function
play() {//設定定時器 timer = setInterval(function () { next.onclick() }, 1500) } play(); function stop() { clearInterval(timer); } box.onmouseover = stop; box.onmouseout = play; var buttons = document.getElementById('buttons').getElementsByTagName('li'); var index = 1; function buttonsShow() { for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == 'on') { buttons[i].className = ''; } }//遍歷找到有class為on的li, 並清除掉 buttons[index-1].className = 'on'; } prev.onclick = function() { index--; if (index < 1) { index = 5; } buttonsShow(); animate(1920); } next.onclick = function() { index++; if (index > 5) { index = 1; } buttonsShow(); animate(-1920); } for (var i = 0; i < buttons.length; i++) {//下面由於產生了一個典型的閉包, 因此要採用立即執行函式的方法 (function(j){ buttons[j].onclick = function () { console.log(j); var clickIndex = parseInt(this.getAttribute('index')); var offset = 1920 * (index - clickIndex); animate(offset); //存放滑鼠點選後的位置，用於小圓點的正常顯示 index = clickIndex; buttonsShow(); } })(i) } }

相關推薦

js輪播圖教程

window.onload = function() { var list = document.getElementById('list'); var prev = document.getElementById('prev');

自寫：js輪播圖 鼠標劃過下方按鈕，繼續下一個

就會 定時器 pac color lis hover 路線 css 輪播圖 自寫：js輪播圖 鼠標劃過下方按鈕，繼續下一個 定時器關閉後再開啟一般都會按照原來的路線繼續走，不會因為你點了3而下個就會是4 $(".focus-rad>ul>li").hover(

js輪播圖

輪播圖 定時器 .com logs images lun script img doc <script> var i = 0; //創建一個定時器 function init(){ setInterval(changeImg,2000); } //定義切換圖片的

原生js輪播圖實現

索引 獲取 mouseout abs length ati point css ack 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式 用戶輸入 ade 1.數據校驗 步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

js輪播圖封裝

banner.js結合move.js實現封裝輪播圖 banner.js程式碼 var swiper = (function() { var timer = null; return { init(ele) { if(typeof ele == 'string') { e

適合【前端入門者】的原生JS輪播圖實現

學前端已經一年多了，在JavaScript方面，學會了基本語法，頁面操作之後，慢慢走向了框架這條不歸路，框架用起來真的是省時省力，效果好、程式碼少、還節省時間。 在前幾天去做一個頁面的時候，要求只能是用以前版本的框架，我就去找框架之前的版本，可是在某些官網上老版本的框架已經不存在了，就我這暴脾氣

js輪播圖程式碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .banner{

js輪播圖的實現

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style>  &nbs

JS-----輪播圖封裝（新手）

效果圖：3D旋轉+切割 //輪播圖 //使用例子: //1.在需要的位置放置一個元素，樣式什麼的自己給，不影響     <div id="lunbotu" style="width: 400px;height: 200px;">  &

第六十八天 js輪播圖

無限 內部 定位 相對布局 innertext 如果 狀態 通過 nbsp 1.浮動與定位結合使用 浮動與相對定位 //1.兩者均參與布局 //2.主浮動布局，相對布局輔助完成布局微調 //3.相對定位布局微調不同於盒模型布局微調，相對定位布局不影響盒子原有位置，就會影響

最簡單的原生js輪播圖（適合新手）

經過幾天的努力，終於攻克了這一難題，於是迫不及待的想要分享給大家，編寫之前，我也看了不少其他博主的部落格，大多是用偏移量寫的，對新 手來說，還是有些難以理解，雖然可能實現的需求不一樣，但我想先從簡入手，所以自己查閱資料，修改bug，終於完成。話不多說，上程式碼：如果 可以

js輪播圖的製作詳細過程

JS輪播圖1. 在body裡面寫簡單的HTML程式碼。首先在頂部head標籤裡引入外部CSS和JS，注意要引入JQuery庫，並且放在所寫的js上面，不然不會有效果。然後在一個div中包裹兩個url,第一個用於顯示圖片，第二個用於定義頁碼。程式碼如下：<!DOCTYPE

js輪播圖自動播放和手動控制

html檔案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue.js 輪播圖元件

       之前用jQuery寫過輪播元件，用的jquery動畫實現的圖片滑動效果。這個元件的滑動特效是原生js搭配vue的資料繫結實現的，不依賴其他庫，雖然可以再vue.js中引入swiper,但是引入類庫的最大的缺點就是冗餘程式碼太多，所以還是自己寫一個比較好，簡單扼要

一個原生JS輪播圖外掛的全部實現

前段時間把模組化開發的學習整理了之後就想著做個小外掛。本文記錄個人獨立完成的一個原生JS輪播圖外掛的實現過程。嗯，東西很簡單，大佬勿噴。github求start 涉及知識點： 模組化開發 ES6 JS HTML5和css

js實現輪播圖

display lex tee 添加 har scrip con tle win 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

js+c3變色輪播圖

opacity border height itl tint nth head title utf <html> <head> <title>原生JS輪播</title> <meta charset="u

2017-05-17 js動態生成輪播圖小圓點

輪播圖 鼠標 borde images author eight 復習 innerhtml pad 從今天開始，把自己做的筆記轉移到博客園： 今晚復習了一下動態創建輪播圖小圓點做了一下小的筆記： 1 <!DOCTYPE html> 2 <html l

每天一個JS 小demo之韓雪冬輪播圖。主要知識點：html，css布局，對於數組和對象的理解和運用

身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st