拖动鼠标滚动的图片轮播JS插件_滚动轮播_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

拖动鼠标滚动的图片轮播JS插件

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-06-15 19:52:23 去下载去预览

特效介绍

鼠标拖动滚动的图片轮播

鼠标拖动图片滚动的jquery图片轮播插件。运行下面的代码查看效果：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>鼠标拖动滚动的图片轮播 - 我爱模板网 www.5imoban.net</title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.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> </head> <body> <div class="m-slider"> <div id="slider"> <ul id="m-slider" class="cnt"> <li><a href="#1"><img src="http://bbs.blueidea.com/data/attachment/album/201403/20/123059dyauyorfmenymofe.jpg" alt="" /></a></li> <li><a href="#2"><img src="http://www.5imoban.net/uploads/allimg/150413/1FI02522-1.jpg" alt="" /></a></li> <li><a href="#3"><img src="http://www.5imoban.net/uploads/allimg/150413/1FI0GI-2.jpg" alt="" /></a></li> <li><a href="#4"><img src="http://www.5imoban.net/uploads/allimg/150413/1FI013B-3.jpg" alt="" /></a></li> <li><a href="#1"><img src="http://www.5imoban.net/uploads/allimg/150413/1FI012D-4.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> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

见上面的运行代码区域。