JS 图片滚动,带箭头控制方向左右滚动

最新推荐文章于 2023-12-06 16:56:24 发布
chaoyv
最新推荐文章于 2023-12-06 16:56:24 发布
阅读量1.8k
点赞数
分类专栏： item02 新蛋文章标签： javascript xhtml ViewUI
本文链接：https://blog.csdn.net/chaoyv/article/details/84616236
版权
item02 新蛋专栏收录该内容
322 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS鼠标控制左右滚动图片带自动翻滚</title>
<style type="text/css">

/*公共样式*/
*{ margin:0; padding:0;}
body{ font-family:"宋体"; color:#666; font-size:12px; background:#fff;}
a{ color:#666; text-decoration:none;}
a:hover{ color:#666; text-decoration:none;}
a img{ border:none;}
.f_l{ float:left;}
.f_r{ float:right;}
i{ font-style:normal;}
em{ font-style:normal;}
ul li{ list-style-type:none;}
.c{ clear:both;}

/*倒计时PPT样式*/
.timePPT{ width:771px; height:233px;}
/*倒计时PPT头部的倒计时*/
.timePPT .title{ width:771px; height:28px; margin-bottom:8px;}
.timePPT .title h3{ font-family:"微软雅黑"; line-height:28px; font-size:16px; font-weight:bold; color:#c00;}
.timePPT .title a{ color:#666; font-weight:bold; width:90px; font-size:12px; background:url(icon.jpg) no-repeat 80px 2px;}
.timePPT .title span{ text-align:center; font-weight:bold; font-size:14px; line-height:28px; color:#666; display:block;}
.timePPT .title span i{ padding:5px; background:#eee;}

/*滚动图片效果样式*/
.rollBox{width:771px; height:169px; overflow:hidden; position:relative;}
.rollBox .LeftBotton{ width:12px; height:169px; background:url(timePPT/LeftBotton.jpg) no-repeat 0px 72px; top:0; left:0; overflow:hidden; display:inline; position:absolute; cursor:pointer;}
.rollBox .LeftBotton:hover{ background:url(timePPT/LeftBottonHover.jpg) no-repeat 0px 72px;}
.rollBox .RightBotton{ width:12px; height:169px; background:url(timePPT/RightBotton.jpg) no-repeat 3px 72px; top:0; right:0; overflow:hidden; position:absolute; display:inline; cursor:pointer;}
.rollBox .RightBotton:hover{ background:url(timePPT/RightBottonHover.jpg) no-repeat 3px 72px; }
.rollBox .Cont{ width:740px; height:169px; margin-left:18px; overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{ width:150px; height:169px; float:left; padding:0 17px 0 18px;}
.rollBox .Cont .pic img{ padding-left:3px;}
.rollBox .Cont .pic p{ font-family:"Arial"; line-height:18px; word-break:break-all;}
.rollBox .Cont .pic p a{ color:#666; text-decoration:none;}
.rollBox .Cont .pic p a:hover{ color:#666; text-decoration:underline;}
.rollBox .Cont .pic i{ font-family:"微软雅黑"; color:#f60; font-weight:bold; font-size:14px; margin-top:4px; }
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
</style>
</head>

<body>
<div class="timePPT">

<div class="title">
<h3 class="f_l"><i>限时抢购</i></h3><a href="###" target="_blank" class="f_r">更多抢购商品</a> <span>剩余时间：<i>02</i>:<i>01</i>:<i>03</i></span>
</div>
        
<div class="rollBox">
    <div class="LeftBotton" οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" οnmοuseοut="ISL_StopUp()"></div>
    <div class="Cont" id="ISL_Cont">
        <div class="ScrCont">
            <div id="List1"> 
                
                <!-- 图片列表 begin -->
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥4589.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥612129.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥6339.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥6189.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥5489.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥6189.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥65489.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥6189.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,3GB运行内存</a></p><i>¥65489.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥6189.00</i>
                </div>
                <div class="pic"><a href="###" title="5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存"><img src="timePPT/img01.jpg" width="144" height="108" /></a><p><a href="###">5.5英寸高清大屏,四核1.3GHz高速处理器,1GB运行内存</a></p><i>¥6189.00</i>
                </div>
                <!-- 图片列表 end --> 
                
            </div>
            <div id="List2"></div>
        </div>
    </div>
    <div class="RightBotton" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" οnmοuseοut="ISL_StopDown()"></div>
</div>

</div>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 1; //速度(毫秒)
var Space = 740; //每次移动(px)
var PageWidth = 740; //翻页宽度
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();',3000); //间隔时间
}
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);
 }
}
//--><!]]>
</script>
</body>
</html>
效果图：