首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery左右滚动支持图片放大缩略图图片轮播代码分享

Posted in Javascript onAugust 26, 2015

本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果，常用的jQuery图片左右轮播效果，同时支持底部缩略图左右滚动展示，点击大图片后支持放大效果。

运行效果图：                                     -------------------查看效果-------------------

jQuery左右滚动支持图片放大缩略图图片轮播代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery左右滚动支持图片放大缩略图图片轮播效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右滚动支持图片放大缩略图图片轮播代码</title>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js" ></script>
<!--[if IE 6]> 
<script src="js/iepng.js" type="text/javascript"></script> 
<script type="text/javascript">
 EvPNG.fix('div, ul, img, li, input,a,span'); 
</script>
<![endif]-->
</head>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.ban{ width:500px; height:600px; position:relative; overflow:hidden;margin:40px auto 0 auto;}
.ban2{ width:500px; height:500px; position:relative; overflow:hidden;}
.ban2 ul{ position:absolute; left:0; top:0;}
.ban2 ul li{ width:500px; height:500px;}
.prev{ float:left; cursor:pointer;}
.num{ height:82px;overflow:hidden; width:430px; position:relative;float:left;}
.min_pic{ padding-top:10px; width:500px;}
.num ul{ position:absolute; left:0; top:0;}
.num ul li{ width:80px; height:80px; margin-right:5px; padding:1px;}
.num ul li.on{ border:1px solid red; padding:0;}
.prev_btn1{ width:16px; text-align:center; height:18px; margin-top:40px; margin-right:20px; cursor:pointer; float:left;}
.next_btn1{ width:16px; text-align:center; height:18px; margin-top:40px;cursor:pointer;float:right;}
.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;filter:alpha(Opacity=50); position:absolute; left:0; top:0; display:none;}
.pop_up{ width:500px; height:500px; padding:10px; background:#fff; position:fixed; -position:absolute; left:50%; top:50%; margin-left:-255px; margin-top:-255px; display:none; z-index:99;}
.pop_up_xx{ width:40px; height:40px; position:absolute; top:-40px; right:0; cursor:pointer;}
.pop_up2{ width:500px; height:500px; position:relative; overflow:hidden;}
.pop_up2{ width:500px; height:500px; position:relative; overflow:hidden; float:left;}
.pop_up2 ul{ position:absolute; left:0; top:0;}
.pop_up2 ul li{ width:500px; height:500px; float:left;}
</style>
<body>
<!-- 代码begin -->
<div class="ban" id="demo1">
 <div class="ban2" id="ban_pic1">
 <div class="prev1" id="prev1"><img src="images/index_tab_l.png" width="28" height="51" alt=""/></div>
 <div class="next1" id="next1"><img src="images/index_tab_r.png" width="28" height="51" alt=""/></div>
 <ul>
 <li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
 </ul>
 </div>
 <div class="min_pic">
 <div class="prev_btn1" id="prev_btn1"><img src="images/feel3.png" width="9" height="18" alt=""/></div>
 <div class="num clearfix" id="ban_num1">
 <ul>
 <li><a href="javascript:;"><img src="images/s1.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s2.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s3.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s4.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s5.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s1.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s2.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s3.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s4.jpg" width="80" height="80" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/s5.jpg" width="80" height="80" alt=""/></a></li>
 </ul>
 </div>
 <div class="next_btn1" id="next_btn1"><img src="images/feel4.png" width="9" height="18" alt=""/></div>
 </div>
</div>

<div class="mhc"></div>

<div class="pop_up" id="demo2">
 <div class="pop_up_xx"><img src="images/chacha3.png" width="40" height="40" alt=""/></div>
 <div class="pop_up2" id="ban_pic2">
 <div class="prev1" id="prev2"><img src="images/index_tab_l.png" width="28" height="51" alt=""/></div>
 <div class="next1" id="next2"><img src="images/index_tab_r.png" width="28" height="51" alt=""/></div>
 <ul>
 <li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b1.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b2.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b3.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b4.jpg" width="500" height="500" alt=""/></a></li>
 <li><a href="javascript:;"><img src="images/b5.jpg" width="500" height="500" alt=""/></a></li>
 </ul>
 </div>
</div>
<script src="js/pic_tab.js"></script>
<script type="text/javascript">
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,//弹出框切换一张图片时间
 order:0,//当前显示的图片（从0开始）
 picdire:true,//大图滚动方向（true为水平方向滚动）
 mindire:true,//小图滚动方向（true为水平方向滚动）
 min_picnum:5,//小图显示数量
 pop_up:true//大图是否有弹出框
})
</script>
<!-- 代码end -->
</body>
</html>

精彩专题分享：jQuery图片轮播 JavaScript图片轮播

以上就是为大家分享的jQuery左右滚动支持图片放大缩略图图片轮播效果代码，希望大家可以喜欢。

jQuery左右滚动支持图片放大缩略图图片轮播代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript转换字符串为dom对象（字符串动态创建dom）
May 10 Javascript
javascript实现自动输出文本（打字特效）
Aug 27 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
May 05 jQuery
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 #Javascript
jquery实现的横向二级导航效果代码
Aug 26 #Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 #Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 #Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 #Javascript
javascript中alert()与console.log()的区别
Aug 26 #Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 #Javascript
J2EE面试题(19) 岗位职责(1324) 推荐信(292) SOA面试题(9) 自我鉴定(671) Delphi面试题(13) 自我评价(886) Ruby面试题(15) 求职信(1029) 自荐信(981)
You might like
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）
2016/12/02 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python socket编程实例详解
2015/05/27 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
编辑求职信样本
2013/12/16 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
伦敦奥运会口号
2014/06/13 职场文书
党委班子剖析材料
2014/08/21 职场文书
教学督导岗位职责
2015/04/10 职场文书
干部培训工作总结2015
2015/05/25 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技