2. 程式人生 > >js面向物件---無縫輪播圖（附面向過程程式碼）

js面向物件---無縫輪播圖（附面向過程程式碼）

阿新 • • 發佈：2019-01-12
window.onload = function(){ var t1 = new Lb("box"); t1.l(); //設定包含圖片的ul寬度 t1.dot(); //點哪個圓,相對應的圖片顯示 t1.pre(); //向左 t1.next(); //向右 t1.auto(); //自動播放 t1.over(); //滑鼠移入 t1.out() //滑鼠移出 } // 建構函式
function Lb(id){ oBox = document.getElementById(id); this.oUl = oBox.getElementsByTagName("ul"); this.oImg = this.oUl[0]; this.oImg.innerHTML += this.oImg.innerHTML; //無縫輪播的關鍵 this.aImgList = this.oImg.getElementsByTagName("li"); this
.oDot = this.oUl[1]; this.aDotList = this.oDot.getElementsByTagName("li"); this.oDiv = oBox.getElementsByTagName("div") this.oPre = this.oDiv[0]; this.oNext = this.oDiv[1]; this.left = this.oImg.offsetLeft; this.now = 0; this
.timer = null; this.timer2 = null; var _this = this; // 向左 this.oPre.onclick = function(){ _this.pre(this); } //向右 this.oNext.onclick = function(){ _this.next(this); } //滑鼠移入 oBox.onmouseover = function(){ _this.over(); } //滑鼠移出 oBox.onmouseout = function(){ _this.out(); } } //方法 //設定包含圖片的ul寬度 Lb.prototype.l = function(){ return this.oImg.style.width = this.aImgList[0].offsetWidth * this.aImgList.length + "px"; } //點哪個圓,相對應的圖片顯示,選項卡事件 Lb.prototype.dot = function(){ var _this = this; for(var i=0;i<this.aDotList.length;i++){ this.aDotList[i].index = i; this.aDotList[i].onclick = function(){ _this.now = this.index; _this.tab(); } } } Lb.prototype.tab = function(){ for(var i=0;i<this.aDotList.length;i++){ this.aDotList[i].className = ""; } this.aDotList[this.now].className = "active"; this.oImg.style.left = -this.aImgList[0].offsetWidth * this.now +"px"; // this.move(-this.aImgList[0].offsetWidth * oBtn.index); if(this.oImg.style.left <= -this.oImg.style.width/2){ this.oImg.style.left = 0; } } //向左 Lb.prototype.pre = function(){ var _this = this; _this.now--; if(_this.now==-1){ _this.now =this.aDotList.length - 1; } _this.tab(); } //向右 Lb.prototype.next = function(){ var _this = this; _this.now++; if(_this.now==this.aDotList.length){ _this.now = 0; } _this.tab(); } //自動播放 Lb.prototype.auto = function(){ var _this = this; _this.timer2 = setInterval(function(){ _this.now++; _this.now = _this.now%_this.aDotList.length; _this.tab(); },2000); } //滑鼠移入 Lb.prototype.over = function(){ clearInterval(this.timer2); } //滑鼠移出 Lb.prototype.out = function(){ this.auto(); }

相關推薦

js面向物件---無縫輪播圖（附面向過程程式碼）

window.onload = function(){ var t1 = new Lb("box"); t1.l(); //設定包含圖片的ul寬度 t1.dot(); //點哪個圓,相對應的圖片顯示

JS實現簡單的輪播圖（非常簡單，一看就懂）

主要思路：先將需要輪播的4張圖使用絕對定位讓其重疊在banner這個盒子中，然後遍歷所有的圖片將其隱藏，再獲取當前圖片的index值，根據當前的index值設定當前的圖片顯示出來。設定間歇定時器setI

js 案例-6 無縫輪播圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JQ輪播圖（多張同時顯示）

HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <

自定義ViewGroup和FrameLayout實現輪播圖（包括底部小圓點）

廣告輪播圖在現在的APP首頁比較常見，主要的實現方式有兩種，一種是通過ViewPager，一種是通過自定義ViewGroup。前者的實現方式比較簡便，本篇文章講的是第二種方法，有人說用ViewPager不是更方便嗎，的確，但是我們通過自己定義ViewGroup，

Android 輪播圖（Viewpager+Handler定時器）

發現好多人提到banner，第一個想法就是擼個第三方依賴。然後出bug了，開啟三方程式碼，一堆檔案無從下手，改了又擔心出現新bug，然後又替換了第二個三方… 一個ViewPager能實現的功能，何必求助第三方。 Banner的實現技術點主要在於 1

關於js物件中兩個函式互相呼叫，其中一個為定時器宣告，定時器迴圈報錯問題（記錄一次嘗試新寫法的報錯經歷）附帶無縫輪播圖程式碼

先上之前的錯誤程式碼吧，注意計時器這個方法（是想把之前寫的的輪播圖演示重構一下） var obj = { sleepTime: 2000,//輪播延時 cont: 0,//第幾張 origin: document.getElementsByClassName('main-

原生js實現無縫滾動輪播圖（移動端）-自動輪播

想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。 head部分，沒什麼好說的： <meta charset="utf-8"> <me

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

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

JS 無縫輪播圖1-節點操作

idt radius nbsp black -o flow 開開 接下來 con 無縫輪播圖 (使用節點操作) <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

無縫滾動輪播圖（3）

我吃了炫邁做出來的輪播圖，停不下來的那種 一、結構 <div class="box" id="screen"> <ul> <li><img src="http://img.mp.itc.cn/upload/20161107/033

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

JS 實現3D立體效果的首頁輪播圖（瞬間讓你的網站高大上，逼格滿滿）

            var HR = {                $: function(i) {                    return document.getElementById(i)                },                $$: function(c

原生js實現淘寶輪播圖，支援左右和跳轉（滑鼠點多快都不會亂）。

用transform是因為這個比left的效能好。 這個是演示網址（不要直接存下來哦）：https://shalltears.github.io/test-sowing-map/ 。 這個是完整程式碼下載地址，覺得還行的下載支援一下：https://download.csdn.ne

JS原生程式碼實現輪播圖（無左右滑動，底下圓點按鈕）

先上效果圖： 由於動態圖太大，所以只能截圖了；大致效果，圖片輪播的過程中，底下的灰色提示漸漸出現； 現在來說實現思路：        HTML部分： <div id="content"> <img id="img1" /> &

【原生js】詳解輪播圖之無縫滾動

前言：輪播圖，是網站首頁中最常見的一種圖片切換特效，作為前端開發者，我相信很多開發者都直接呼叫了JQuery中的封裝好的方法實現圖片輪播，省事簡單。所以我今天想介紹一下原生js程式碼實現的圖片輪播。

面向物件的輪播js

　　1.自執行函式的前後要加分號 　　案例： 　　;(function(){})(); 　　2.面向物件的最大優勢節省了許多記憶體 　　正式開寫面向物件的輪播； 　　 　　<!DOCTYPE html>　　<html> 　　<head> 　　　　<meta

Jquery和純JS實現輪播圖（一）--左右切換式

var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的

純js實現無縫輪播圖

很多時候我們都會用到無縫輪播圖，那麼下面我就把無縫輪播獻給大家 1.左右無縫輪播 <!DOCTYPE html > <html> <head> <

js特效-無縫輪播圖，簡單上手

首先，讓大家看效果： 然後給大家介紹一下無縫輪播圖的原理 1.我們在一個ul中會使用很多的li，每一個li中嵌入一個圖片，如果把輪播圖比喻成慢視訊的話，每一張圖片就是一幀(注意:很多新手會認為一些圖