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:Div层拖动效果实例代码
Aug 06 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
vue v-on监听事件详解
May 17 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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脚本
2006/11/26 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php获取错误信息的方法
2015/07/17 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
javascript中call()、apply()的区别
2019/03/21 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python实现Floyd算法
2018/01/03 Python
Python制作动态字符图的实例
2019/01/27 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
pandas 对group进行聚合的例子
2019/12/27 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
技校生自我鉴定
2013/12/08 职场文书
研修第一天随笔感言
2014/02/15 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
门店业绩提升方案
2014/06/08 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
Python实现位图分割的效果
2021/11/20 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python