本文的实例描述了jQuery左右滚动支持图像缩略图的轮播效果。 分享给大家参考。 具体情况如下。
它基于jQuery实现的左右滚动，支持图像放大缩略图的圆盘传送带效果。 在支持常用的jQuery图像左右轮播效果的同时，支持下方缩略图的左右滚动展示。 单击大图像可支持放大效果。
运行效果图------- -看效果
提示：如果浏览器无法正常工作，请尝试切换浏览模式。
为大家分享的jQuery左右滚动支持图片放大缩略图传送带效果代码如下
jQuery左右滚动支持图片放大缩略图传送带代码*{ margin:0； 垫：0； list-style:none； }
img{ border:0； }
. ban{ width:500px； height:600px； 定位：关系； overflow :隐藏； 边距：40 px auto0auto； }
. ban2{ width:500px； height:500px； 定位：关系； overflow :隐藏； }
. ban2 ul{ position:absolute； left:0； top:0； }
. ban2 ul li{ width:500px； height:500px； }
. prev{ float:left； cursor:pointer； }
. num{ height:82px； overflow :隐藏； width:430px； 定位：关系； 浮动：左； }
. min_pic{ padding-top:10px； width:500px； }
. num ul{ position:absolute； left:0； top:0； }
. num ul li{ width:80px； height:80px； 边距-右：5 px； padding:1px； }
. num ulli.on { border :1 pxsolidred； 垫：0； }
. prev_btn1{ width:16px； 文本照明3360中心； height:18px； 边距-顶部：40 px； 边距-右：20 px； cursor:pointer； 浮动：左； }
. next_btn1{ width:16px； 文本照明3360中心； height:18px； 边距-顶部：40 px； cursor:pointer； 浮动：右； }
. prev1{ position:absolute； top:220px； left:20px； width:28px； height:51px； z-index:9； cursor:pointer； }
. next1{ position:absolute； top:220px； right:20px； width:28px； height:51px； z-index:9； cursor:pointer； }
. mhc{ background:#000； width:100%； opacity:0.5； -moz-opacity:0.5； 过滤器：阿尔法(Opacity=50 )； 定位：助手； left:0； top:0； 显示： none； }
. pop_up{ width:500px； height:500px； padding:10px； background:#fff； 定位：固定； -定位：校准； left:50%； top:50%； 边距左边缘：-255 px； 边距最大：-255 px； 显示： none； z-index:99； }
. pop_up_xx{ width:40px； height:40px； 定位：助手； top:-40px； right:0； cursor:pointer； }
. pop_up2{ width:500px； height:500px； 定位：关系； overflow :隐藏； }
. pop_up2{ width:500px； height:500px； 定位：关系； overflow :隐藏； 浮动：左； }
. pop _ up2ul { position : absolute； left:0； top:0； }
. pop_up2 ul li{ width:500px； height:500px； 浮动：左； }
jq () #demo1).banqh({ ) )。
box:'#demo1'，//总框架
pic:'#ban_pic1 '，//大框架
pnum:'#ban_num1'，//出图帧
prev_btn:'#prev_btn1'，//出图左箭头
next_btn:'#next_btn1'，//出图右箭头
pop_prev:'#prev2'，//弹出框中的左箭头
pop_next:'#next2'，//弹出右箭头
prev:'#prev1'，//大图左箭头
next:'#next1'，//大图右箭头
pop_div:'#demo2'，//弹出型框架
pop_pic:'#ban_pic2'，//弹出帧图像帧
pop_xx:'.pop_up_xx '，关闭弹出按钮
mhc:'.mhc '，//朦胧灰层
autoplay:true，//是否自动播放
interTime:5000，//图像自动切换间隔
delayTime:400，//切换一张图像的时间
pop_delayTime:400，//在弹出框中切换一张图像的时间
订单：0，//当前显示的图像(从0开始)
picdire:true，//大屏幕滚动方向(true为水平滚动) ) ) ) ) ) ) ) ) ) ) )。
mindire:true，//图的滚动方向(true为水平滚动) ) ) ) ) ) ) )。
min_picnum:5，//绘图显示数
pop_up:true//大图中有弹出框吗
() )