js如何做圖片輪播_怎麼用js做一個簡單的輪播圖

㈠ js中無縫滾動輪播圖有多少種做法

還有就是用原生js模仿jQuery寫一個動畫函數，最簡單版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用動畫實現圖片位置的移動，也是放一個圖片到前面。
第二個就是還是放一張圖到前面，然後把帶圖片的li定位；用一個arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];這樣的數組把值分別賦給li；要滾動的時候把arr的最後一項放到最前面，再依次賦值給li，加上過渡就是輪播了，當然直接跳的那一下把過渡關了才是無縫輪播。

㈡怎麼用js做一個簡單的輪播圖

obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}

㈢求告知JS怎麼做輪播圖啊，我只做出了無縫動畫

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;margin:0;
}
div{
width: 1172px;
height: 447px;
border: 1px solid black;
position: relative;
top:20px;
left: 96px;
overflow: hidden;
}
.ul1{
position: absolute;
width: 1172px;
height: 447px;
}
.ul2{
position: relative;
left: 500px;
top: 410px;
}
.ul2 li{
list-style: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
float: left;
margin-left: 5px;
cursor: pointer;
}
#active{
background: #f0f;
}
.ul1 li{
list-style: none;
float: left;
width: 500px;
height: 450px;
}
.li1{
background: url(img/1.jpg);
}
.li2{
background: url(img/2.jpg);
}
.li3{
background: url(img/3.jpg);
}
.li4{
background: url(img/4.jpg);
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
var oUl1=oDiv.getElementsByClassName('ul1')[0];
var aLi1=oUl1.getElementsByTagName('li');
var oUl2=oDiv.getElementsByClassName('ul2')[0];
var aLi2=oUl2.getElementsByTagName('li');
var timer=null;
var run=-aLi1[0].offsetWidth;
var iNow=-1;
//增加ul寬度
oUl1.style.width=aLi1[0].offsetWidth*aLi1.length+'px';
//雙層for循環選項卡
for (var a = 0; a< aLi1.length; a++) {
aLi2[a].index=a;
aLi2[a].onmouseover=function(){
for (var j = 0; j<aLi2.length; j++) {
aLi2[j].index=j;
aLi2[j].id='';
iNow=this.index;
};
this.id='active';
clearInterval(timer);
oUl1.style.left=this.index*run+'px';
}
aLi2[a].onmouseout=function(){
timer=setInterval(fun,1000);
}
};
//開啟計時器啟動讓圖片跟下邊的li輪播
timer=setInterval(fun,1000);
fun();
function fun(){
if(iNow==aLi1.length-1){
iNow=0;
}else{
iNow++;
}
oUl1.style.left=iNow*run+'px';
for (var i = 0; i < aLi2.length; i++) {
aLi2[i].index=i;
aLi2[i].id='';
};
aLi2[iNow].id='active';
}
}
</script>
</head>
<body>
<div>
<ul class="ul1">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
<li class="li4"></li>
</ul>
<ul class="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
樣式根據自己的需要調一下，你需增加焦點綁定和清除定時器，你自學？

㈣簡單的HTML+js圖片輪播

h5代碼：

css代碼：

(4)js如何做圖片輪播擴展閱讀：

輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。說的簡單點就是將承載著重要信息的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的了解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。

輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸，即為：1024×512。之後將這5張圖片0px水平相接組成一張寬度為：5120px,高度依然為：512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。

㈤ js裡面可以寫輪播圖嗎

當然可以，css3就可以寫輪播，只不過js寫的輪播圖兼容性更好，使用順暢。

js實現輪播圖主要是搞懂原理，還有js知識就OK啦

圖片切換是index值切換
換下一張按鈕實現功能
到最後一張回到第一張
第一張往上翻回到最後一張
寫效果就OK啦

㈥ javascript怎麼做出圖片輪播效果左右滑動的那部分，菜鳥求教

在左右圖標上加入點擊事件，具體你要使用那種效果你可以自己查手冊，例如簡單的情況下可以定義一個div裡面有幾個小的div用來放置圖片，點擊的時候，獲取下一個div show然後將兄弟節點都hide就可以，jquery選擇器裡面可以使用index來算到了哪一個div,也可以為當前div添加屬性pre="前一個圖片id" next="後一個圖片id",點擊時獲取這個ID就可以。

㈦ Js圖片輪播思路

<ahref="http://liping.site">js圖片輪播效果代碼</a>

首先我們需要引入一張圖片，通過更改img標簽中src的值，達到圖片切換功能。
html代碼：<img src="http://liping.site/1.jpg" 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如何做圖片輪播

js如何做圖片輪播

與js如何做圖片輪播相關的資料