注册 | 登陆

您的位置：阿里西西 > 网页特效 > 图像特效 > 详细内容

类似手机左右滑动特效可用鼠标拖拽左右切换图片的特效代码

稿源：互联网 2018-09-03 01:26:32 点击： 11335 撤稿纠错

通过JQUERY实现鼠标拖拽切换图片特效，运行代码试试效果吧！

以下讨论的是和JQUERY 鼠标拖拽切换图片左右滑动手机相关的类似手机左右滑动特效可用鼠标拖拽左右切换图片的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<script type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.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="http://js.alixixi.com/uploadpic/201809030125041987.jpg" alt="" /></a></li>
<li><a href="#2"><img src="http://js.alixixi.com/uploadpic/201809030125137117.jpg" alt="" /></a></li>
<li><a href="#3"><img src="http://js.alixixi.com/uploadpic/201809030125208079.jpg" alt="" /></a></li>
<li><a href="#4"><img src="http://js.alixixi.com/uploadpic/201809030125294609.jpg" alt="" /></a></li>
<li><a href="#1"><img src="http://js.alixixi.com/uploadpic/201809030125363052.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>

关于类似手机左右滑动特效可用鼠标拖拽左右切换图片的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090394519.shtml方便下次再访问哦。

·上一篇： JQUERY实现的简单按钮轮换选中特效
·下一篇： 跟随鼠标移动立体翻转的JS图片展示效果特效

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻