帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS左右滚动滑块
JS左右滚动滑块
浏览:830次
-
评论:0次
-
发布时间:2017-10-12
Html
Css
Js
上传上传!
上传上传!
上传上传!
上传上传!
上传上传!
上传上传!
上传上传!
上传上传!
上传上传!
.blk_18 { BORDER-RIGHT:#e3e3e3 1px solid; BORDER-TOP:#e3e3e3 1px solid; MARGIN-TOP:8px; FONT-SIZE:12px; BACKGROUND:#f3f3f3; OVERFLOW:hidden; BORDER-LEFT:#e3e3e3 1px solid; WIDTH:390px; BORDER-BOTTOM:#e3e3e3 1px solid; ZOOM:1 } .blk_18 .pcont { FLOAT:left; OVERFLOW:hidden; WIDTH:350px } .blk_18 .ScrCont { WIDTH:32766px; ZOOM:1 } .blk_18 #List1_1 { FLOAT:left } .blk_18 #List2_1 { FLOAT:left } .blk_18 .LeftBotton { BACKGROUND:url(http://www.jq22.com/img/cs/300x500-1.png); FLOAT:left; MARGIN:10px 1px; WIDTH:15px; HEIGHT:72px } .blk_18 .RightBotton { BACKGROUND:url(http://www.jq22.com/img/cs/300x500-1.png); FLOAT:left; MARGIN:10px 1px; WIDTH:15px; HEIGHT:72px } .blk_18 .LeftBotton { BACKGROUND-POSITION:0px 0px; MARGIN-LEFT:5px } .blk_18 .RightBotton { BACKGROUND-POSITION:0px -100px; MARGIN-LEFT:-1px } .blk_18 .LeftBotton:hover { BACKGROUND-POSITION:-20px 0px } .blk_18 .RightBotton:hover { BACKGROUND-POSITION:-20px -100px } .blk_18 .pl IMG { DISPLAY:block; MARGIN:6px auto 1px; CURSOR:pointer; BORDER-TOP-STYLE:none; BORDER-RIGHT-STYLE:none; BORDER-LEFT-STYLE:none; BORDER-BOTTOM-STYLE:none } .blk_18 .pl { BORDER-RIGHT:#f3f3f3 1px solid; BORDER-TOP:#f3f3f3 1px solid; FLOAT:left; BORDER-LEFT:#f3f3f3 1px solid; WIDTH:114px; LINE-HEIGHT:24px; BORDER-BOTTOM:#f3f3f3 1px solid; TEXT-ALIGN:center; TEXT-DECORATION:underline } .blk_18 A.pl:hover { BORDER-RIGHT:#ff9900 1px solid; BORDER-TOP:#ff9900 1px solid; BACKGROUND:#fff; BORDER-LEFT:#ff9900 1px solid; COLOR:#ff9900; BORDER-BOTTOM:#ff9900 1px solid } .commu_cont3 { MARGIN:9px 7px 7px; LINE-HEIGHT:150% } .commu_cont3 UL { WIDTH:188px }
//图片滚动列表 mengjia 070927 var Speed_1 = 10; //速度(毫秒) var Space_1 = 20; //每次移动(px) var PageWidth_1 = 116 * 3; //翻页宽度 var interval_1 = 7000; //翻页间隔 var fill_1 = 0; //整体移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1 = "right"; var Comp_1 = 0; var AutoPlayObj_1 = null; function GetObj(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")') } else { return eval('document.all.' + objName) } } function AutoPlay_1() { clearInterval(AutoPlayObj_1); AutoPlayObj_1 = setInterval('ISL_GoDown_1();ISL_StopDown_1();', interval_1) } function ISL_GoUp_1() { if (MoveLock_1) return; clearInterval(AutoPlayObj_1); MoveLock_1 = true; MoveWay_1 = "left"; MoveTimeObj_1 = setInterval('ISL_ScrUp_1();', Speed_1); } function ISL_StopUp_1() { if (MoveWay_1 == "right") { return }; clearInterval(MoveTimeObj_1); if ((GetObj('ISL_Cont_1').scrollLeft - fill_1) % PageWidth_1 != 0) { Comp_1 = fill_1 - (GetObj('ISL_Cont_1').scrollLeft % PageWidth_1); CompScr_1() } else { MoveLock_1 = false } AutoPlay_1() } function ISL_ScrUp_1() { if (GetObj('ISL_Cont_1').scrollLeft <= 0) { GetObj('ISL_Cont_1').scrollLeft = GetObj('ISL_Cont_1').scrollLeft + GetObj('List1_1').offsetWidth } GetObj('ISL_Cont_1').scrollLeft -= Space_1 } function ISL_GoDown_1() { clearInterval(MoveTimeObj_1); if (MoveLock_1) return; clearInterval(AutoPlayObj_1); MoveLock_1 = true; MoveWay_1 = "right"; ISL_ScrDown_1(); MoveTimeObj_1 = setInterval('ISL_ScrDown_1()', Speed_1) } function ISL_StopDown_1() { if (MoveWay_1 == "left") { return }; clearInterval(MoveTimeObj_1); if (GetObj('ISL_Cont_1').scrollLeft % PageWidth_1 - (fill_1 >= 0 ? fill_1 : fill_1 + 1) != 0) { Comp_1 = PageWidth_1 - GetObj('ISL_Cont_1').scrollLeft % PageWidth_1 + fill_1; CompScr_1() } else { MoveLock_1 = false } AutoPlay_1() } function ISL_ScrDown_1() { if (GetObj('ISL_Cont_1').scrollLeft >= GetObj('List1_1').scrollWidth) { GetObj('ISL_Cont_1').scrollLeft = GetObj('ISL_Cont_1').scrollLeft - GetObj('List1_1').scrollWidth } GetObj('ISL_Cont_1').scrollLeft += Space_1 } function CompScr_1() { if (Comp_1 == 0) { MoveLock_1 = false; return } var num, TempSpeed = Speed_1, TempSpace = Space_1; if (Math.abs(Comp_1) < PageWidth_1 / 2) { TempSpace = Math.round(Math.abs(Comp_1 / Space_1)); if (TempSpace < 1) { TempSpace = 1 } } if (Comp_1 < 0) { if (Comp_1 < -TempSpace) { Comp_1 += TempSpace; num = TempSpace } else { num = -Comp_1; Comp_1 = 0 } GetObj('ISL_Cont_1').scrollLeft -= num; setTimeout('CompScr_1()', TempSpeed) } else { if (Comp_1 > TempSpace) { Comp_1 -= TempSpace; num = TempSpace } else { num = Comp_1; Comp_1 = 0 } GetObj('ISL_Cont_1').scrollLeft += num; setTimeout('CompScr_1()', TempSpeed) } } function picrun_ini() { GetObj("List2_1").innerHTML = GetObj("List1_1").innerHTML; GetObj('ISL_Cont_1').scrollLeft = fill_1 >= 0 ? fill_1 : GetObj('List1_1').scrollWidth - Math.abs(fill_1); GetObj("ISL_Cont_1").onmouseover = function() { clearInterval(AutoPlayObj_1) } GetObj("ISL_Cont_1").onmouseout = function() { AutoPlay_1() } AutoPlay_1(); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>JS左右滚动滑块-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:可左右平滑滚动的产品展示效果
翻转双语导航
微信小图消息数
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
830
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值