原生js層疊圖片輪播展示代碼,js圖片輪播效果實現代碼

本文目錄一覽：

• 1、js原生代碼實現輪播圖
• 2、怎麼用js的原生寫法寫出來一個輪播圖呢？
• 3、JS如何實現左右滾動輪播代碼詳細點
• 4、Js圖片輪播思路
• 5、用原生JS寫的輪播效果，怎麼讓它有滑動的效果，不是直接切換

js原生代碼實現輪播圖

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

title最簡單的輪播廣告/title

style

body, div, ul, li {

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

}

body {

background: #000;

text-align: center;

font: 12px/20px Arial;

}

#box {

position: relative;

width: 492px;

height: 172px;

background: #fff;

border-radius: 5px;

border: 8px solid #fff;

margin: 10px auto;

}

#box .list {

position: relative;

width: 490px;

height: 170px;

overflow: hidden;

border: 1px solid #ccc;

}

#box .list li {

position: absolute;

top: 0;

left: 0;

width: 490px;

height: 170px;

opacity: 0;

transition: opacity 0.5s linear

}

#box .list li.current {

opacity: 1;

}

#box .count {

position: absolute;

right: 0;

bottom: 5px;

}

#box .count li {

color: #fff;

float: left;

width: 20px;

height: 20px;

cursor: pointer;

margin-right: 5px;

overflow: hidden;

background: #F90;

opacity: 0.7;

border-radius: 20px;

}

#box .count li.current {

color: #fff;

opacity: 0.7;

font-weight: 700;

background: #f60

}

/style

/head

body

div id=”box”

ul class=”list”

li class=”current” style=”opacity: 1;”img src=”img/images04/01.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/02.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/03.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/04.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/05.jpg” width=”490″ height=”170″/li

/ul

ul class=”count”

li class=”current”1/li

li class=””2/li

li class=””3/li

li class=””4/li

li class=””5/li

/ul

/div

script

var box=document.getElementById(‘box’);

var uls=document.getElementsByTagName(‘ul’);

var imgs=uls[0].getElementsByTagName(‘li’);

var btn=uls[1].getElementsByTagName(‘li’);

var i=index=0; //中間量，統一聲明；

var play=null;

console.log(box,uls,imgs,btn);//獲取正確

//圖片切換, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不糾結、簡單 在css裡面

function show(a){ //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應

for(i=0;ibtn.length;i++ ){

btn[i].className=”; //很容易看懂吧？每個按鈕都先設置成看不見，然後把當前按鈕設置成可見。

btn[a].className=’current’;

}

for(i=0;iimgs.length;i++){ //把圖片的效果設置和按鈕相同

imgs[i].style.opacity=0;

imgs[a].style.opacity=1;

}

}

//切換按鈕功能，響應對應圖片

for(i=0;ibtn.length;i++){

btn[i].index=i; //不知道你有沒有發現，循環里的方法去調用循環里的變量體i，會出現調到的不是i的變動值的問題。所以我先在循環外保存住

btn[i].onmouseover=function(){

show(this.index);

clearInterval(play); //這就是最後那句話追加的功能

}

}

//自動輪播方法

function autoPlay(){

play=setInterval(function(){ //這個paly是為了保存定時器的，變量必須在全局聲明 不然其他方法調不到 或者你可以調用auto.play 也許可以但是沒時間試了

index++;

index=imgs.length(index=0);//可能有優先級問題，所以用了括號，沒時間測試了。

show(index);

},1000)

}

autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之後影響到了其他方法，使用autoPlay所以只能這樣調用了

//div的鼠標移入移出事件

box.onmouseover=function(){

clearInterval(play);

};

box.onmouseout=function(){

autoPlay();

};

//按鈕下標也要加上相同的鼠標事件，不然圖片停止了，定時器沒停，會突然閃到很大的數字上。 貌似我可以直接追加到之前定義事件中。

/script

/body

/html

怎麼用js的原生寫法寫出來一個輪播圖呢？

1：排出一個版，包含上下切換的標識和圖片導航，所有圖片隱藏，給圖片第一張加一個class名，樣式設為顯示，圖片導航的第一個加一個class名，加上背景色；

2：獲取節點；

3：給向下切換寫一個點擊事件，點擊圖片切換到下一張，注意當圖片切換到最後一張的時候會報錯，所以必須要判斷一下，當圖片切換到最後一張的時候在，再次擊會切換到第一張；

4：給向上切換寫一個點擊事件，注意當圖片切換到第一張之後會報錯，所以必須要判斷一下，當圖片切換到第一的時候，再次點擊會切換到最後張，循環起來；

5：寫一個定時器，定時器的播放順序和向下切換一致，可以封裝一個函數方便調用；

6：寫鼠標劃入事件，清除定時器；

7：寫鼠標移出事件，定時器繼續運行；

8：圖片導航的點擊事件

點擊事件click

定時器setlnterval（）

if判斷

for（）循環

JS如何實現左右滾動輪播代碼詳細點

var datas = [

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”}

];

var banner = document.getElementById(“banner”);

var list = document.getElementById(“list”);

for(var i = 0,len = datas.length;ilen;i++){

var div = document.createElement(“div”);

var li = document.createElement(“li”);

if(i==0){ //默認第一項輪播項顯示 對應的控制按鈕被選中

div.className = “item active”;

li.className = “active”;

}else{ //其他項隱藏 其他的控制按鈕樣式不改變

div.className = “item”;

li.className = “”;

}

div.innerHTML = ‘a href=”‘ + datas[i].targetSrc + ‘”‘ +

‘img src=”‘ + datas[i].imgSrc + ‘” /’ +

‘/a’;

li.innerHTML = i + 1;

banner.appendChild(div);

list.appendChild(li);

}

var lunBo = document.getElementById(“lunBo”);

var items = document.querySelectorAll(“#lunBo #banner .item”);

var lis = document.querySelectorAll(“#lunBo #list li”);

var currentIndex = 0;//(控制按鈕和輪播項共同的索引)

for(var i = 0,len = lis.length;ilen;i++){

lis[i].index = i;

lis[i].onmouseenter = function(){

currentIndex = this.index;

for(var j = 0;jlen;j++){

lis[j].className = “”;

items[j].className = “item”;

}

this.className = “active”;

items[this.index].className = “item active”;

}

}

var termId; //全局變量

function autoPlay(){

termId = setInterval(function(){

currentIndex++;

if(currentIndex==lis.length){

currentIndex = 0;

}

lis[currentIndex].onmouseenter();

},3000);

}

autoPlay();//打開頁面自動輪播

//鼠標進入停止輪播

lunBo.onmouseenter = function(){

clearInterval(termId);

}

//鼠標離開繼續輪播

lunBo.onmouseleave = function(){

autoPlay();

}

我這還有其他的，先採納一下加我，我給你發

Js圖片輪播思路

a href=””js圖片輪播效果代碼/a

首先我們需要引入一張圖片，通過更改img標籤中src的值，達到圖片切換功能。

html代碼：img src=”” width=”331″ height=”220″ id=”carousel”

在這我們需要理理自己的思路，一、圖片從何而來 二、怎麼樣使圖片輪播，能夠動起來

自定義一個數組，將需要的圖片存在中間，代碼如下：

var arr=new Array();

arr[0]=’1.jpg’;

arr[1]=’2.jpg’;

arr[2]=’3.jpg’;

arr[3]=’4.jpg’;

接着我們需要能夠對圖片進行操作定義一個函數，

function tImg(){var obj=document.getElementById(‘carousel’);obj.src=”+arr[carIndex];}

準備好以後我們只需要獲取數組的下標即可

定義初始化下標：var carIndex=0;

在函數中如果carIndex變量等於數組的字符串長度-1的情況下，賦給carIndex=0的初始數值。不是的情況下carIndex就+或者=1，代碼如下：

function tImg(){

var obj=document.getElementById(‘carousel’);

if(carIndex==arr.length-1){

carIndex=0;}

else{

carIndex+=1;}

obj.src=”+arr[carIndex];obj.onmouseover=function(){

}

邏輯關係理清楚後我們下一步就是使他們動起來，我們需要引入setInterval來控制函數的時間，代碼如下：

var time=setInterval(tImg,3000);函數3秒執行一次

做到這裡我們已經能過使圖片進行切換了。

用原生JS寫的輪播效果，怎麼讓它有滑動的效果，不是直接切換

如果是朝左翻頁，就把當前頁朝左偏移100%的寬度，讓下一頁同樣朝左偏移100%寬度。以下是代碼部分：

html head lang=”en” meta charset=”UTF-8″ title/title style .banner{ width:300px; height:250px; position: relative; z-index: 100; background: skyblue; margin:100px auto; overflow:hidden ; } .banner .first{ left:0; } .banner a{ width: 100%; height: 100%; position: absolute; display:block; top:0; left:100%; } .banner a img{ width: 100%; height: 100%; } .banner .pre{ position: absolute; left:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .banner .next{ position: absolute; right:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .