常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net
多张图片滚动代码大全图片滚动代码(从右向左滚动)<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>图片滚动代码(从下往上滚动)<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>改版：<marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle> <img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>说明：1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。
图片滚动特效代码图片滚动特效代码注意: 各参数详解：（1）scrollAmount。
它表示速度，值越大速度越快。
如果没有它，默认为6，建议设为1～3比较好。
（2）width和height，表示滚动区域的大小，width是宽度，height是高度。
特别是在做垂直滚动的时候，一定要设height 的值。
（3）direction。
表示滚动的方向，默认为从右向左：←←←。
可选的值有right、down、up。
滚动方向分别为：right表示→→→，up表示↑，down表示↓。
（4）scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。
通常scrollDelay是不需要设置的。
（5）behavior。
用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)（6）蓝色地方是图片地址，可以换上自己喜欢的图片。
1.图片向上循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=up><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：2.图片向下循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=down><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：3.图片向左循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275> <A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：4.图片向右循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=right><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：5.图片来回滚动代码：<CENTER><MARQUEE width=380 scrollAmount=3 height=275 behavior="alternate"><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：以上五种图片滚动效果代码说明：1.“width=380”表示滚动的宽度范围，数值可以按自己喜欢的调整2.“height=275”表示滚动的高度范围，数值可以随意调整3.“scrollAmount=3”表示滚度速度为3，1到3为最佳数值，默认为64.“height=275”表示图片的高度为275（建议按自己喜欢的图片高度调整）5.“width=220”表示图片的宽度为220（建议按自己喜欢的图片宽度调整）6.“图片地址”表示图片的属性地址粘贴处（因本人太懒，所以所有的滚动图片都只用一张代替；(*^__^*)，当然，每个“图片地址”都可以换上不同的图片地址，效果会更好。
js原⽣代码实现轮播图案例⼀、轮播图是现在⽹站⽹页上最常见的效果之⼀，对于轮播图的功能，要求不同，效果也不同！我们见过很多通过不同的⽅式，实现这⼀效果，但是有很多⽐较⿇烦，⽽且不容易理解，兼容性也不好。
在这⾥分享⼀下，⽤js原⽣代码，实现轮播图的常见效果！思路⽐较清晰，⽽且可重复性⾼，也⼏乎包含了现在⽹页上轮播实现的所有效果！现在我们来看看它是什么样的效果，截⼀张图给⼤家看：⼆、⽆论我们做什么特效，都要记住⼀个原则，先写静态的代码，再做动态的处理！我们的轮播静态效果⽤html和css来实现：1、为了代码的规范性，我们采⽤css和js外联的⽅式，如下：2、body的部分也需要我们规范的命名：好了，到这⾥我们们的html部分就结束了！现在框架已经搭建好，下⼀步是css样式设置了：3、css样式的设置，灵活性⽐较⼤，因为这要根据我们的页⾯来做具体设置和规定，下⾯的效果仅供参考！我们直接上代码：/*内外边距的设置*/* {margin:0;padding:0;}/*图⽚在box中的位置*/img {vertical-align: top;}/*盒⼦box的整体样式*/.css_box {width: 500px;margin:100px auto;position: relative;overflow: hidden;border: 1px solid green;}/*滚动盒⼦样式*/.slider {width: 500px;height: 200px;border: 1px solid red;}/*滚动盒⼦主要部分的样式*/.slider-main {border: 1px solid yellow;width: 500px;height: 200px;}/*滚动盒⼦主要部分的图⽚样式*/.slider-main-img {position: absolute;top: 0;left: 0;width: 500px;height: 200px;}.slider-main-img img {width: 100%;}/*两侧滚动控制的样式*/.slider_ctrl {text-align: center;padding-top: 25px;}/*这样的类名，在html中找不到，但是⼜起到了作⽤，所以只有可能是是在js中创建了这样的类名！*//*控制点选轮播图的样式*/.slider-ctrl-con {width: 24px;height: 20px;display:inline-block;background:url(../images/icon.png) no-repeat -24px -782px;margin: 0 5px;cursor: pointer;text-indent: -20em;overflow: hidden;}.current {background-position: -24px -762px;}/*滑动控制的两个span样式*/.slider-ctrl-prev,.slider-ctrl-next {position: absolute;top: 50%;margin-top: -35px;background:url(../images/icon.png) no-repeat 6px top;width: 30px;height: 35px;opacity: 0.8;cursor: pointer;}.slider-ctrl-prev {left: 0;}.slider-ctrl-next {right: 0;background-position: -6px -44px;}/*css样式到此暂时结束*/好了，到此我们的静态的效果已经搭建好，要想实现我们需要的功能js是我们的核⼼，下⾯我们就⽤原⽣的代码来实现它：关键技术⼀：我们的轮播图要动起来，利⽤定时器现在⾃动滚动的效果，图⽚的转换牵涉到了层叠，最后我们再考虑到浏览器的兼容问题！做到这些，是我们js的第⼀步。
js实现轮播图的完整代码今天写⼀个完整的轮播图，⾸先它需要实现三个功能：1.⿏标放在⼩圆点上实现轮播2.点击焦点按钮实现轮播3.⽆缝⾃动轮播轮播图的原理：⼀系列的⼤⼩相等的图⽚平铺，利⽤CSS布局只显⽰⼀张图⽚，其余隐藏。
通过计算偏移量（封装⼀个动画函数）⾃动播放，或通过⼿动点击事件切换图⽚。
html布局：<div id="box" class="all"><div class="inner"> <!-- 相框--><ul><li><a href="#"><img src="images/18.jpg" width="550" height="320" alt=""></a></li><li><a href="#"><img src="images/19.jpg" width="550" height="320" alt=""></a></li><li><a href="#"><img src="images/14.jpg" width="550" height="320" alt=""></a></li><li><a href="#"><img src="images/17.jpg" width="550" height="320" alt=""></a></li></ul><ol> <!--⾥⾯存放⼩圆点--></ol></div><div class="focusD" id="arr"><span id="left"><</span><span id="right">></span></div></div>css样式：* {margin: 0;padding: 0;}/*<--清除底部三像素距离-->*/img {vertical-align: top;}.all {width: 550px;height: 320px;margin: 100px auto;padding: 5px;border: 1px solid #ccc;position: relative;}.inner {position: relative;width: 550px;height: 320px;background-color: pink;overflow: hidden;}.inner ul {width: 1000%;list-style: none;position: absolute;top: 0;left: 0;}.inner ul li {float: left;}.focusD {position: absolute;left: 0;top: 50%;width: 550px;padding: 0 10px;height: 30px;box-sizing: border-box;display: none;}.inner ol {position: absolute;right: 30px;bottom: 10px;}.inner ol li {width: 15px;display: inline-block;height: 15px;margin: 0 3px;cursor: pointer;line-height: 15px;text-align: center;background-color: #fff;}/*当前的⾼亮的⼩圆点*/.inner ol .current {background-color: orange;color: #fff;}.focusD span {display: inline-block;width: 25px;font-size: 24px;height: 30px;color: #ccc;line-height: 30px;text-align: center;background: rgba(255, 255, 255, 0.3); cursor: pointer;}#left {float: left;}#right {float: right;}显⽰效果：js部分：接下来我们要写js 代码，⾸先我们先获取我们需要的所有元素。
