当前位置: 首页 > >

【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

发布时间:

?


前言


我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~


这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法。


但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~


?



??


效果图


?



?



??


功能描述


1、鼠标按住移动一定距离,内容随之进行切换。


2、开始和结尾处不能再拖动了。


3、下方的控制条随之变换,进行切换指示。


?



??


解决思路


1、利用jQuery监听鼠标移动距离


2、内容浮动排成一列,长度是父容器宽度的3倍


3、当移动距离超过一定长度时,内容移动一倍父容器宽度的距离


4、内容移动通过定位左右移动来实现


5、下方控制条3个小白点是固定的,一个大白点包含一个黑点的整体(即选中点)随内容进行同步移动,来实现视觉上切换指示


?



?


代码演示


1、HTML部分



1


2

3

4