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 相关文章推荐
JavaScript 原型与继承说明
Jun 09 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JS中多层次排序算法的实现代码
Jan 06 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仿盗链代码
2012/06/03 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python3+PyQt5使用数据库表视图
2018/04/24 Python
便捷提取python导入包的属性方法
2018/10/15 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python程序封装为win32服务的方法
2021/03/07 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
销售总监岗位职责
2014/01/04 职场文书
十佳护士获奖感言
2014/02/18 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
党员自我评价2015
2015/03/03 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年司法所工作总结
2015/04/27 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android