2. 程式人生 > >Jquery和純JS實現輪播圖（一）--左右切換式

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

阿新 • • 發佈：2019-01-10
var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的數量 timer = null; //設定定時定時器的名字，方便後面關閉 dollLis = getElementsByClassName("dollList")[0].getElementsByTagName("li"); //獲取下方圓點 //封裝圖片自動播放函式 function
changeImg(){ timer = setInterval(function(){ if(cur < imgLen -1){ cur ++; }else{ cur = 0; } //呼叫變換處理函式 changeTo(cur); },2500); } changeImg(); //呼叫新增事件處理 addEvent(); //給左右箭頭和右下角的圖片index新增事件處理 function addEvent(){ for
(var i=0;i<imgLen;i++){ //閉包防止作用域內活動物件item的影響 (function(_i){ //滑鼠滑過則清除定時器，並作變換處理 dollLis[_i].onmouseover = function(){ clearTimeout(timer); changeTo(_i); cur = _i; }; //滑鼠滑出則重置定時器處理 dollLis[_i].onmouseout = function(){ changeImg(); }; })(i); } //給左箭頭prev新增上一個事件
var pre = getElementsByClassName("pre")[0]; pre.onmouseover = function(){ //滑入清除定時器 clearIntervcural(timer); }; pre.onclick = function(){ //根據curIndex進行上一個圖片處理 cur = (cur > 0) ? (--cur) : (imgLen - 1); changeTo(cur); }; pre.onmouseout = function(){ //滑出則重置定時器 changeImg(); }; //給右箭頭next新增下一個事件 var next = getElementsByClassName("next")[0]; next.onmouseover = function(){ clearInterval(timercur); }; next.onclick = function(){ cur = (cur < imgLen - 1) ? (++cur) : 0; changeTo(cur); }; next.onmouseout = function(){ changeImg(); }; } //左右切換處理函式 function changeTo(num){ //設定image var imgList = getElementsByClassName("imgList")[0]; goLeft(imgList,num*800); //左移一定距離 //設定image的控制下標 index var _curIndex = getElementsByClassName("sec")[0]; removeClass(_curIndex,"sec"); addClass(dollLis[num],"sec"); } //圖片組相對原始左移dist px距離 function goLeft(elem,dist){ if(dist == 800){ //第一次時設定left為0px 或者直接使用內嵌法 style="left:0;" elem.style.left = "0px"; } var toLeft; //判斷圖片移動方向是否為左 dist = dist + parseInt(elem.style.left); //圖片組相對當前移動距離 if(dist<0){ toLeft = false; dist = Math.abs(dist); }else{ toLeft = true; } for(var i=0;i<= dist/20;i++){ //這裡設定緩慢移動，10階每階80px (function(_i){ var pos = parseInt(elem.style.left); //獲取當前left setTimeout(function(){ pos += (toLeft)? -(_i * 20) : (_i * 20); //根據toLeft值指定圖片組位置改變 //console.log(pos); elem.style.left = pos + "px"; },_i * 25); //每階間隔50毫秒 })(i); } }

相關推薦

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

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

Jquery和純JS實現輪播圖（二）--淡入淡出切換式

之前有寫過一篇輪播圖，是左右切換式的，可以參考 Jquery和純JS實現輪播圖（一）–左右切換式 今天分享一下淡入淡出式的輪播圖，同樣也是用純js和Jquery兩種方法來實現： JQUERY實現

RecyclerView實現廣告輪播圖（一）

　　平時都是用RecyclerView實現列表，RecyclerView的強大毋庸置疑，今天就用它來實現廣告輪播圖。 　　 　　效果如下 　　首先，在activity_main.xml裡定義佈局 　　 <RelativeLayout

輪播圖（一）

left margin font ges opacity onload rgb absolut pin <style>　　*{ margin:0; padding:0; list-style:none; }　　.box{ width:520px; height:

焦點輪播圖（4） 按鈕切換

之前實現了箭頭切換，現在來新增按鈕切換。在點選按鈕時，直接切換到對應的圖片。 下面來為小圓點按鈕新增點選事件： //為小圓點新增點選事件 for(var i =0; i <buttons.

js實現輪播圖

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

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

原生js實現輪播圖原理分析

一、輪播圖需求 輪播圖需要實現左右翻頁的無縫連線 需要點選左右切換 需要實現跳轉 顯示當前位置的小圓點 二、輪播圖的原理 1.圖片移動實現原理： 利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱

原生js實現輪播圖原理

輪播圖的原理1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱藏起來。對圖片新增絕對定位，通過控制left屬性，實現照片的移動。 2.圖片移動動畫原理：從a位置移動到b位置，需要先計算兩點之間的差值，通過差值和時間間隔，計算出每次移動的步

使用原生js實現輪播圖效果

這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。 這是我釋出在github上的最後實現的效果：https://heternally.github.io/banner/ 下面我簡單跟大家說一下

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

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

用原生js實現輪播圖

今天分享一下簡單的輪播圖製作過程，用原生js實現。雖然網上有各種外掛製作的高大上又好用的輪播圖，但還是要清楚它的基本原理。 1.基本原理 將所有圖片並排放到一個div中，然後再放到展示視窗當中，讓裝有所有圖片的div通過改變left值，從而左右移動實現圖片切換。 2.htm

原生JS實現輪播圖1---勻速動畫

                                JS實現輪播圖 專案實現結果圖： 需求：1 根據圖片動態新增小圓點            2 目標移動到小圓點輪播圖片            3 滑鼠離開圖片，定時輪播圖片；滑鼠在圖片上時暫

利用原生js實現輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生輪播圖</title> <style type="text

animate動畫、原生JS實現輪播圖

寫在前面 最近在寫專案的時候，才發現自己對css3這部分的內容已經生疏了，複習css3的時候，看到animate屬性，就用其寫了個焦點輪播圖，當然自己也用原生JS碼了個，當然css3動畫無疑是錦上添花，還是要多總結啊，原始碼我們會在最後附上git地址，好了，下

原生JS實現輪播圖的幾種方式

I 絕對定位+透明度 原理：首先，將所有輪播圖以絕對定位的方式定位父元素的相同位置；接著，實現上下鍵按鈕修改active的下標；最後，將所有圖片透明度重置為0，而被啟用的圖片透明度設定為1； 優點：實現最為簡單，程式碼量小，圖片過渡自然； 缺點：沒有左右滑

原生JS實現輪播圖

要求： 在和上一任務同一目錄下面建立一個task0002_3.html檔案，在js目錄中建立task0002_3.js，並在其中編碼，實現一個輪播圖的功能。 圖片數量及URL均在HTML中寫好 可以配置輪播的順序（正序、逆序）、是否迴圈、間隔時長 圖片切換的

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

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

焦點輪播圖（7）原生JS實現焦點輪播圖--完整程式碼

輪播圖終於更完了，附上完整程式碼： <html> <head> <meta charset="utf-8" /> <title>焦點輪播圖</title> <style type=

js實現輪播圖--淡入淡出的效果。

window.onload = function(){ mv.app.toBanner(); }; var mv = {}; mv.tools = {}; mv.ui = {}; //淡入淡出也算是是一個公用元件 mv.ui.fadein = function(obj)