Home > Article > Web Front-end > jQuery left and right scrolling supports image enlargement thumbnail image carousel code sharing_jquery
jQuery left and right scrolling supports image enlargement thumbnail image carousel code sharing_jquery
- WBOYOriginal
- 2016-05-16 15:42:381588browse
The example in this article describes how jQuery left and right scrolling supports image enlargement, thumbnail image carousel effect. Share it with everyone for your reference. The details are as follows:
This is a jQuery-based left and right scrolling that supports image amplification and thumbnail image carousel effects. It is a commonly used jQuery image left and right carousel effect. It also supports left and right scrolling display of bottom thumbnails. It supports amplification effects after clicking on a large picture.
Running renderings: ----------------------------------------------------------------------------------------------------------------
Tips: If the browser does not work properly, you can try switching the browsing mode.
<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>
The above is the jQuery left and right scrolling support image enlargement thumbnail image carousel effect code shared with you. I hope you can like it. Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js realizes the banner focus picture that switches three pictures (texts) together_javascript skillsNext article：js realizes the banner focus picture that switches three pictures (texts) together_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills