无缝滚动图片—

图片已上传，请到我的资源部去下载，不用积分，——无缝滚动图片http://download.csdn.net/detail/qq_34137397/9665933

</head>
<body>
<div class="control"><label id="chk_pause"><input type="checkbox" checked="checked">间隔停顿</label><select id="pause_time"><option value="100">短</option><option value="1000" selected="selected">中</option><option value="3000">长</option></select>滚动速度：<select id="sel_speed"><option value="2">慢</option><option value="5">中</option><option value="10">快</option></select>
</div><div class="roll" id="roll"><a href="javascript:void(0);" class="btn_left"></a><a href="javascript:void(0);" class="btn_right"></a><div class="wrap"><ul><li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" /></a></li><li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" /></a></li><li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" /></a></li><li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" /></a></li></ul></div>
</div>
</body>
</html>

CSS代码

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }.roll { width: 880px; height: 108px; margin: 50px auto 0; position: relative; }
.btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; }
.btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
.btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }
.btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
.roll .wrap { width: 728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
.roll ul { position: absolute; top: 0; left: 0; }
.roll li { float: left; width: 182px; height: 108px; text-align: center; }
.roll li a:hover { position: relative; top: 2px; }.control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; }

js代码

var g_bMoveLeft=true;
var g_oTimer=null;
var g_oTimerOut=null;var g_bPause=true;
var g_iPauseTime=1000;
var g_iSpeed=2;window.οnlοad=function ()
{var oDiv=document.getElementById('roll');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var aA=oDiv.getElementsByTagName('a');var oChk=document.getElementById('chk_pause');var oPauseTime=document.getElementById('pause_time');var oSpeed=document.getElementById('sel_speed');var i=0;var str=oUl.innerHTML+oUl.innerHTML;oUl.innerHTML=str;oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';for(i=0;i<aLi.length;i++){aLi[i].οnmοuseοver=function (){stopMove();};aLi[i].οnmοuseοut=function (){startMove(g_bMoveLeft);};}aA[0].οnmοuseοver=function (){startMove(true);};aA[1].οnmοuseοver=function (){startMove(false);};startMove(true);oChk.οnclick=function (){g_bPause=oChk.getElementsByTagName('input')[0].checked;};oSpeed.οnchange=function (){g_iSpeed=parseInt(this.value);};oPauseTime.οnchange=function (){g_iPauseTime=parseInt(this.value);};
};function startMove(bLeft)
{g_bMoveLeft=bLeft;if(g_oTimer){clearInterval(g_oTimer);}g_oTimer=setInterval(doMove, 30);
}function stopMove()
{clearInterval(g_oTimer);g_oTimer=null;
}function doMove()
{var oDiv=document.getElementById('roll');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var l=oUl.offsetLeft;if(g_bMoveLeft){l-=g_iSpeed;if(l<=-oUl.offsetWidth/2){l+=oUl.offsetWidth/2;}}else{l+=g_iSpeed;if(l>=0){l-=oUl.offsetWidth/2;}}if(g_bPause){if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)<Math.ceil(g_iSpeed/2)){stopMove();g_oTimerOut=setTimeout(function (){startMove(g_bMoveLeft);}, g_iPauseTime);l=Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth;}}oUl.style.left=l+'px';
}

无缝滚动图片——源码相关推荐

黑色响应式全屏滚动主页源码
介绍: html5黑色大气的个人博客全屏滚动个人主页源码下载,右键记事本即可修改. 网盘下载地址: http://kekewl.cc/ZNE7tnBEfKF0 图片:
PHP 八羊闪电本地相册图片查看器V1 PHP极简代码直接查看本地文件夹图片源码下载！
该源码,直接读取本地IMGAGES文件夹的图片,直接显示在相册,点击放大查看,非常方便,非常适合二次开发,但是不适合小白.没有做UI和设计,比较简陋,所以仅仅售价10元钱,想要的就拿去,不想要的就别拍 ...
解决DataList控件无缝滚动图片(转)
解决问题:1.无缝滚动:2.页面初始时图片显示页面上,而不是才从一个方向出来. 将绑定数据绑定到DataList 控件后.其他数据控件也可使用此方法. 页面源代码: <div id=&quo ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...
python爬虫爬取王者荣耀官网全部装备图片(源码分享)
这篇文章为源码分享,爬虫的分析过程请阅读文章 <用python爬取王者荣耀官网的英雄皮肤海报(含源码)> 源码 import requests from bs4 import Beauti ...
php滚动公告源码,JavaScript_jquery垂直公告滚动实现代码，复制代码代码如下: !DOCTYPE - phpStudy...
jquery垂直公告滚动实现代码无标题文档 *{ padding:0px; margin:0px; } ul{ list-style:none; } li{ line-height:30px; } ...
php滚动公告源码,好用的滚动公告HTML代码
Js+CSS间断和不间断文本滚动代码 .noticebox{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflo ...
【爬虫初出茅庐】爬取并下载想要图片源码分析 + 分享
先上效果图. 如搜取并下载[鬼灭之刃]和[刀剑神域]相关图片相关过程分析: (PS:因为刚学爬虫没几天,若大佬发现有什么问题欢迎指正) 这里爬取的网站是免费提供图片的51贴图.若光爬取单一或者连续网 ...
Android-JNI开发系列《十一》实践-利用Android C源码实现GIF图片的播放
人间观察人往往都是多面性的,一个人的时候是一个样子,一群人的时候是另一个样子. 声明此篇文章只为记录和学习JNI以及了解GIF的解码原理.借鉴了网上的有关gif文章介绍和代码.如果是自己学习,建议 ...

无缝滚动图片——源码

无缝滚动图片——源码相关推荐

最新文章

热门文章