用javascript實(shí)現(xiàn)圖片從下到上輪播

div

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),夏縣企業(yè)網(wǎng)站建設(shè),夏縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,夏縣網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,夏縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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"http://li

liimg src="imgs/goods/goods_1_20131012105644_2.jpg" width="150" height="50"http://li

liimg src="imgs/goods/goods_1_20131012111143_2.jpg" width="150" height="50"http://li

liimg src="imgs/goods/goods_1_20131012113433_2.jpg" width="150" height="50"http://li

/ul

/MARQUEE

/div

javascript 制作圖片滾動(dòng)效果

我看了 這個(gè)可以的

marquee onmouseover="this.stop();" onmouseout="this.start();"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

img src="1.jpg"

/marquee

樓主，你可以這樣去做，鼠標(biāo)放在按鈕上就滾蛋圖片。

按鈕的鼠標(biāo)進(jìn)入事件，圖片滾動(dòng)。代碼大致一樣

在javascript中圖片的輪番播放怎么做

這是3張圖片切換的，把imag[i] (圖片名)，ink[i](鏈接名)，text[i] (圖片文字)改成自己圖片的對應(yīng)屬性就可以了，要在加圖片就把三個(gè)數(shù)字的下標(biāo)在加一個(gè)var pic_width=225;//寬

var pic_height=173;//高

var button_pos=4; //按扭位置 1左 2右 3上 4下

var stop_time=4000; //圖片停留時(shí)間(1000為1秒鐘)

var show_text=0; //是否顯示文字標(biāo)簽 1顯示 0不顯示

var txtcolor="FF4A8C"; //文字色

var bgcolor="FFFFFF"; //背景色

var imag=new Array();

var link=new Array();

var text=new Array();

var flashdns=""

imag[1]="20100827133323913.jpg";

link[1]="URL";

text[1]="圖片名";

imag[2]="20100902170228177.JPG";

link[2]="URL";

text[2]="圖片名";

imag[3]="20100827133528424.jpg";

link[3]="URL";

text[3]="圖片名";

/script

var pics="", links="", texts="";

for(var i=1; iimag.length; i++){

pics=pics+("|"+imag[i]);

links=links+("|"+link[i]);

texts=texts+("|"+text[i]);

}

pics=pics.substring(1);

links=links.substring(1);

texts=texts.substring(1);var focus_width=225;

var focus_height=153;

var text_height=24;

var swf_height = focus_height+text_height

document.write('object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= width="'+ focus_width +'" height="'+( 173)+'"');

document.write('param name="allowScriptAccess" value="sameDomain"param name="movie" value="js/focus.swf"param name="quality" value="high" param name="bgcolor" value="#F0F0F0"');

document.write('param name="menu" value="false"param name=wmode value="opaque"');

document.write('param name="FlashVars" value="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+focus_width+'borderheight=' +focus_height+'textheight='+text_height+'"');

document.write('embed src="js/focus.swf" wmode="opaque" FlashVars="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+focus_width+'borderheight= '+focus_height+'textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width ="'+ focus_width +'" height="'+ 173 +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" " /'); document.write('/object');

如何用javascript實(shí)現(xiàn)輪播圖

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'; //把初始狀態(tài)定義好

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上的話，那么鼠標(biāo)移入，下面對飲的li會不起作用，

124 clearInterval(timer); //因?yàn)閘i的層級比較高，所以應(yīng)該把事件綁定到大的div上

125 }

126 wrap.onmouseout = function(){

127 timer = setInterval(autoPlay,2000);

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

129 }

130 /script

131 /body

132

133 /html

本文題目：javascript滾播,javascript滾動(dòng)代碼
文章地址：http://chinadenli.net/article19/dsgshdh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、App設(shè)計(jì)、云服務(wù)器、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)