正文
javascript滚播,javascript滚动代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
用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
相关问答
Q1: javascript 制作图片滚动效果
我看了 这个可以的
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
楼主，你可以这样去做，鼠标放在按钮上就滚蛋图片。
按钮的鼠标进入事件，图片滚动。代码大致一样
Q2: 在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');
Q3: 如何用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
