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>
Quick shutdown shortcut key
What are the uses of mysql
The specific process of connecting to wifi in win7 system
How to configure jsp virtual space
Solution to the problem of downloading software and installing it in win11
Why does the printer not print?
The meaning of European and American website construction
How to open ramdisk
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
