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的IE和Firefox兼容性汇编
Jul 01 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
javascript中如何判断类型汇总
May 14 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
php面向对象重点知识分享
2019/09/27 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
python解决字符串倒序输出的问题
2018/06/25 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python如何变换环境
2020/07/21 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
广告学专业推荐信范文
2013/11/23 职场文书
新教师培训心得体会
2014/09/02 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android