js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法。分享给大家供大家参考。具体实现方法如下：
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<styletype="text/css">
*{margin:0;padding:0;}
.m-slider{width:600px;margin:0auto10px!important;}
#slider{width:100%;overflow:hidden;}
.m-slider.cnt{position:relative;left:0;width:2000%;}
.m-slider.cntli{float:left;width:5%;height:450px;
overflow:hidden;
}
.m-slider.cntimg{
display:block;width:100%;height:450px;
vertical-align:top;
}
.m-slider.cntp{margin:10px0;}
.m-slider.icons{text-align:center;color:#000;
position:relative;z-index:999;margin-top:-20px;
}
.m-slider.iconsspan{
background:#fff;border-radius:5px;
box-shadow:002px#b0b0b0inset;display:inline-block;
height:10px;margin:05px;overflow:hidden;
text-indent:-99em;width:10px;
}
.m-slider.icons.curr{
background:#f80;box-shadow:002px#f60inset
}
</style>
<divclass="m-slider">
<divid="slider">
<ulid="m-slider"class="cnt">
<li><ahref="#1"><imgsrc="images/mofe.jpg"alt=""/></a></li>
<li><ahref="#2"><imgsrc="images/9hll.jpg"alt=""/></a></li>
<li><ahref="#3"><imgsrc="images/p2bb.jpg"alt=""/></a></li>
<li><ahref="#4"><imgsrc="images/3srp.jpg"alt=""/></a></li>
<li><ahref="#1"><imgsrc="images/ft9s.jpg"alt=""/></a></li>
</ul>
</div>
<divid="icons"class="icons"><spanclass="curr">1</span>
<span>2</span><span>3</span><span>4</span><span>5</span>
</div>
</div>
<scripttype="text/javascript">
jQuery(document).ready(function($){
var$slider=$('#m-slider');
var$icons=$('#icons');
var$li=$slider.children('li');
varWIDTH=$li.width();
varSIZE=$li.size();
$slider.append($li.first().clone());
//console.log(WIDTH+'-'+SIZE);
varox,mx,ux,sumx,scroll,i=0,bool=false,staut=true;
$li.find('a').click(function(){
//阻止轮播元素的默认点击事件
returnfalse;
});
$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');
//触发点击事件
}elseif(!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');
});//完成拖拽
}
});
functionsetSlider(){
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');
});//完成拖拽
}
vartimer=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程序设计有所帮助。