本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
- JS简单的图片放大缩小的两种方法
- JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
- javascript 图片放大缩小功能实现代码
- JS实现图片放大缩小的方法
- js实现用滚动条来放大缩小图片的代码
- js实现图片旋转 js滚动鼠标中间对图片放大缩小
- js实现图片缓慢放大缩小效果
- js实现图片放大缩小功能后进行复杂排序的方法
- 原生js实现图片放大缩小计时器效果
- 原生JS实现拖拽图片效果
- JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
- JavaScript实现图片的放大缩小及拖拽功能示例
