js实现使用鼠标拖拽切换图片的方法


Posted in Javascript onMay 04, 2015

本文实例讲述了js实现使用鼠标拖拽切换图片的方法。分享给大家供大家参考。具体实现方法如下:

<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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
Ext 今日学习总结
Sep 19 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
vue中的ref和$refs的使用
Nov 22 Javascript
js实现每日自动换一张图片的方法
May 04 #Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 #Javascript
JavaScript中操作字符串小结
May 04 #Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 #Javascript
javascript多行字符串的简单实现方式
May 04 #Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 #Javascript
js实现兼容IE和FF的上下层的移动
May 04 #Javascript
You might like
php中Snoopy类用法实例
2015/06/19 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
Js切换功能的简单方法
2010/11/23 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
openlayers实现地图弹窗
2020/09/25 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Python实现Linux的find命令实例分享
2017/06/04 Python
利用aardio给python编写图形界面
2017/08/21 Python
基于Django用户认证系统详解
2018/02/21 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python