javascript滚播,javascript滚动代码

用javascript实现图片从下到上轮播

div

创新互联是一家集网站建设,夏县企业网站建设,夏县品牌网站建设,网站定制,夏县网站建设报价,网络营销,网络优化,夏县网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

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 制作图片滚动效果

我看了这个可以的

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

img src="1.jpg"

/marquee

楼主，你可以这样去做，鼠标放在按钮上就滚蛋图片。

按钮的鼠标进入事件，图片滚动。代码大致一样

在javascript中图片的轮番播放怎么做

这是3张图片切换的，把imag[i] (图片名)，ink[i](链接名)，text[i] (图片文字)改成自己图片的对应属性就可以了，要在加图片就把三个数字的下标在加一个var pic_width=225;//宽

var pic_height=173;//高

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

var stop_time=4000; //图片停留时间(1000为1秒钟)

var show_text=0; //是否显示文字标签 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实现轮播图

function getStyle(obj,name){

2 if(obj.currentStyle){

3 return obj.currentStyle[name];

4 } else{

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

6 }

7 }

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"

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 }

15 #wrap {

16 width: 400px;

17 height: 225px;

18 margin: 0 auto;

19 position: relative;

20 overflow: hidden;

21 }

23 li {

24 float: left;

25 }

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 }

38 .active {

39 background: #f60;

40 }

42 img {

43 vertical-align: top;

44 width: 400px;

45 }

47 #content {

48 width: 2400px;

49 position: absolute;

50 left: -1200px;

51 }

53 #content li {

54 float: left;

55 }

57 #tips {

58 position: absolute;

59 right: 20px;

60 bottom: 5px;

61 }

62 /style

63 /head

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

分享文章：javascript滚播,javascript滚动代码
分享路径：http://myzitong.com/article/dsgshdh.html

javascript滚播,javascript滚动代码

用javascript实现图片从下到上轮播

javascript 制作图片滚动效果

在javascript中图片的轮番播放怎么做

如何用javascript实现轮播图

其他资讯