


méthode js pour utiliser le glisser-déplacer de la souris pour changer de compétences en images_javascript
May 16, 2016 pm 04:01 PML'exemple de cet article décrit la méthode js consistant à utiliser le glisser-déplacer de la souris pour changer d'image. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :
<script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !important;} #slider{width:100%; overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:2000%;} .m-slider .cnt li{float:left;width:5%; height: 450px; overflow: hidden; } .m-slider .cnt img{ display:block;width:100%;height:450px; vertical-align:top; } .m-slider .cnt p{margin:10px 0;} .m-slider .icons{text-align:center;color:#000; position: relative; z-index: 999; margin-top: -20px; } .m-slider .icons span{ background: #fff; border-radius: 5px; box-shadow: 0 0 2px #b0b0b0 inset; display: inline-block; height: 10px; margin: 0 5px; overflow: hidden; text-indent: -99em; width: 10px; } .m-slider .icons .curr{ background:#f80; box-shadow: 0 0 2px #f60 inset } </style> <div class="m-slider"> <div id="slider"> <ul id="m-slider" class="cnt"> <li><a href="#1"><img src="images/mofe.jpg" alt="" /></a></li> <li><a href="#2"><img src="images/9hll.jpg" alt="" /></a></li> <li><a href="#3"><img src="images/p2bb.jpg" alt="" /></a></li> <li><a href="#4"><img src="images/3srp.jpg" alt="" /></a></li> <li><a href="#1"><img src="images/ft9s.jpg" alt="" /></a></li> </ul> </div> <div id="icons" class="icons"><span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script type="text/javascript"> jQuery(document).ready(function($){ var $slider = $('#m-slider'); var $icons = $('#icons'); var $li = $slider.children('li'); var WIDTH = $li.width(); var SIZE = $li.size(); $slider.append($li.first().clone()); //console.log(WIDTH + '-' + SIZE); var ox,mx,ux,sumx,scroll,i=0,bool=false,staut=true; $li.find('a').click(function(){ //阻止轮播元素的默认点击事件 return false; }); $slider.mousedown(function(e){ //鼠标左键轮播区域 if(e.target.tagName == 'IMG' && e.button == 0){ //左键图片 staut = true; //初始化拖拽,状态为true,可以触发点击事件 sumx = 0; //初始化鼠标偏移为0 bool = true; //记录左键状态 ox = e.pageX; //记录鼠标初始坐标 scroll = $slider.parent().scrollLeft(); //记录初始轮播水平滚动偏移 e.preventDefault(); //阻止鼠标点击默认事件 } }); $slider.mousemove(function(e){ //鼠标在轮播区域移动 if(bool){//左键状态 staut = false; //已经拖拽,状态为false,不再触发点击事件 mx = e.pageX; //记录鼠标实时坐标 sumx = ox - mx; //记录鼠标坐标偏移 $slider.parent().scrollLeft(scroll+sumx); } }); $slider.mouseout(function(e){ //鼠标离开轮播区域 if(bool){ //左键状态 staut = true; //已经拖拽,但是离开了轮播区域, //状态为true,可以触发点击事件 bool = false;//释放左键状态 sumx > 0 && i < SIZE && i++;//下一个 sumx < 0 && i > 0 && i--;//上一个 $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){ if(i == SIZE){ i = 0; $slider.parent().scrollLeft(0); } $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr'); });//完成拖拽 } }); $slider.mouseup(function(e){ //鼠标释放,完成click事件 bool = false; //释放左键状态 if(staut && e.button == 0){ //没有拖拽或者拖拽失效,且是左键,触发点击事件 window.location.href = $(e.target).parent().attr('href'); //触发点击事件 }else if(!staut && e.button == 0){ //成功拖拽,且是左键 sumx > 0 && i < SIZE && i++;//下一个 sumx < 0 && i > 0 && i--;//上一个 $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){ if(i == SIZE){ //最后一个 i = 0; $slider.parent().scrollLeft(0);//归位 } $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr'); });//完成拖拽 } }); function setSlider(){ i < SIZE && i++;//下一个 $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){ if(i == SIZE){//最后一个 i = 0; $slider.parent().scrollLeft(0); } $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr'); });//完成拖拽 } var timer = setInterval(function(){ setSlider(); },3000); $slider.hover(function(){ if(timer){ clearInterval(timer); timer = null; } },function(){ timer = setInterval(function(){ setSlider(); },3000); }); $(window).resize(function(){ WIDTH = $li.width(); $slider.parent().scrollLeft(i*WIDTH);//归位 //console.log(WIDTH + '-' + i); }); }); </script>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment utiliser JS et Baidu Maps pour implémenter la fonction Map Pan

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS

Comment utiliser JS et Baidu Maps pour implémenter la fonction de dessin de polygones de carte

Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte

Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte
