<!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" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="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" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="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>
效果图:
相关推荐
jQuery图文左右滚动代码(箭头控制)
带左右箭头的图片滚动特效,点击小图有放大特效.
插件描述:图片带左右箭头滚动+鼠标点击放大效果. 参考示例:http://www.jq22.com/jquery-info6037
JS动态可控制左右滚动的图片代码
兼容IE7+ IE6图片格式改下 带左右箭头按钮的js循环滚动图片特效代码
带左右箭头切换控制的自动无缝滚动图片JS特效
原生js图片插件制作左右箭头按钮控制图片轮播滚动
JQuery带箭头图片左右滚动是一款基于JQuery新浪新版带箭头的图片左右滚动代码,有点类似幻灯片的样式,当然也可以作为幻灯片使用。
jQuery图片左右滚动效果代码是一款带左右箭头,自动轮播的jQuery图片切换特效。
轮换滚动图片jQuery效果,带有左右箭头 演示地址 http://www.whkge.com/jsview/design20110830b/
内容索引:脚本资源,jQuery,图片滚动,jQuery插件 jQuery 左右图片滚动,带箭头控制,这种模式在网页上经常见到,个人觉得做一个相册展示相处的单元还是不错的。
点击左右箭头实现滚动广告图片js代码,简单兼容性好。
在这个栏目中,新浪采用了两个滚动动画,点击左右箭头,图片可以一张张切换,切换得一点都不“唐突”,这就是jquery的功能了。像这样的动画,很常见,之前我在腾讯的女性频道上也做过此类的滚动动画。可惜有点遗憾,...
js首页按钮控制焦点图片滚动是一款使用L、R代替左右箭头按钮的自动滚动js焦点图。
jQuery按钮控制图片左右滚动代码是一款鼠标悬停显示遮罩效果,点击箭头按钮图片滚动带加号点详细。
仿腾讯科技滚动图片JS代码,风格大气,支持手动控制图片滚动,支持文字标题,大网站的效果就是不一样,简洁大方。
简单的JS图片切换代码,图片储存于数组中
JS动态可控制左右滚动的图片 <SCRIPT language=javascript type=text/javascript> <!--//--><![CDATA[//><!-- var scrollPic_02 = new ScrollPic(); scrollPic_02.scrollContId = "ISL_Cont_1"; //内容容器ID...