广播式轮播图片js代码
JS轮播图（无缝连接的轮播图实现，含代码供参考）
JS轮播图（⽆缝连接的轮播图实现，含代码供参考）需求：实现轮播图，图⽚⽆缝切换，⾃动播放。
实现效果：思考⼀下：在图⽚列表后⾯多加⼀张图⽚，这张图⽚是第⼀张图⽚（为了确保⽆缝衔接）。
图⽚就是平铺放在⼀个pic⾥⾯的，每次移动就是改变的pic的left值。
来撸代码~~。
所有的代码放在最后⾯，这⾥只讲⼀些重要的⽅法：为防⽌懵逼：先贴出封装函数move()的代码供参考function move(ele, attr, speed, target, callback){//获取当前的位置//从左往右进⾏移动 --- current<target speed//从右往左进⾏移动 --- current>target -speedvar current = parseInt(getStyle(ele, attr));// 810 > 800if(current>target){speed = -speed;}//定时器累加问题 --- 先清除再开启clearInterval(ele.timer);ele.timer = setInterval(function(){//获取元素的现在位置var begin = parseInt(getStyle(ele, attr));//步长var step = begin + speed;//判断当step>800, 让step = 800//从左往右进⾏移动 --- speed>0 正值//从右往左进⾏移动 --- speed<0 负值// -10 0 10 超过800直接变成 800if(speed<0 && step<target || speed>0 && step>target){step = target;}//赋值元素ele.style[attr] = step + "px";//让元素到达⽬标值时停⽌ 800pxif(step == target){clearInterval(ele.timer);//当move函数执⾏完毕后, 就执⾏它了//当条件都满⾜时才执⾏callback回调函数callback && callback();}},30)//步长是30}第⼀步：我们先来实现那个圆形按钮的点击事件。
Html、js图片轮播代码
Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。
下面是html、js 图片轮播代码详情。
代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分：<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分：<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分：<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。
用JS实现图片轮播效果代码(一)
font-weight: bold;
opacity: .5;
font-size: 40px;
z-index: 3;
}
.carousel-control:hover{
color:fff;
text-decoration: none;
opacity: .9;
outline: none;
imgs[i].style.display = 'block';
lis[i].style.fontSize = '26px';
lis[i].style.color = '#fff';
}
//自动播放的事件处理
function autobofang(){
if(pic_index >= lis.length){
<div class="item "><img src="./img/lunbo1.jpg" alt="第一张图片"></div>
<div class="item"><img src="./img/lunbo2.jpg" alt="第二张图片"></div>
var imgs = lunbo.getElementsByTagName('img');
var uls = lunbo.getElementsByTagName('ul');
js原生代码实现轮播图案例
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实现轮播图的完整代码
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 代码，⾸先我们先获取我们需要的所有元素。
js轮播图代码分享_
js轮播图代码分享_大家喜爱的js轮播图片效果，分享给大家。
一、要点：1.页面加载时，图片重合，叠在一起[肯定定位];2.第一张显示，其它隐蔽;3.设置下标,给下标设置颜色让它随图片移动;4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，连续轮播;二、实现代码：html代码:!DOCTYPE htmlhtml xmlns="l"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/title轮播图/titlelink href="css/LunBimg.css" rel="stylesheet" /script src="js/jquery-1.10.2.min.js"/scriptscript src="js/LunBimg.js"/script/headbodydiv id="allswapImg"div class="swapImg"img src="image/1.jpg" //div div class="swapImg"img src="image/2.jpg" //div div class="swapImg"img src="image/3.jpg" //div div class="swapImg"img src="image/4.jpg" //div div class="swapImg"img src="image/5.jpg" //div div class="swapImg"img src="image/6.jpg" //div /divdiv class="btn btnLeft"/divdiv class="btn btnRight"/divdiv id="tabs"div class="tab bg"1/divdiv class="tab"2/divdiv class="tab"3/divdiv class="tab"4/divdiv class="tab"5/divdiv class="tab"6/div/div/body/htmlcss代码：* {padding:0px;margin:0px;}.swapImg {position:absolute;}.btn {position:absolute;height:90px;width:60px;background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透亮度为50%*/color:#ffffff;text-align:center;line-height:90px;font-size:40px;top:155px;/*图片高度400/2-45*/cursor:pointer;/*display:none;*/}.btnRight {left:840px;/*图片宽度900-导航宽度60*/}#tabs {position:absolute; top:370px;margin-left:350px; }.tab {height:20px;width:20px;background:#05e9e2; line-height:20px; text-align:center; font-size:10px;float:left;color:#ffffff;margin-right:10px; border-radius:100%; cursor:pointer;}.bg {background:#00ff21; }js代码：/// reference path="_references.js" /var i = 0;//全局变量//定义一个变量用来猎取轮播的过程var time;$(function (){//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐蔽$(".swapImg").eq(0).show().siblings().hide();showTime();//当鼠标放到下标上显示该图片，鼠标移走连续轮播$(".tab").hover(function (){//猎取到当前鼠标所在的下标的索引i = $(this).index();show();//鼠标放上去之后，怎么停止呢？猎取到变量的过程，清除轮播，把变量传进去clearInterval(time);}, function (){showTime();});//要求四，当我点击左右切换$(".btnLeft").click(function (){//1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (i == 0){i =6;}i--;show();showTime();});$(".btnRight").click(function () { //1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (i == 5) {i = -1;}i++;show();showTime();});});function show() {//$("#allswapImg").hover(function ()//{// $(".btn").show();//}, function ()//{// $(".btn").hide();//});//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut( );$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function showTime(){time = setInterval(function () {i++;if (i == 6) {//只有6张图片，所以i不能超过6，假如i等于6时，我们就让它等于第一张i = 0;}show();}, 3000);}以上就是本文的全部内容，盼望对大家的学习有所关心...。
JS实现自动轮播图效果（js案例）
JS实现⾃动轮播图效果（js案例）现在很多⽹站都有轮播图，这篇⽂章主要为⼤家详细介绍了js实现轮播图的完整代码及原理，需要的⼩伙伴可以参考⼀下。
1、轮播图主要功能：1、图⽚⾃动轮播（主图切换同时下⾯导航图⽚也会跟着变化）2、⿏标悬停的时候，图⽚轮播停⽌，⿏标离开后继续3、单击左右按钮切换图⽚4、⿏标移⼊后左右按钮出现，移出消失具体效果如下：⿏标移⼊：轮播图⽚数量、css样式等，⼩伙伴也可根据⾃⼰的需求做相应调整。
2、具体实现部分特别重要的是，在我们写任何动态效果之前，我们应该先把静态页⾯写出来，在考虑动态效果的实现。
HTML代码：<ul class="big_pic"><div class="prev"><a class="mark_left" href="#"></a></div><div class="next"><a class="mark_right" href="#"></a></div><div class="text">图⽚1详情</div><div class="length">1/6</div><li style="z-index: 1"><img src="images/flash_1.jpg" /></li> <li><img src="images/flash_2.jpg" /></li><li><img src="images/flash_3.jpg" /></li><li><img src="images/flash_4.jpg" /></li><li><img src="images/flash_5.jpg" /></li><li><img src="images/flash_6.jpg" /></li></ul><ul class="small_pic" ><li><img src="images/flash_1.jpg" /></li><li><img src="images/flash_2.jpg" /></li><li><img src="images/flash_3.jpg" /></li><li><img src="images/flash_4.jpg" /></li><li><img src="images/flash_5.jpg" /></li><li><img src="images/flash_6.jpg" /></li></ul></div>Css样式：@charset "utf-8";* {margin: 0;padding: 0;list-style: none;}#div1 {width: 500px;height: 420px;margin: 100px auto;position: relative;cursor: pointer;overflow: hidden;}#div1 ul.big_pic {position: relative;height: 320px;}#div1 ul.big_pic div.prev {opacity: 0;-webkit-transition: all .3s linear;transition: all .3s linear;position: absolute;left: 0;top: 0;bottom: 0;right: 50%;z-index: 100;}#div1 ul.big_pic div.prev a.mark_left {position: absolute;width: 60px;height: 60px;top: 50%;left: 10px;background: url("../images/btn.gif");}#div1 ul.big_pic div.next {opacity: 0;-webkit-transition: all .5s linear;transition: all .5s linear;position: absolute;left: 50%;top: 0;bottom: 0;right: 0;z-index: 100;}#div1 ul.big_pic div.next a.mark_right {position: absolute;height: 60px;top: 50%;right: 10px;background: url("../images/btn.gif") left -60px;}#div1 ul.big_pic div.text {position: absolute;bottom: 0;left: 0;line-height: 26px;color: white;background-color: rgba(0, 0, 0, 0.51);width: 70%;height: 26px;z-index: 200;font-size: 14px;padding-left: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;}#div1 ul.big_pic div.length {position: absolute;bottom: 0;right: 0;line-height: 26px;color: white;background-color: rgba(0, 0, 0, 0.51);width: 30%;height: 26px;z-index: 200;font-size: 14px;text-align: center;}#div1 ul.big_pic li {position: absolute;top: 0;left: 0;width: 500px;height: 320px;overflow: hidden;}#div1 ul.big_pic li img {width: 100%;height: 320px;}#div1 ul.small_pic {display: -webkit-box;display: -ms-flexbox;display: flex;background-color: #b0b0b0;height: 100px;padding: 6px 5px 6px 8px;-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;}#div1 ul.small_pic li {width: calc(500px / 3);}#div1 ul.small_pic li img {width: calc(488px / 3);height: 100%;}#div1 ul.small_pic li:not(:last-child) img {padding-right: 4px;-webkit-box-sizing: border-box;box-sizing: border-box;}接下来是最重要的js代码：var oDiv=document.getElementById('div1');var oPrv=oDiv.querySelector('div.prev');var oNext=oDiv.querySelector('div.next');var oBtnPrev=oPrv.querySelector('a.mark_left'); var oBtnNext=oNext.querySelector('a.mark_right'); var oText=oDiv.querySelector('div.text');var oLength=oDiv.querySelector('div.length');var aUl=oDiv.querySelectorAll('ul');var aBigLi=aUl[0].querySelectorAll('li');var aSmallLi=aUl[1].querySelectorAll('li'); //获取标签var zIndex=1,now=0;//zIndex：主图Z轴层级，now:下⾯导航图⽚的下标（从0开始）oBtnNext.onclick=function () {now++;if(now===aSmallLi.length) now=0;//当now等于⼩导航图⽚的长度时，把主图⽚换成第⼀张opublic();};oBtnPrev.onclick=function () {now--;if(now===-1) now=aSmallLi.length-1;//当now等于-1，把主图⽚换成最后opublic();};for (var i=0;i<aSmallLi.length;i++){aSmallLi[i].style.opacity=.6;//统⼀设置下⾯导航图⽚透明度为0.6aSmallLi[0].style.opacity=1;//初始化第⼀个导航图⽚透明度为1aSmallLi[i].index=i;//为每⼀个导航图加⼀个index的⾃定义属性aSmallLi[i].onclick=function () {//添加单击事件now=this.index;//当单击图⽚后，主图切换为对应图⽚opublic();};}function opublic(){//公共部分aBigLi[now].style.zIndex=zIndex++;//图⽚切换改变Z轴层级aBigLi[now].style.height=0;startMove(aBigLi[now],'height',320);//图⽚⾼度从0->360，实现图⽚动态叠加效果oText.innerHTML='图⽚'+(now+1)+'详情';oLength.innerHTML=(now+1)+'/'+aBigLi.length;for(var i=0;i<aSmallLi.length;i++){startMove(aSmallLi[i], 'opacity', 60);}startMove(aSmallLi[now], 'opacity', 100);if(now===0){startMove(aUl[1], 'left', 0);}else if(now===aSmallLi.length-1){//当当前导航图⽚为最后⼀张时，固定最后⼀张图⽚位置startMove(aUl[1], 'left', -(now-2)*aSmallLi[0].offsetWidth);}else{//下⾯导航图⽚的轮播效果startMove(aUl[1], 'left', -(now-1)*aSmallLi[0].offsetWidth);}}oPrv.onmouseover=oNext.onmouseover=function () {//⿏标移⼊左右按钮出现this.style.opacity=1;};oPrv.onmouseout=oNext.onmouseout=function () {//⿏标移出左右按钮消失this.style.opacity=0;};var timer=setInterval(oBtnNext.onclick, 3000);//设置⼀个定时器，每3秒钟模拟⼀次右边按钮的单击事件 oDiv.onmouseenter=function () {//⿏标移⼊后，定时器取消clearInterval(timer);};oDiv.onmouseleave=function () {//⿏标离开后开启定时器timer=setInterval(oBtnNext.onclick, 3000);}function startMove(obj, attr, iTarget)//运动框架，// obj:运动的对象，attr:运动的属性，iTarget：⽬标值{clearInterval(obj.timer);obj.timer=setInterval(function (){var cur=0;if(attr==='opacity'){cur=Math.round(parseFloat(getStyle(obj, attr))*100);}else{cur=parseInt(getStyle(obj, attr));}var speed=(iTarget-cur)/10;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cur==iTarget){clearInterval(obj.timer);}else{if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100;}else{obj.style[attr]=cur+speed+'px';}}}, 30);}。
最简单的JavaScript图片轮播代码(两种方法)
最简单的JavaScript图片轮播代码(两种方法)通过改变每个图片的opacity属性：素材图片：代码一：最简单的轮播广告代码二：第二步，布局好一个DIV,如：上一张下一张第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．#croll{width:100%;height:180p;background-color:white;poition:relative;border-bottom:1polidgray;}、、这里是给整个大的ＤＩＶ设定属性．#crollul{height:180p;lit-tyle:none;}、、ＤＩＶ下的ＵＬ属性．#crollulli{width:100%;height:180p;margin:0p;padding:0p;dipla y:none;}、、ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：diplay:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．。
ubl{poition:abolute;bottom:20p;left:40%;width:80p;height:20p;lin e-height:20p;tet-align:center;font-ize:16p;font-weight:bold;curor:pointer;}、、上一张按钮的属性．注意一个绝对定位．。
ubr{poition:abolute;bottom:20p;right:40%;width:80p;height:20p;line-height:20p;tet-align:center;font-ize:16p;font-weight:bold;curor:pointer;}、、下一张按钮的属性．注意一个绝对定位．。
ubr:hover{background:yellow;border-radiu:10p;}。
ubl:hover{background:yellow;border-radiu:10p;}、、以上两个hover是鼠标经过的效果．第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！四步轻松搞定一个简单的轮！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,,sky,,站长特效网" /><meta name="description" content=",站长特效网，站长必备js特效及广告代码。
大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /><title>图片自动播放收集，站长特效网欢迎您。
</title><style type="text/css">* {margin: 0;padding: 0}body {background: #1c1c1c;width: 100%;height: 100%}img {border: none}#imageFlow {position: absolute;top: 30px;left: 30%;width: 400px;height: 220px;}#imageFlow img {width: 200px;height: 200px}#imageFlow .mainOpacity{ position: absolute;top: 0;left: 0;width: 400px;height: 220px;z-index: 999;background: #1f1f1f;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer}#imageFlow .leftOpacity {position: absolute;z-index: 998;top: 0;left: 0;width: 100px;height: 200px;background: #1f1f1f;opacity: 0.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter: alpha(opacity=90);}#imageFlow .rightOpacity {position: absolute;z-index: 998;top: 0;left: 300px;height: 200px;background: #1f1f1f;opacity: 0.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter: alpha(opacity=90);}#imageFlow .scrollbar {position: absolute;z-index: 1000;bottom: 0;left:0;background: transparent;border-bottom: 2px solid #292929;width: 400px;height: 18px;cursor: pointer;}#imageFlow .scrollbar .currentScroll {position: absolute;left: 0;top: 0px;height: 18px;border-bottom: 2px solid #fc4e08;background: #1c1c1c;text-align: center;color: #fff;font-weight: bold;}#imageFlow .bank{left: 0;top: 0;width:400px;height: 200px;overflow: hidden;}#imageFlow .imageList{list-style: none;width: 1700px;margin-left: 100px;}#imageFlow .imageList li{float: left;display: inline;}#imageFlow .imageList li a {width: 200px;height: 200px;}#content {position: absolute;top: 280px;left: 30%;width: auto;height: auto;color: #fff;}</style><script>var sliderIMG = (function(){function getElementsByClass(object, tag, className) { var o = object.getElementsByTagName(tag);for ( var i = 0, n = o.length, ret = []; i < n; i++)if (o[i].className == className) ret.push(o[i]);if (ret.length == 1) ret = ret[0];return ret;}function MouseXY(e){if(window.event){return {x:window.event.offsetX, y:window.event.offsetY};}else{return {x:yerX, y:yerY};}}function addEvent(elem, type, handle){if(window.addEventListener){elem.addEventListener(type, handle, false);}else if(window.attachEvent){elem.attachEvent('on'+type, handle);}else{elem['on'+type] = handle;}}function _property(obj){var o = {};for(var pro in obj){o[pro] = obj[pro];}return o;}function imageFlow(id,properties){this.DIV = document.getElementById(id);this.DIVpros = _property(properties);this.init = function(){this.bank = getElementsByClass(this.DIV, 'div', 'bank');this.face = getElementsByClass(this.DIV, 'div', 'mainOpacity');this.current = getElementsByClass(this.DIV, 'span', 'currentScroll');this.count = this.DIVpros.count;this.spanWidth = this.bank.offsetWidth/this.count;this.current.style.width = this.spanWidth + 'px';this.current.innerHTML = 1;this.scrollBar = this.current.parentNode;this.index = 0;if(this.index == 0){this.current.style.left = 0 + 'px';}this.timer = this.DIVpros.timer || 5000;this.time = this.DIVpros.time || 10;this.speed = this.DIVpros.speed || 5;this.target = 0;this.auto = this.DIVpros.auto || false;this.check = true;this.che = false;clearInterval(this.doRoll);clearInterval(this.checkedRoll);clearTimeout(this.autoed);}this.start = function(e){this.init();var self = this;addEvent(self.face, 'click', function(e){var mouse = MouseXY(e);var x = mouse.x;var y = mouse.y;if(self.check){self.check = false;self.roll(x, y, e);}});addEvent(self.scrollBar, 'click', function(e){var mouse = MouseXY(e);var x = mouse.x;if(self.check){self.check = false;self.checkRoll(x, e);}clearTimeout(this.autoed);self.che == falseif(self.auto == false) return;if(self.auto && self.che == false){clearTimeout(this.autoed);clearInterval(this.checkedRoll);clearInterval(this.doRoll);self.autoed = setTimeout(function(e){self.autoScroll(e);}, self.timer);}});if(self.auto == true){addEvent(self.face , 'mouseover', function(){ self.auto = false;self.autoScroll(e);});addEvent(self.face , 'mouseout', function(){self.auto = true;self.autoed = setTimeout(function(e){self.autoScroll(e);}, self.timer);});self.autoed = setTimeout(function(e){if(self.check){self.check = false;self.autoScroll(e);}}, self.timer);}}this.autoScroll = function(e){clearTimeout(this.autoed);var self = this;if(self.auto == true){var left = parseInt(self.current.style.left);var x = left + self.spanWidth;if(left == self.bank.offsetWidth - self.spanWidth){x = 0;}self.checkRoll(x, e);self.autoed = setTimeout(function(){self.autoScroll(e);}, self.timer);}}this.setOpacity = function(){}//欢迎来到站长特效网，我们的网址是，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。