如何从网页中抓取这个轮播js代码？

Question

这个百度新闻的首页的右侧是一个轮播，我想从网页上把这个js的轮播代码，拿下来，如何做？

https://news.baidu.com/

鼠标右键----view page sources ---- find in page ---- 输入关键字 小须鲸 ，这样找吗？有点笨拙。

Answer 1

先说一下你这个方法只能作为查找的一个步骤。

首先搞明白轮播图多半是由html/js/css三部分组成的（也有可能大牛写canvas或者纯css，我们就不讨论）。但是我们无法知晓js和css是不是通过外部链接引入的，所以光从源代码里是可能找不到完整的轮播效果的代码。即使代码是直接写在HTML中，也有可能是压缩混淆过的，你不知道哪段代码是轮播的。

如果你是有经验的前端，那么审查一下元素，通过class或者一些标识就能知道用的什么第三方库。我们就假设什么都不知道，如何从零开始查找。

讲一下我的查找步骤，可能不是最方便的，但是确实有用的（其实这个方法对于一些看上去是用第三方库实现的效果都行得通）：

1.首先我们右键审查元素，定位到DOM结构中。查找轮播图的class或者id，这两个标识的值是最有可能出现在源代码中的，并且class的值普遍是比较通用的，可能会作为前缀出现多次。因为一般的轮播图都需要通过id或者class来进行DOM操作。这里发现imgview这个标识还有imgplayer这两个标识是比较可能作为JS操作元素的，imgplayer作为前缀出现了多次。(其实这一步你用“小鲸鱼”去找本质上也是一个意思，就是找js中是否出现了这个关键词，运气好的好可能更快)

2.然后我们直接ctrl+f搜索这个关键词，一直回车，找到除了html里，js和css是否存在这些关键词。发现js里确实存在，并且它引入了base.js和ContentPlayer.js文件。说明这个轮播效果是依赖这两个js文件的。所以目前你需要这段js代码，同时还需要把那两个js文件也扒下来。（如果这一步在js代码中不存在关键词，那么多半就是通过script标签引入的js里了，就从引入的js去找）

3.目前来看js应该是搞定了，还差个css样式，我们就直接回到刚刚审查元素那里，看下右侧样式是由哪些地方引入的即可。发现有focustop_415cfee.css和module_static_include_130fb43.css。直接点击就可以打开源码。

至此基本上这个轮播图依赖的js和css就找全了，但是如果你想拿过去实现同样的效果，可能还没这么简单。

Answer 2

大概率扒不下来
下面这段代码实现的轮播
你咋抄?起码还得装个require吧

Answer 3

直接用 swiper.js 不香吗，为啥要直接扒代码，找起来麻烦不说，可能还扒不完整然后导致出现BUG。

Swiper使用方法 - Swiper中文网

Answer 4

按F12，点击如图所示图标，移到你要定位的元素，点一下就自动定位到该元素代码