js图片轮播手动切换效果
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js图片轮播手动切换效果
利用ScrollPicLeft.js这个库实现图片的前后切换，适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样，而是可以手动的去点击前后切换箭头按钮，进行图片的翻页，从而达到浏览上一张，下一张的效果。
不需要调用jquery，初始化简单，使用非常的简单，便利。
实例效果：
&script type="text/javascript"&
var scrollPhoto = new ScrollPicleft();
scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""
scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID
scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID
scrollPhoto.frameWidth = 450;//显示框宽度
scrollPhoto.pageWidth = 150; //翻页宽度
scrollPhoto.speed = 10; //移动速度(单位毫秒，越小越快)
scrollPhoto.space = 10; //每次移动像素(单位px，越大越快)
scrollPhoto.autoPlay = //自动播放
scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)
scrollPhoto.initialize(); //初始化
本文实例讲述了js图片轮播手动切换效果。分享给大家供大家参考。具体如下：
这是一款基于js图片轮播手动切换效果代码，实现过程很简单。
为大家分享的js图片轮播手动切换效果代码如下
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&js图片轮播手动切换效果&/title&
&script type="text/javascript" src="js/ScrollPicLeft.js"&&/script&
html,body,ul,li{margin:0; padding:0;}
ul,li{ list-style:}
.dd_main{ width:520}
.zl_left { width:35 float: text-align: padding-top:60px}
.zl_right { width:35 float: text-align: padding-top:60px}
.zl_content { width:450 height:153 float: overflow:}
.zl_content ul li { width:130 padding:0 10 text-align: float:}
.welcome{ position: width:100%; text-align: bottom:30}
.welcome a{ color:#0350B8;}
&div class="dd_main"&
&div class="zl_left" id="Left_Photo"&&a href="javascript:void(0)"&&img src="images/zl_tb1.jpg" width="24" height="32" /&&/a&&/div&
&div class="zl_content"&
&ul id="ISL_Photo"&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&li&&img src="images/zl_tp.jpg" width="130" height="153" /&&/li&
&div class="zl_right" id="Right_Photo"&&a href="javascript:void(0)"&&img src="images/zl_tb2.jpg" width="24" height="32" /&&/a&&/div&
&script type="text/javascript"&
var scrollPhoto = new ScrollPicleft();
scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""
scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID
scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID
scrollPhoto.frameWidth = 450;//显示框宽度
scrollPhoto.pageWidth = 150; //翻页宽度
scrollPhoto.speed = 10; //移动速度(单位毫秒，越小越快)
scrollPhoto.space = 10; //每次移动像素(单位px，越大越快)
scrollPhoto.autoPlay = //自动播放
scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)
scrollPhoto.initialize(); //初始化
源码下载：
以上就是为大家分享的js图片轮播手动切换效果代码，希望大家可以喜欢，并应用到实践中。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JS图片轮播_广告代码_javascript图片切换及js图片播放器相关广告代码
您的位置： &
广告代码特效
被点击15637次 |
被点击57321次 |
被点击50460次 |
被点击44439次 |
被点击84670次 |
被点击65540次 |
被点击48979次 |
被点击27369次 |
被点击43094次 |
被点击21991次 |
被点击101875次 |
被点击37858次 |
被点击117077次 |
被点击37401次 |
被点击27663次 |
被点击21997次 |
被点击25513次 |
被点击18457次 |
被点击23437次 |
被点击37344次 |
被点击20888次 |
被点击31438次 |
被点击17350次 |
被点击17051次 |
被点击6274次 |
被点击25606次 |
被点击9824次 |
被点击19134次 |
被点击17357次 |
被点击19483次 |查看: 1439|回复: 15
前辈请进！这个5图首页轮播代码怎么修改呢？专业版
TA的每日心情思考 12:02签到天数: 50 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 8803, 距离下一级还需 1197 积分
注册会员, 积分 8803, 距离下一级还需 1197 积分
先上代码，之前用的淘宝旺铺基础版 试用了 可行，现在换成专业版了也可以用，但是有个小问题求大神帮忙！
&div class=&J_TWidget& data-widget-config=&{&effect&: &fade&, &circular&: true ,&contentCls&:&taobaoux&}& data-widget-type=&Tabs& style=&height:550overflow:&&
& & & & &div class=&taobaoux& style=&height:<font color="#ff&&
& & & & & & & & &div class=&footer-more-trigger& style=&width:1920height:<font color="#fftop:padding:0border:left:50%;&&
& & & & & & & & & & & & &div class=&footer-more-trigger& style=&width:1920height:<font color="#ffpadding:0border:left:-960&&
& & & & & & & & & & & & & & & & &div data-widget-config=&{&contentCls&: &taobaoux-com&,&navCls&: &bbs-taobaoux-com&,&effect&: &scrollx&,&easing&: &easeOutStrong&,&prevBtnCls&:&prev1920&,&nextBtnCls&:&next1920&,&autoplay&: true,&viewSize&:[1920],&circular&: true}& data-widget-type=&Carousel& class=&J_TWidget&&
& & & & & & & & & & & & & & & & & & & & &div class=&J_TWidget& data-widget-config=&{&trigger&:&.ux1920&,&align&:{&node&:&.ux1920&,&offset&:[-500,0],&points&:[&cc&,&cc&]}}& data-widget-type=&quotopup& style=&display:&&
& & & & & & & & & & & & & & & & & & & & & & & & &div class=&prev1920& style=&font-size:100cursor:opacity:0.5;color:#F00;&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&
& & & & & & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & & & & & &div class=&J_TWidget& data-widget-config=&{&trigger&:&.ux1920&,&align&:{&node&:&.ux1920&,&offset&:[500,0],&points&:[&cc&,&cc&]}}& data-widget-type=&quotopup& style=&display:&&
& & & & & & & & & & & & & & & & & & & & & & & & &div class=&next1920& style=&font-size:100cursor:opacity:0.5;color:#F00;&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&
& & & & & & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & & & & & &div style=&height:800width:1920overflow:padding:0margin:0& class=&ux1920&&
& & & & & & & & & & & & & & & & & & & & & & & & &ul class=&taobaoux-com& style=&height:800width:1920padding:0margin:0&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&width:1920height:<font color="#ffpadding:0margin:0&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&a target=&_blank& style=&padding:0margin:0&& &img src=&/imgextra/i2//TB2fE2.bXXXXXXLXpXXXXXXXXXX_!!.jpg& width=&1920px& height=&<font color="#ffpx& border=&0px& /&&/a&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&width:1920height:<font color="#ffpadding:0margin:0&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&a target=&_blank& style=&padding:0margin:0&& &img src=&/imgextra/i3//TB2H_v8bXXXXXXgXXXXXXXXXXXX_!!.jpg& width=&1920px& height=&<font color="#ffpx& border=&0px& /&&/a&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&width:1920height:<font color="#ffpadding:0margin:0&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&a target=&_blank& style=&padding:0margin:0&& &img src=&/imgextra/i3//TB2H_v8bXXXXXXgXXXXXXXXXXXX_!!.jpg& width=&1920px& height=&<font color="#ffpx& border=&0px& /&&/a&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&width:1920height:<font color="#ffpadding:0margin:0&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&a target=&_blank& style=&padding:0margin:0&& &img src=&/imgextra/i4//TB28o_5bXXXXXaHXXXXXXXXXXXX_!!.jpg& width=&1920px& height=&<font color="#ffpx& border=&0px& /&&/a&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&width:1920height:<font color="#ffpadding:0margin:0&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&a target=&_blank& style=&padding:0margin:0&& &img src=&/imgextra/i1//TB2qwb2bXXXXXbMXpXXXXXXXXXX_!!.jpg& width=&1920px& height=&<font color="#ffpx& border=&0px& /&&/a&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & &/ul&
& & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & & & & & &div class=&footer-more-trigger& style=&padding:0border:left:50%;&&
& & & & & & & & & & & & & & & & & & & & & & & & &div class=&footer-more-trigger& style=&width:1920height:50padding:0border:left:-960top:505&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &ul class=&bbs-taobaoux-com& style=&width:950height:50margin:0text-align:&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&display:margin:0 5cursor:line-height:50&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&img src=&/imgextra/i3//TB2.O2tbXXXXXaYXpXXXXXXXXXX_!!.jpg& width=&120px& height=&39px& border=&0px& style=&vertical-align:margin:5px 0;& /&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&display:margin:0 5cursor:line-height:50&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&img src=&/imgextra/i2//TB2fE2.bXXXXXXLXpXXXXXXXXXX_!!.jpg& width=&120px& height=&39px& border=&0px& style=&vertical-align:margin:5px 0;& /&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&display:margin:0 5cursor:line-height:50&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&img src=&/imgextra/i3//TB2H_v8bXXXXXXgXXXXXXXXXXXX_!!.jpg& width=&120px& height=&39px& border=&0px& style=&vertical-align:margin:5px 0;& /&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&display:margin:0 5cursor:line-height:50&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&img src=&/imgextra/i4//TB28o_5bXXXXXaHXXXXXXXXXXXX_!!.jpg& width=&120px& height=&39px& border=&0px& style=&vertical-align:margin:5px 0;& /&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &li style=&display:margin:0 5cursor:line-height:50&&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&img src=&/imgextra/i4//TB28o_5bXXXXXaHXXXXXXXXXXXX_!!.jpg& width=&120px& height=&39px& border=&0px& style=&vertical-align:margin:5px 0;& /&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &/li&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &/ul&
& & & & & & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & &/div&
& & & & &ul class=&ks-switchable-nav& style=&display:&&
& & & & &/ul&
QQ图片41.jpg (152.1 KB, 下载次数: 0)
13:55 上传
本人是代码小白，只会照搬，然后就搬成上图这样了，囧！&&
求教：&&第一问，如图 轮播的大图和小图&&我不知道哪些是大图的图片链接地址，哪些是小图的 所以是一顿瞎放的！
第二问：我在上面代码中标记处红色的 800px的 地方 是因为我做的图片高度是800的& &然后我就不知道要修改哪里的代码 才能让图片完整在轮播里
显示&&所以把height 550都改成了800& &图片是显示全了&&但是和下面的板块就叠到一起去了&&
主要是想问下&&如果只是要把轮播的高度 和图片尺寸对应 是需要修改代码里面的哪一段或者几段&&height 的代码？
然后修改哪段代码可以修改和下面板块之间的间隙？& &急！！！！！
求大神帮忙指点下！！！跪谢！！！
新手刚接触淘宝 还望各路大神多多指教！
TA的每日心情思考 12:02签到天数: 50 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 8803, 距离下一级还需 1197 积分
注册会员, 积分 8803, 距离下一级还需 1197 积分
本帖最后由 不懂就要问 于
14:07 编辑
补充一下&&为啥上面代码里面 有一些代码变成了偷笑的表情·····& &代码原文是字母P
新手刚接触淘宝 还望各路大神多多指教！
TA的每日心情臭美 13:26签到天数: 614 天连续签到: 1 天[LV.9]已臻大成主题帖子积分
阅读权限: 50
高级会员, 积分 147935, 距离下一级还需 352065 积分
高级会员, 积分 147935, 距离下一级还需 352065 积分
TA的每日心情思考 11:14签到天数: 93 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 30
中级会员, 积分 26795, 距离下一级还需 73205 积分
中级会员, 积分 26795, 距离下一级还需 73205 积分
干嘛搞的这么纠结呢 直接在线制作生成不就好了，不会就在线生成
生活有度，人生添寿。
TA的每日心情思考 10:15签到天数: 248 天连续签到: 1 天[LV.8]自成一派主题帖子积分
阅读权限: 30
中级会员, 积分 54757, 距离下一级还需 45243 积分
中级会员, 积分 54757, 距离下一级还需 45243 积分
楼上正解&&我也是代码小白&&在线生成代码&&节约时间&&
坚持坚持就过来
TA的每日心情思考 12:02签到天数: 50 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 8803, 距离下一级还需 1197 积分
注册会员, 积分 8803, 距离下一级还需 1197 积分
楼上正解&&我也是代码小白&&在线生成代码&&节约时间&&
哪里的生成器&&效果呢&&和我现在的一样吗？&&有5图吗？&&下面也有略缩图吗?&&求个地址
新手刚接触淘宝 还望各路大神多多指教！
TA的每日心情思考 12:02签到天数: 50 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 8803, 距离下一级还需 1197 积分
注册会员, 积分 8803, 距离下一级还需 1197 积分
干嘛搞的这么纠结呢 直接在线制作生成不就好了，不会就在线生成
效果和我发的图片一样吗？& &老借助那些软件要是自己要做细节修改就不会弄了~~
新手刚接触淘宝 还望各路大神多多指教！
TA的每日心情思考 12:02签到天数: 50 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 8803, 距离下一级还需 1197 积分
注册会员, 积分 8803, 距离下一级还需 1197 积分
额&&原来论坛还有代码生成的地方&&太犀利了&&这效果&&哇塞！！！必须赞啊！！
新手刚接触淘宝 还望各路大神多多指教！
该用户从未签到主题帖子积分
阅读权限: 20
注册会员, 积分 1347, 距离下一级还需 8653 积分
注册会员, 积分 1347, 距离下一级还需 8653 积分
最好是用在线生成！！
如果实在想自己弄个 我在给你发代码！
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情思考 12:02签到天数: 50 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 8803, 距离下一级还需 1197 积分
注册会员, 积分 8803, 距离下一级还需 1197 积分
最好是用在线生成！！/carousel-ux.html
如果实在想自己弄个 我在给你发代码！
找到了论坛里的生成器 非常好用&&已经弄好了 谢谢前辈！ 请问你那边有首页的轮播下面的那些宝贝展示的代码吗？要宽一点的！
新手刚接触淘宝 还望各路大神多多指教！
淘宝钻级店美工
任职淘宝钻级店铺美工！注意：申请此勋章，需先通过淘宝美工认证！
任职天猫商城美工! 注意：申请此勋章，需先通过淘宝美工认证！
淘宝皇冠店美工
任职淘宝皇冠店铺美工！注意：申请此勋章，需先通过淘宝美工认证！
注册账号后积极发帖的会员
经常帮助其他会员答疑
积极宣传本站，为本站带来更多的用户访问量
经常参与各类话题的讨论，发帖内容较有主见，在线时间达到720小时（30天）
活跃且尽责职守的版主
Powered by