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与CSS复习(二)
Jun 29 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
浅谈JavaScript作用域
Dec 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
Python抽象类的新写法
2015/06/18 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
用Python写一个自动木马程序
2019/09/17 Python
python打包成so文件过程解析
2019/09/28 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
施工材料员岗位职责
2014/02/12 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
结婚周年感言
2014/02/24 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL