communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

Le défilement gauche et droit de jQuery prend en charge l'agrandissement de l'image miniature du code du carrousel Sharing_jquery

WBOY
Libérer： 2016-05-16 15:42:38
original
1622 Les gens l'ont consulté

L'exemple de cet article décrit comment le défilement gauche et droit de jQuery prend en charge l'agrandissement de l'image et l'effet carrousel d'images miniatures. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un défilement gauche et droit basé sur jQuery qui prend en charge l'amplification d'image et les effets de carrousel d'image miniature. Il prend en charge les effets d'amplification après. en cliquant sur une grande image.
Exécution des rendus : ----------------------------------------------- -------------------------------------------------- ---------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.

Le défilement gauche et droit jQuery que j'ai partagé avec vous prend en charge l'agrandissement de l'image, le code de l'effet carrousel des images miniatures est le suivant 



<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>
Copier après la connexion
Ce qui précède est le code d'effet de carrousel d'image miniature d'agrandissement d'image de support de défilement gauche et droit jQuery partagé avec vous. J'espère que vous pourrez l'aimer.

Étiquettes associées：
jquery缩略图轮播 jquery带缩略图的轮播 jquery轮播图片滚动 jquery图片轮播 jquery横向滚动
source：php.cn
Article précédent：js réalise l'image de focus de la bannière qui commute trois images (textes) ensemble_javascript skills Article suivant：JS obtient les valeurs des paramètres dans l'URL en fonction de la valeur clé et convertit les paramètres de l'URL en compétences json objects_javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1841
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2009
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1695
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1595
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1613
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal