欢迎来到家户通官网、重庆网站建设、重庆做网站、重庆残疾人计算机免费就业培训、企业一体化增值服务
当前位置: 主页 > 新闻动态 > 技术文档 >
推荐内容
热门内容
联系我们
电话咨询:18983818617
E-mail:4221389.qq.com
地址: 重庆市江津区琅山大道城投花园小区口

织梦图片轮播走马灯效果最全代码

作者/整理:admin 来源:互联网 2017-03-24

网页正文代码全文:
第一步:--------------------------------------------------------------------------把这些代码复制到body区域

 
        <div class="rollBox">
            <div onmouseup="ISL_StopUp()" class="LeftBotton" onmouseout="ISL_StopUp()" onmousedown="ISL_GoUp()"></div>
            <div id="ISL_Cont" class="Cont">
                <div class="ScrCont">
                    <div id="List1">
                        {dede:arclist typeid='1' row=10 titlelen=48}
                        <div class="pic"><a href="[field:arcurl/]" target="_blank"><span class="img"><img src="[field:litpic/]" alt="[field:fulltitle/]" width="265"></span><p>[field:title/]</p></a></div>
                        {/dede:arclist}
                    </div>
                    <div id="List2">
             </div>
                </div>
           
        </div><div onmouseup="ISL_StopDown()" class="RightBotton" onmouseout="ISL_StopDown()" onmousedown="ISL_GoDown()">
        <script type="text/javascript" src="/555.js"></script>
        </div>
第二步:------------------------------------------------------------------------------把下面这些代码做成一个JS文件

// JavaScript Document
var Speed = 10; //速度(毫秒) 
var Space = 20; //每次移动(px) 
var PageWidth = 1130; //翻页宽度 
var fill = 0; //整体移位 
var MoveLock = false; 
var MoveTimeObj; 
var Comp = 0; 
var AutoPlayObj = null; 
GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
GetObj('ISL_Cont').scrollLeft = fill; 
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} 
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} 
AutoPlay(); 
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 
function AutoPlay(){ //自动滚动 
clearInterval(AutoPlayObj); 
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',1000); //间隔时间 
function ISL_GoUp(){ //上翻开始 
if(MoveLock) return; 
clearInterval(AutoPlayObj); 
MoveLock = true; 
MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
function ISL_StopUp(){ //上翻停止 
clearInterval(MoveTimeObj); 
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ 
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
CompScr(); 
}else{ 
MoveLock = false; 
AutoPlay(); 
function ISL_ScrUp(){ //上翻动作 
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} 
GetObj('ISL_Cont').scrollLeft -= Space ; 
function ISL_GoDown(){ //下翻 
clearInterval(MoveTimeObj); 
if(MoveLock) return; 
clearInterval(AutoPlayObj); 
MoveLock = true; 
ISL_ScrDown(); 
MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 
function ISL_StopDown(){ //下翻停止 
clearInterval(MoveTimeObj); 
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){ 
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; 
CompScr(); 
}else{ 
MoveLock = false; 
AutoPlay(); 
function ISL_ScrDown(){ //下翻动作 
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} 
GetObj('ISL_Cont').scrollLeft += Space ; 
function CompScr(){ 
var num; 
if(Comp == 0){MoveLock = false;return;} 
if(Comp < 0){ //上翻 
if(Comp < -Space){ 
   Comp += Space; 
   num = Space; 
}else{ 
   num = -Comp; 
   Comp = 0; 
GetObj('ISL_Cont').scrollLeft -= num; 
setTimeout('CompScr()',Speed); 
}else{ //下翻 
if(Comp > Space){ 
   Comp -= Space; 
   num = Space; 
}else{ 
   num = Comp; 
   Comp = 0; 
GetObj('ISL_Cont').scrollLeft += num; 
setTimeout('CompScr()',Speed); 

第三步:-----------------------------------------------------------------把这个JS文件命名为555.js
放在网站根目录就可以了
第四步:-----------------------------------------------------------------把如下CSS代码保存为CSS文件,在页头进行链接。

a,a:link,a:visited,a:active{color: #333; text-decoration:none;  font:  "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";}
 
.rollBox {
WIDTH: 1170px; OVERFLOW: hidden; margin:15px 0;
}
.rollBox .LeftBotton {
MARGIN: 85px 0px 0px; WIDTH: 15px; DISPLAY: inline; BACKGROUND: url(../images/left.png) no-repeat; FLOAT: left; HEIGHT: 23px; OVERFLOW: hidden; CURSOR: pointer
}
.rollBox .RightBotton {
MARGIN: 85px 0px 0px; WIDTH: 15px; DISPLAY: inline; BACKGROUND: url(../images/right.png) no-repeat; FLOAT: left; HEIGHT: 23px; OVERFLOW: hidden; CURSOR: pointer
}
.rollBox .Cont {
PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; WIDTH: 1132px; PADDING-RIGHT: 2px; FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 0px
}
.rollBox .ScrCont {
WIDTH: 1342177.27px
}
.rollBox .Cont .pic {
TEXT-ALIGN: center; PADDING-BOTTOM: 7px; PADDING-LEFT: 13px; WIDTH: 257px; PADDING-RIGHT: 13px; BACKGROUND: url(../images/heiying.png) no-repeat center bottom; FLOAT: left; PADDING-TOP: 0px
}
.rollBox .Cont .pic img{ width:227px}
 
.rollBox .Cont .pic p{
line-height:28px !important; margin:0; padding:0 ; height:28px !important; border-bottom:none; BACKGROUND:#ff7638; color:#ffffff; font-weight:bold
}
.rollBox .Cont .pic A {
PADDING-BOTTOM: 15px; PADDING-LEFT: 15px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND:#e4e4e4; PADDING-TOP: 15px
}
.rollBox .Cont .pic A:hover {
BACKGROUND: #ff7638; text-decoration: none;
}
.rollBox .Cont .pic A SPAN {
LINE-HEIGHT: 26px; COLOR: #505050; width:227px; height:162px; display:block; overflow:hidden;
}
.rollBox #List1 {
FLOAT: left
}
.rollBox #List2 {
FLOAT: left
----------------------------------------------------------------------------------------------------------------
第一步中的织梦调用参数请自行设计。