jQuery 实现轮播（初始 + 升级 + 插件推荐）_cai niaoyihao_

网络 02-07 1547

目录内容介绍一、初级轮播1、效果图2、实现代码二、升级轮播1、效果图2、实现代码插件推荐1、插件介绍2、相关网址

内容介绍

??jQuery 实现轮播（初始 + 升级 + 插件推荐）。

一、初级轮播 1、效果图

👇 👇 👇 👇 👇

2、实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <title>升级轮播</title> <style> * { margin: 0; padding: 0; } ul, ol, li { list-style: none } .slider-wrapper { width: 500px; height: 300px; overflow: hidden; margin: 50px auto; position: relative; border: 1px solid #ccc; } .slider-content { width: 2500px; height: 100%; } .slider-content>li { width: 500px; height: 300px; float: left; font-size: 100px; line-height: 300px; text-align: center; font-weight: bold; } .slider-content>li.one { background-color: red; } .slider-content>li.two { background-color: blue; } .slider-content>li.three { background-color: yellow; } .slider-content>li.four { background-color: green; } .slider-content>li.five { background-color: pink; } .nav { width: 50px; height: 50px; background-color: gray; position: absolute; top: 50%; left: 0; margin-top: -25px; cursor: pointer; } .nav-right { left: auto; right: 0; } .slider-nav-wrapper { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%); } .slider-nav-wrapper>li { float: left; margin-right: 10px; width: 20px; height: 20px; border-radius: 50%; background-color: black; cursor: pointer; } .slider-nav-wrapper>li.on { background-color: #fff; } </style> </head> <body> <div class="slider-wrapper"> <ul class="slider-content"> <li index="0" class="one">1</li> <li index="1" class="two">2</li> <li index="2" class="three">3</li> <li index="3" class="four">4</li> <li index="4" class="five">5</li> </ul> <ol class="slider-nav-wrapper"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ol> <div class="nav-wrapper"> <div class="nav nav-left"></div> <div class="nav nav-right"></div> </div> <script> let width = $('.slider-content > li').width() let $imgWrapper = $('.slider-content'); function init() { initEvent() } function initEvent() { $('.nav').on('click', onNavClick) $('.slider-nav-wrapper').on('click', 'li', onSliderNavWrapperClick) } function onSliderNavWrapperClick() { if ($(':animated').length > 0) { return } let $tmp = $imgWrapper.find('li:first').clone() let newIndex = $(this).index() let oldIndex = $imgWrapper.find('li:first').attr('index') if (newIndex > oldIndex) { for (let i = 0; i < newIndex - oldIndex; i++) { $imgWrapper.append($imgWrapper.find('li:first')) } $imgWrapper .prepend($tmp) .animate({ 'margin-left': -width }, 500, function() { $(this) .find('li:first') .remove() .end() .css('marginLeft', 0) changeIconColor() }) } else if (newIndex < oldIndex) { for (let i = 0; i < oldIndex - newIndex; i++) { $imgWrapper.prepend($imgWrapper.find('li:last')) } $imgWrapper .find('li:first') .after($tmp) .end() .css('marginLeft', -width) .animate({ 'marginLeft': 0 }, 500, function() { $tmp.remove() changeIconColor() }) } } function onNavClick() { let $this = $(this) if ($(':animated').length > 0) { return } if ($this.hasClass('nav-right')) { $('.slider-content').animate({ 'margin-left': -width }, 500, function() { $(this) .css('marginLeft', 0) .append($(this).find('li:first')) changeIconColor() }) } else { $('.slider-wrapper ul') .prepend($('.slider-wrapper ul>li:last')) .css({ 'marginLeft': -width }) .animate({ 'marginLeft': 0 }, 500, function() { changeIconColor() }) } } function changeIconColor() { let currIndex = $imgWrapper.find('li:first').attr('index') $('.slider-nav-wrapper') .find('li') .eq(currIndex) .addClass('on') .siblings('.on') .removeClass('on') } init() </script> </body> </html> 插件推荐 1、插件介绍

??Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

2、相关网址

swiper中文网：https://·/usage/index.html swiper案例演示：https://·/demo/index.html

标签：jQuery，轮播

更多演示案例，查看案例演示

欢迎评论留言!