Ⅰ js如何製作圖片輪播
工具/材料
Sublime Text
- 01
首先在Sublime Text下面准備一個html和5張圖片，圖片寬高為600px和400px，如下圖所示
- 02
然後在HTML頁面中布局輪播圖的結構，如下圖所示，主要包括圖片區域，圓形按鈕，左右箭頭
- 03
接下來需要給輪播圖頁面布局聲明一些樣式，請按照下圖所示的樣式代碼進行聲明
- 04
最後就是實現輪播圖的JS腳本功能，如下圖所示，主要包括前進，後退，自動播放的功能
- 05
最後運行頁面，你就會看到下圖所示的輪播圖效果，點擊圓圈或者左右箭頭可以切換輪播圖
Ⅱ 怎麼用js的原生寫法寫出來一個輪播圖呢
1：排出一個版，包含上下切換的標識和圖片導航，所有圖片隱藏，給圖片第一張加一個class名，樣式設為顯示，圖片導航的第一個加一個class名，加上背景色；
2：獲取節點；
3：給向下切換寫一個點擊事件，點擊圖片切換到下一張，注意當圖片切換到最後一張的時候會報錯，所以必須要判斷一下，當圖片切換到最後一張的時候在，再次擊會切換到第一張；
4：給向上切換寫一個點擊事件，注意當圖片切換到第一張之後會報錯，所以必須要判斷一下，當圖片切換到第一的時候，再次點擊會切換到最後張，循環起來；
5：寫一個定時器，定時器的播放順序和向下切換一致，可以封裝一個函數方便調用；
6：寫滑鼠劃入事件，清除定時器；
7：寫滑鼠移出事件，定時器繼續運行；
8：圖片導航的點擊事件
點擊事件click
定時器setlnterval（）
if判斷
for（）循環
Ⅲ js圖片輪播點擊
實現輪播圖思路
布局：
1. 使用 flex 布局使子元素水平排列；
2. 子元素寬度設置100%，flex-shrink 設置為 0（這個屬性保證子元素不被壓縮）;
定時器無縫輪播：
輪播之前需要將首尾各添加一張圖片。其目的就是實現無縫輪播。
然後將父元素 left 向左移動一個屏幕寬度的距離。這樣才能讓第二張（因為首尾各添加了一張圖片，所以原先的第一張就變成了第二張）變成可視范圍的第一張。
輪播到最後一張圖片（這里的最後一張指的是拼接的第一張）時；
①清除掉定時器；
②開啟臨界處理（重置父元素的left）；
③開啟下一輪輪播。
這里是實現無縫輪播的關鍵；其目的是播放最後一張的同時，與第一張偷梁換柱。因為最後一張與第一張圖片相同，所以快速地改變其 left 用戶並無感知。並且同時開啟下一輪定時器，1.5s 之後執行第二張圖片播放。而這個 1.5s 之內就好了准備（清除當前定時器，重置父元素 left）。
右邊按鈕點擊無縫輪播：
邏輯同定時器無縫輪播類似，因為方向都是從右向左播放。無縫輪播的核心都是播放到最後一張時偷梁換柱（播放最後一張圖片的1.5s 同時，改變父元素 left 成初始值，負數的屏幕寬度）。
左邊按鈕點擊無縫輪播：
左邊按鈕無縫輪播的核心與以上差不多，唯一的區別就是當播放到第一張圖片時，開始偷梁換柱（播放第一張圖片的1.5s 同時，改變父元素 left 成最大值，負數的（屏幕寬度*（子元素個數-2）））。
指示燈點擊無縫輪播：
點擊第一張圖片時，同左邊按鈕點擊無縫輪播。點擊最後一張圖片時，同右邊按鈕點擊無縫輪播。
Ⅳ 求大神指點一下用js做一個輪播，比如有五張圖，三秒換下一張，到最後
只告訴你原理咯，代碼的話到處都有，直接down一個就行
1、滑動一張就讀取當前索引
2、滑動的距離根據當前的索引*滑動的距離
3、將第一張插入到容器的最後面，這樣的話切換到第一張就不會看出來不銜接了
4、滑動到最後一張的時候繼續往後面滑動，滑動玩之後將索引變成第二張圖的索引
Ⅳ jquery輪播圖最後一張圖片如何無縫輪播到第一張圖片（輪播順序應和前面一樣，即從左往右）,代碼如下：
$(document).ready(function(){
vartimer=null;
varpic=$(".pic");
varoUl=pic.children("ul");
varaImg=pic.find("img");
varimgWidth=parseFloat(pic.css("width"))||pic.prop("offsetWidth");
oUl.css("width",imgWidth*aImg.length+'px');
vari=0;
timer=setInterval(function(){
oUl.animate({
"left":"-"+imgWidth+'px'
},500,function(){
oUl.children("li:first").insertAfter(oUl.children("li:last"));
oUl.css("left",0);
});
},1000);
});Ⅵ js實現左右切換輪播圖思路
我們在 CSS 階段就已經接觸到輪播圖。通過輪播圖我們可以達到一些好玩的特效，但使用 CSS 做出來的輪播圖只有左右切換，漸變切換和簡單的點擊切換。局限性較大，觀看效果也不佳。但當我們接觸 js 之後，你就發現使用js來實現輪播圖後，在看CSS實現輪播的效果就是...。我想說啥你知道的。廢話不多說，咱們一起看看如何使用js來實現輪播效果。
（本文以陰陽師中「平安世界」模塊的輪播圖為例）
這個輪播圖，我們通過兩大模塊構成；左右點擊模塊和姓名點擊模塊。然後在兩者相關聯來達到最終的效果。
在使用js實現輪播圖的效果前，先使用HTML和CSS完善這一模塊的布局。
本輪播圖使用8張圖片。每次出現兩張。我們在使用HTML和CSS布局時可以先把第一組的兩張圖片放好位置。其他的放在兩邊隱藏起來。需要使用的時候在出現移動到中間。
左右點擊切換模塊：
我們通過對左右按鈕進行點擊監聽。在點擊後做出反應。左右點擊的思路一樣。我們先說一下右邊按鈕點擊事件。
當我們點擊右邊按鈕後，我們通過對點擊次數進行累計。此處我使用初始化常量然後累加最後通過判斷來達到循環效果
對每一張圖片進行編碼，以此來達到循環切換圖片的效果。在切換圖片時，我們可以使用排他思想。當點擊按鈕切換下一張圖片的時候，我們可以先遍歷所有的圖片，把所有的圖片移動到兩邊，然後將要移動的圖片移動到中央來達到切換效果
在移動的過程中的動畫和定時器設置的延遲可以自己添加一下。
左邊按鈕的原理和右邊一樣反操作即可。注意常量要使用一個。否則兩個按鈕都只能單方向運動，可能還會出現其他問題。
本次現講一下左右切換的思路。
Ⅶ 如何通過jS修改圖片路徑來定時更換圖片{輪播特效}
用js來修改圖片路徑實現輪播是不太可取的一種辦法，通常的做法是：
把需要輪播的圖片全部羅列出來，用js控制輪流顯示第幾張圖片，
EX：
html代碼：
<div id="lunbo">
<div id="img1" class="img"><img src="**"></div>
<div id="img2" class="img"><img src="**"></div>
<div id="img3" class="img"><img src="**"></div>
</div>
css代碼：
#lunbo{width:100%;height:300px;position:relative;zoom:1;overflow:hidden}
#lunbo div{width:100%;height:100%;position:absolute;left:0;top:0;display:none}
#lunbo div:first-child{display:block}
img{width:100%;height:100%;border:0;display:block}
js代碼：
<script type="text/javascript">
var t=0;
setInterval(function(){
t++;
if(t>2)t=0;
document.querySelector(".img").style.display="none";
document.querySelector("#img"+t.toString()).style.display="block";
},5000);
</script>
Ⅷ 怎樣通過JS把右邊展示的圖片列表在右側大圖處依次輪播具體情況如下圖，謝謝大神指導
哦哦，親這個是jquery的功能，一般叫做輪播圖或幻燈片，你可以網路jquery輪播圖或幻燈片，找到很多提供jquery調用的網站，使用上特別簡單，使用調用js文件，然後寫入調用代碼，只要遵循調用規范即可。你的html代碼已經寫好，就剩下調用的事情了。
Ⅸ js實現效果：循環輪播圖
跟普通的左右切換輪播圖類似，但是它看起來是首尾相連的。
首先來講一下我的思路：
我們要想無縫切換圖片，必須要在所有圖片的最後添加一張第一張圖片，因為要實現從最後一張切換到第一張時有過渡效果；
之後我們要讓你處在第一張時，向前向後切換都要進行 隱式切換 。
我們也可以將所有的輪播圖的圖片外面套一層div，並設置絕對定位，然後使用 父相子絕 ，來讓圖片可以相對父元素定位（父元素就是裝輪播圖的盒子）
之後，只要我們讓不該顯示的圖片定位到盒子范圍外的位置（父元素設置overflow:hidden;），在需要切換圖片時，我們就把當前圖片前後的圖片定位到對應位置，然後通過setInterval方法循環改變其位置實現輪播效果。之後更改當前圖片的索引即可。