javascript做圖片輪播,js圖片輪播效果實現代碼

本文目錄一覽：

• 1、用javascript實現圖片從下到上輪播
• 2、我想用JavaScript做一個圖片輪播
• 3、如何用javascript實現輪播圖
• 4、JS製作輪播圖
• 5、javascript 圖片切換輪播
• 6、求告知JS怎麼做輪播圖啊，我只做出了無縫動畫

用javascript實現圖片從下到上輪播

div

MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=3 scrollDelay=50 direction=up height=”99%” style=”padding: 246px 0pt;”

ul

liimg src=”imgs/goods/goods_1_20131012103829_2.jpg” width=”150″ height=”50″//li

liimg src=”imgs/goods/goods_1_20131012105644_2.jpg” width=”150″ height=”50″//li

liimg src=”imgs/goods/goods_1_20131012111143_2.jpg” width=”150″ height=”50″//li

liimg src=”imgs/goods/goods_1_20131012113433_2.jpg” width=”150″ height=”50″//li

/ul

/MARQUEE

/div

我想用JavaScript做一個圖片輪播

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

html

head

titleUntitled/title

styleimg{display:none;}

.btn{border:1px solid black;width:30px;height:30px;display:inline;margin-right:5px;}

/style

script

var index=1;//當前顯示的圖片索引(1-5)

var timer;

function switchImg(){

// 當前這一張隱藏

document.getElementById(“img”+index).style.display=”none”;

// 如果當前顯示的圖片索引沒有到最大值就繼續增加

if(index5){index++;}

// 否則從第一個圖片開始顯示，索引從0開始

else{index=1;}

// 顯示第index張

document.getElementById(“img”+index).style.display=”block”;

// 下一秒,再執行本方法

timer = window.setTimeout(“switchImg()”,1000);

}

/script

/head

body onload=”switchImg()”

!–放五張圖,構造一個ImageList–

div style=”border:1px solid black;width:300px;height:100px;”

img id=”img1″ src=”back1.jpg”

img id=”img2″ src=”back2.jpg”

img id=”img3″ src=”logo.gif”

img id=”img4″ src=”shop.gif”

img id=”img5″ src=”shop2.gif”

/div

div id=”btn1″ onclick=”manuImg()”/div

div id=”btn2″/div

div id=”btn3″/div

div id=”btn4″/div

div id=”btn5″/div

/body

/html

這樣就可以圖片輪換咯.

如何用javascript實現輪播圖

function getStyle(obj,name){

2 if(obj.currentStyle){

3 return obj.currentStyle[name];

4 } else{

5 return getComputedStyle(obj,false)[name];

6 }

7 }

8

9 function startMove(obj, json, fnEnd) {

10 clearInterval(obj.timer);

11 obj.timer = setInterval(function() {

12 var bStop = true;

13 for (var attr in json) {

14 var cur = 0;

15 if (attr == “opacity”) {

16 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

17 } else {

18 cur = parseInt(getStyle(obj, attr))

19 }

20 var speed = (json[attr] – cur) / 10;

21 speed = speed 0 ? Math.ceil(speed) : Math.floor(speed);

22 if (cur !== json[attr]) {

23 bStop = false;

24 };

25 if (attr == “opacity”) {

26 obj.style.opacity = (speed + cur) / 100;

27 obj.style.filter = ‘alpha(opacity:’ + (speed + cur) + ‘)’;

28 } else {

29 obj.style[attr] = cur + speed + ‘px’;

30 }

31 }

32 if (bStop) {

33 clearInterval(obj.timer);

34 if (fnEnd) fnEnd();

35 }

36 }, 30)

37 }

然後寫輪播小案例

1 !DOCTYPE html

2 html lang=”en”

3

4 head

5 meta charset=”UTF-8″

6 title淘寶輪播/title

7 style

8 ul,

9 li {

10 list-style: none;

11 margin: 0;

12 padding: 0;

13 }

14

15 #wrap {

16 width: 400px;

17 height: 225px;

18 margin: 0 auto;

19 position: relative;

20 overflow: hidden;

21 }

22

23 li {

24 float: left;

25 }

26

27 #tips li {

28 margin: 5px;

29 border: 1px solid #f60;

30 width: 20px;

31 height: 20px;

32 line-height: 20px;

33 text-align: center;

34 color: white;

35 cursor: pointer;

36 }

37

38 .active {

39 background: #f60;

40 }

41

42 img {

43 vertical-align: top;

44 width: 400px;

45 }

46

47 #content {

48 width: 2400px;

49 position: absolute;

50 left: -1200px;

51 }

52

53 #content li {

54 float: left;

55 }

56

57 #tips {

58 position: absolute;

59 right: 20px;

60 bottom: 5px;

61 }

62 /style

63 /head

64

65 body

66 div id=”wrap”

67 ul id=”content”

68 liimg src=”img3/1.jpg” alt=””/li

69 liimg src=”img3/2.jpg” alt=””/li

70 liimg src=”img3/3.jpg” alt=””/li

71 liimg src=”img3/4.jpg” alt=””/li

72 liimg src=”img3/5.jpg” alt=””/li

73 liimg src=”img3/6.jpg” alt=””/li

74 /ul

75 ul id=”tips”

76 li1/li

77 li2/li

78 li3/li

79 li4/li

80 li5/li

81 /ul

82 /div

83 script src=”move.js”/script

84 script

85 var wrap = document.getElementById(‘wrap’);

86 var content = document.getElementById(‘content’);

87 var tips = document.getElementById(‘tips’);

88 var aLi = tips.getElementsByTagName(‘li’);

89 var now = 0;

90 //var

91 for (var i = 0; i aLi.length; i++) {

92 aLi[0].className = ‘active’; //把初始狀態定義好

93 content.style.left = 0 +’px’;

94 aLi[i].index = i; //自定義屬性

95 aLi[i].onclick = function() {

96 now = this.index;

97 play();

98 }

99 }

100

101 function play() {

102 for (var j = 0; j aLi.length; j++) {

103 aLi[j].className = ”;

104 }

105 aLi[now].className = ‘active’;

106

107 //this.index = now; //反過來寫就不對了大兄弟

108 //content.style.left = -400 * this.index + ‘px’;

109 startMove(content, {

110 left: -400 * now, //你還真別說，json格式就是這麼寫的

111 });

112 }

113

114 function autoPlay() {

115 now++;

116 if (now == aLi.length) {

117 now = 0;

118 }

119 play();

120 }

121

122 var timer = setInterval(autoPlay, 2000);

123 wrap.onmouseover = function(){ //這裡如果把事件綁定到ul上的話，那麼滑鼠移入，下面對飲的li會不起作用，

124 clearInterval(timer); //因為li的層級比較高，所以應該把事件綁定到大的div上

125 }

126 wrap.onmouseout = function(){

127 timer = setInterval(autoPlay,2000);

128 //setInterval(autoPlay,2000); 不能這麼寫，凡是開的定時器，必須得賦值，要不然總會多開一個定時器，導致速度加快

129 }

130 /script

131 /body

132

133 /html

JS製作輪播圖

輪播圖是每個網站中必不可少的元素，那麼如何用JS製作輪播圖呢？下面我就給大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中創建HTML文檔，然後在文檔的body區域中加入如下圖所示的輪播圖內容

02

然後我們需要在style標籤中給所添加的輪播圖內容聲明樣式，如下圖所示

03

接下來我們就需要在script標籤中實現輪播圖的動畫腳本內容了，如下圖所示，注意script標籤的type類型一定要是javascript

04

最後我們運行界面程序，你就會看到如下圖所示的輪播圖了，點擊左右的箭頭和中間的圓點都可以進行輪播圖的切換

javascript 圖片切換輪播

模仿愛奇藝首頁圖片輪播：

HTML代碼：

!doctype html

html

head

meta charset=’utf-8’/

title愛奇藝輪播圖/title

link href=”index.css” rel=”stylesheet” type=”text/css” /

script src=”move.js” type=”text/javascript”/script

script type=”text/javascript”

window.onload = function (){

var arr=[‘第1張’,’第2張’,’第3張’,’第4張’,’第5張’,’第6張’,’第7張’,’第8張’,’第9張’,’第10張’];

var domWidth = document.documentElement.clientWidth;

var aScrollLi = $(‘scroll_ul’).getElementsByTagName(‘li’);

var aThumbLi = $(‘thumb_ul’).getElementsByTagName(‘li’);

var timer = null;

var iNow=0;

for(var m=0; maScrollLi.length; m++){

aScrollLi[m].style.backgroundPosition = -parseInt((1500-$(‘outline’).offsetWidth)/2)+’px,0px’;

}

window.onresize =function (){

for(var m=0; maScrollLi.length; m++){

aScrollLi[m].style.backgroundPosition = -parseInt((1500-$(‘outline’).offsetWidth)/2)+’px,0px’;

}

}

for(var i=0; iaThumbLi.length; i++){

aThumbLi[i].index = i;

aThumbLi[i].onclick=function (){

iNow = this.index;

scroll(this);

};

}

timer = setInterval(function(){

if(iNow == aScrollLi.length-1){

iNow=0;

}else{

iNow++;

}

scroll(aThumbLi[iNow]);

},1000);

$(‘outline’).onmouseover = function(){

clearInterval(timer);

}

$(‘outline’).onmouseout = function(){

timer = setInterval(function(){

if(iNow == aScrollLi.length-1){

iNow=0;

}else{

iNow++;

}

scroll(aThumbLi[iNow]);

},1000);

}

function scroll(obj){

for(var j=0; jaThumbLi.length; j++){

aThumbLi[j].className = ”;

aScrollLi[j].style.display = ‘none’;

}

obj.className = ‘active’;

aScrollLi[iNow].style.display = ‘block’;

aScrollLi[iNow].style.opacity = 0;

aScrollLi[iNow].style.filter = “alpha(opacity:0)”;

move(aScrollLi[iNow],{opacity:100},8);

$(‘info’).innerHTML = arr[iNow];

$(‘info’).style.bottom = ‘-20px’;

move($(‘info’),{bottom:20},8);

}

}

/script

/head

body

div id=”outline”

div id=”scroll”

ul id=”scroll_ul”

li style=”background-image:url(img/1.jpg);”a href=”#”/a/li

li style=”background-image:url(img/2.jpg);”a href=”#”/a/li

li style=”background-image:url(img/3.jpg);”a href=”#”/a/li

li style=”background-image:url(img/4.jpg);”a href=”#”/a/li

li style=”background-image:url(img/5.jpg);”a href=”#”/a/li

li style=”background-image:url(img/6.jpg);”a href=”#”/a/li

li style=”background-image:url(img/7.jpg);”a href=”#”/a/li

li style=”background-image:url(img/8.jpg);”a href=”#”/a/li

li style=”background-image:url(img/9.jpg);”a href=”#”/a/li

li style=”background-image:url(img/10.jpg);”a href=”#”/a/li

/ul

/div

div id=”thumb”

ul id=”thumb_ul”

li class=’active’img src=’img/1_1.jpg’ //li

liimg src=’img/2_2.jpg’ //li

liimg src=’img/3_3.jpg’ //li

liimg src=’img/4_4.jpg’ //li

liimg src=’img/5_5.jpg’ //li

liimg src=’img/6_6.jpg’ //li

liimg src=’img/7_7.jpg’ //li

liimg src=’img/8_8.jpg’ //li

liimg src=’img/9_9.jpg’ //li

liimg src=’img/10_10.jpg’ //li

/ul

/div

div id=”info”第1張/div

/div

/body

/html

CSS代碼：

*{padding:0px; margin:0px;}

html{background:#fff;color:#000;}

ul{list-style:none;}

#outline{width:auto; min-width:1000px; height:410px; background:#000; margin-top:20px; overflow:hidden; position:relative;}

#outline #scroll ul {height:410px;}

#outline #scroll ul li{height:410px;}

#outline #thumb{width:150px; background:url(img/bgphone.png) no-repeat left top; padding:13px; position:absolute; top:10px; right:10px;}

#outline #thumb ul{height:auto; overflow:hidden; background:#000; border-radius:5px;}

#outline #thumb li{float:left; margin-bottom:1px; filter:alpha(opacity:60); opacity:0.6; cursor:pointer;}

#outline #thumb li.active{filter:alpha(opacity:100); opacity:1;}

#outline #thumb li img{display:block;}

#outline #info{position:absolute; left:20px; bottom:20px; color:#fff; font-size:16px; width:100px; height:20px; line-height:20px;}

JS代碼：

function move(obj,json,iSpeed,fn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var oBtn=true;

for(var attr in json){

if(attr == ‘opacity’){

iCur = parseInt(parseFloat(getStyle(obj,attr))*100);

}else{

iCur = parseInt(getStyle(obj,attr));

}

speed = (json[attr]-iCur)/iSpeed;

speed = speed0?Math.ceil(speed):Math.floor(speed);

if(iCur != json[attr]){

oBtn = false;

}

if(attr == ‘opacity’){

obj.style.filter = “alpha(opacity:”+(iCur+speed)+”)”;

obj.style.opacity = (iCur+speed)/100;

}else{

obj.style[attr] = (iCur+speed)+’px’;

}

}

if(oBtn){

clearInterval(obj.timer);

obj.timer=null;

if(fn){

fn();

}

}

},30);

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,null)[attr];

}

}

function $(obj){

return document.getElementById(obj);

}

如果有什麼不懂，可以諮詢：QQ1003837059.請註明來自百度知道

求告知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; jaLi2.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

樣式根據自己的需要調一下，你需增加焦點綁定和清除定時器，你自學？