原生js自動輪播圖
輪播圖的用處
輪播圖是現在網站網頁上最常見的效果之一,很多網站上都會用到,淘寶京東等等。有些自動選項卡也是需要用到的,而且它的可重複性高。在這裡分享一下,用js原生程式碼,實現輪播圖的常見效果!
輪播圖的原理
一系列的大小相等的圖片平鋪,利用CSS佈局只顯示一張圖片,其餘隱藏。通過定時器實現自動播放。Html佈局
首先父容器banner存放所有內容,子容器img-list存放圖片。子容器list存放按鈕小圓點。圓點我使用了背景圖片的方式!
<div id="banner"> <ul id="img-list"> <li><img src="images/banner1.png" alt="1"/></li> <li><img src="images/banner2.jpg" alt="2"/></li> <li><img src="images/banner3.png" alt="3"/></li> </ul> <div id="list"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> </div> </div>
css修飾
1、對盒子模型,文件流的理解,絕對定位問題。
2、圖片有固定的的寬高,先在img-list中設定三張圖片總共的寬,多餘的將overflow: hidden;進行隱藏!載將其圖片下的li設定往右浮動。
3、將list span中的寬高固定,給個背景圖片。第一張圖片上設個預設的黃色圓點圖片。
#banner { width:100%; padding:0; clear: both; position: relative; height: 400px; z-index:1; } #img-list { display: block; width:5760px; height: 400px; overflow: hidden; z-index:1; position: relative; } #img-list li{ float: left; width:100%; height: 400px; overflow: hidden; /* position: absolute; top:0; left:0; */ z-index: 2; } #list { width:100%; height:18px; text-align: center; position: absolute; bottom: 10px; z-index: 100; } #list > span { width:18px; height: 18px; overflow: hidden; display: inline-block; margin:0 2px; background: url(../images/yuan.png); cursor: pointer; } #list .on { background: url(../images/huanyu.png); }
JS效果
1、首先我們先設定自動播放的函式
2、然後滑鼠滑過容器時停止播放,滑鼠離開整個容器時繼續播放至下一張。
3、再定義並呼叫自動播放函式
var banner=document.getElementById('banner'); var imglist=document.getElementById('img-list').getElementsByTagName("li"); var list=document.getElementById('list').getElementsByTagName('span'); var index=0; var timer=null; //設定自動播放函式 function autoPlay () { if (++index >= imglist.length) {index = 0}; changeImg(index); } // 滑鼠劃過整個容器時停止自動播放 banner.onmouseover = function () { clearInterval(timer); } // 滑鼠離開整個容器時繼續播放至下一張 banner.onmouseout=function(){ timer=setInterval(autoPlay,2000); } / 定義並呼叫自動播放函式 timer = setInterval(autoPlay, 2000);
接著定義圖片的切換函式
// 定義圖片切換函式
function changeImg (curIndex) {
for (var i = 0; i < imglist.length; i++) {
imglist[i].style.display = "none";
list[i].className = "";
}
imglist[curIndex].style.display = "block";
list[curIndex].className = "on";
}
最後遍歷所有數字導航實現劃過切換至對應的圖片,需獲得它的索引值
for (var i = 0; i < list.length; i++) {
list[i].index=i;
list[i].onmouseover = function () {
clearInterval(timer);
changeImg(this.index);
};
到此為止,我們的輪播所有程式碼完成!
還不算完美,繼續努力!
相關推薦
原生js自動輪播圖
輪播圖的用處輪播圖是現在網站網頁上最常見的效果之一,很多網站上都會用到,淘寶京東等等。有些自動選項卡也是需要用到的,而且它的可重複性高。在這裡分享一下,用js原生程式碼,實現輪播圖的常見效果!輪播圖的原理一系列的大小相等的圖片平鋪,利用CSS佈局只顯示一張圖片,其餘隱藏。通過
原生js手動輪播圖
手動輪播圖,為輪播圖中的一種,輪播圖主要有無縫輪播,手動輪播,延遲輪播,切換輪播等等。。。 輪播圖主要用於展現圖片,新出商品,詞條,又能美觀網頁。給網頁中增加動態效果。 手動輪播,是小編認為最簡單的一種輪播方式,既能左右翻頁,還能通過懸浮按鈕,
js點選輪播或者自動輪播圖程式碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk"> <tit
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
swift開發之 -- 自動輪播圖(UIScrollView+UIPageControl+Timer)
mode nal uipage logs swift es2017 ida lin true 比較簡單,原理就不說了,這裏只做記錄: 代碼如下: 1,準備 var pageControl:UIPageControl? var myscrollView:UIScro
ios開發之 -- 自動輪播圖創建
ide targe info self spl enabled static repeat display 這裏是oc版本的,簡單記錄下: 具體代碼如下: 1,準備 #define FRAME [[UIScreen mainScreen] bounds] #define
用原生js封裝輪播圖
round this getc 行間樣式 gets -m ++ fun ted 原生js封裝輪播圖 對於初學js的同學來說,輪播圖還是一個難點,尤其是原生js封裝輪播圖代碼,下面是我之前做的一個輪播圖項目中封裝好的一些代碼,有需要的同學可以看一下,有什麽不懂的可以看註釋,
自動輪播圖
clas ngs hide asc type lis cti font 使用 自動輪播圖已經完成,為方便大家閱覽源碼如下為方便大家使用,有什麽不懂大家可以給我留言 <style type="text/css"> * { margin: 0; p
用Vue來實現音樂播放器(八):自動輪播圖啊
-s AR better hold ons ntp next start upd slider.vue組件的模板部分 <template> <div class="slider" ref="slider"> <div class=
[JavaScript]使用CSS + jQuery 實現自動輪播圖
current 同一行 arm 寬度 ngs 當前 命令行 dcl 特性 代碼鏈接:我的GitHub 項目預覽:預覽 目的:通過CSS + jQuery的方式實現自動輪播。 1.用CSS3來實現輪播 思路:通過給每一個按鈕添加點擊事件,點擊之後改變圖片的位置,從而實現輪播。
原生js實現輪播圖原理分析
一、輪播圖需求 輪播圖需要實現左右翻頁的無縫連線 需要點選左右切換 需要實現跳轉 顯示當前位置的小圓點 二、輪播圖的原理 1.圖片移動實現原理: 利用浮動將所有所有照片依次排成一行,給這一長串圖片新增一個父級的遮罩,每次只顯示一張圖,其餘的都隱
授人以漁式解析原生JS寫輪播圖
需求與分析 需求:迴圈無縫自動輪播五張圖,按左右箭頭可以手動切換圖片,滑鼠點選輪播圖下面按鈕 1 2 3 4 5會跳轉到對應的第1 2 3 4 5張圖片。滑鼠放到輪播圖的圖片上時不再自動輪播並且左右箭頭顯示出來,滑鼠移開時左右箭頭隱藏掉並且自動輪播。 效果圖: 分析: 佈局:準備七張圖片
自動輪播圖+自定義小圓點
//佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/
原生js實現輪播圖原理
輪播圖的原理1.圖片移動實現原理:利用浮動將所有所有照片依次排成一行,給這一長串圖片新增一個父級的遮罩,每次只顯示一張圖,其餘的都隱藏起來。對圖片新增絕對定位,通過控制left屬性,實現照片的移動。 2.圖片移動動畫原理:從a位置移動到b位置,需要先計算兩點之間的差值,通過差值和時間間隔,計算出每次移動的步
簡單的jquer自動輪播圖
這篇文章剛好對初級jquery來說,程式碼量少,易懂。程式碼直接複製貼上就能用,特別簡單 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
使用原生js實現輪播圖效果
這幾天在逛網站的時候,發現很多網站都有輪播圖這個效果,所以我就仿照小米的官網用原生js寫了一個輪播圖效果,希望大家喜歡。 這是我釋出在github上的最後實現的效果:https://heternally.github.io/banner/ 下面我簡單跟大家說一下
用原生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地址,好了,下