jQuery实现轮播地图的源代码

本文的例子分享了jQuery实现轮播显示的具体代码，供大家参考。具体内容如下

设计：

从上图中可以看出，转盘需要以下元素：外盒div、放置图片集的盒子ul、放置两侧按钮的盒子div以及较低顺序的按钮div

源代码如下：

1.html源代码如下：

div class=' outer ' ul class=' img ' liaimg src=' http :/static/img/1 . jpg '/a/Li liaimg src=' http :/static/img/2 . jpg '/a/Li liaimg src=' http :/static/img/3 . jpg '/a/Li liaimg src=' http :/static/img/4 . jpg '/a/Li/ul ul class=' num ' Li class=' current ' 1/Li Li 2/Li Li/Li Li/ul div class=' left _ btnbtn '/div class=' right _ btnbtn '/div/div II。css样式实现：

样式/*删除默认浏览器样式*/* { margin : 0；padd : 0；}/*删除li标签的默认样式*/Li { list-style : none；}/*最外层盒子样式的处理：1。设置为与轮播图的高度和宽度一致；2.设置为从顶部垂直50px，水平居中；3.将自身设置为固定位置*/。外部{ height: 470px宽度： 590 px；margin: 50px自动；位置：相对；}/*旋转图片采集处理： 1。将其设置为与文档流2分离。将其设置为0 */。img李{位置：绝对；top : 0；left : 0；}/*顺序按钮区域处理：1。设置文档流；2.设置文本对齐方式和宽度，使其水平居中；3.将底部距离设置为20px */。num {position :绝对值；文本对齐：中心；宽度： 100%；bottom: 20px}/*顺序按钮处理： 1。将其设置为行级和块级兼容显示器2。将其宽度和高度设置为3。设置背景颜色和字体颜色4。将字体水平居中设置为5。通过将行高设置为与高度6一致，使其字体垂直居中。将其样式设置为圆形7。增加左右按钮之间的距离*/。numli { display : inline-block；宽度： 20px；height: 20px背景-颜色：深灰色；color:白色；文本对齐：中心；线高： 20px；边界半径：50%；margin: 0 20px}/*左右按钮相同部分处理：1.将它们从文档流中分离出来。2.设定它们的宽度和高度。3.设置背景颜色和字体颜色。4.将字体设置为水平居中。5.将行高设置为与高度一致，使其字体垂直居中。6.设置顶部和页边距顶部，使其整体垂直居中。7.不要显示* */。btn{ position:绝对默认宽度： 20px；高度： 50px；背景-颜色：深灰色；color:白色；文本对齐：中心；线高： 50px；top : 50%；边距-top :-25px；display:无；}/*左按钮处理：将左侧设置为0 */。left _ BTN { left : 0；}/*右键处理：将右键设置为0 */。right _ BTN { right : 0；}/*当鼠标悬停在转盘区域时，左右按钮被处理：1.将左右按钮的显示样式设置为行级和块级兼容。2.将鼠标放在左右按钮上时，将样式设置为小手*/。外层3360盘旋。BTN {显示器：内嵌块；cursor:指针；}/*设置订单按钮。初始按钮样式：设置为红色(由于样式级别的问题，设置无效，可以通过两种方式解决：1。添加！重要2。详细写css定位，比如：outer.num.current {.) */.当前{背景色：红色！重要；} /style iii。JQuery实现：

脚本src=' http:/static/jquery-3 . 3 . 1 . min . js '/script script/*定义位置：由于图片数量与下方顺序按钮数量一致，可以通过位置*/var index=0进行关联；/*当鼠标放在序列按钮上时：1。将当前序列按钮的样式添加到红色背景2。移除相同级别3的其他相邻元素的红色背景样式。获取当前序列按钮4的索引。通过索引5获取此位置的图片。一秒钟内淡入画面。一秒钟内淡出其他相邻图片。防止效果因移动过快而闪烁。请使用stop方法*/$('。numli ')。mousemove(函数(){$ (this))。addclass ('current ')。兄弟姐妹()。remove class(' current ')；index=$(this)。index()；$('.img Li’)。eq(指数)。停止()。法丁(1000)。兄弟姐妹()。停止()。fade out(1000)；});/*每秒设置自动转盘：1。获取当前岗位序号：自增操作；当超过图片的最大序列号时，序列号被设置为0。2.设置下部顺序按钮和转盘显示*/vartime=setinterval(移动，1000)；函数move(){ index；if (index==4){ index=0 } $('。num Li’)。eq(指数)。addClass('current ')。兄弟姐妹()。removeClass('当前')；$('.img Li’)。eq(指数)。停止()。法丁(1000)。兄弟姐妹()。停止()。fade out(1000)；};/*当鼠标点击或标记转盘区域时：1。点击进入时停止自动转盘；2.标记*/$('时继续自动旋转。外’)。hover(function(){ clear interval(time))；}，function(){ time=setInterval(move，1000)；});/*执行*/$('。右_ BTN’)。单击(function(){ move()；});/* execute */function moveL(){ index-；if (index==-1){ index=3 } $('。num Li’)。eq(指数)。addClass('current ')。兄弟姐妹()。removeClass('当前')；$('.img Li’)。eq(指数)。停止()。法丁(1000)。兄弟姐妹()。停止()。fade out(1000)；} $('.left _ BTN’)。单击(function(){ moveL()；});/script完整源代码下载：jQuery轮播源代码

有关旋转木马效果的更多主题，请点击以下链接查看研究

javascript图片轮播效果总结

jquery图片轮播效果总结

引导转盘特效摘要

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。