首页
所有分类
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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
element跨分页操作选择详解
Jun 29 Javascript
js实现验证码干扰（动态）
Feb 23 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
i5 9400(1) DE1102(1) ICOM(2) GTX1660(1) 对讲机(1) R71E(1) React(6) i7 6700(1) 胆机(1) R72E(1)
You might like
晶体管来复再生式二管收音机
2021/03/02 无线电
关于页面优化和伪静态
2009/10/11 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Yii框架form表单用法实例
2014/12/04 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）
2016/08/11 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
vue中echarts3.0自适应的方法
2018/02/26 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
java判断三位数的实例讲解
2019/06/10 Python
django框架model orM使用字典作为参数，保存数据的方法分析
2019/06/24 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python ORM编程基础示例
2020/02/02 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
澳大利亚工具仓库：Tools Warehouse
2018/10/15 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
慰问信模板
2015/02/14 职场文书
结婚保证书（卖身契）
2015/02/26 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python