Sublime Text
01首先在Sublime Text下面准备一个html和5张，宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >
一、原理
在轮播图数组dataList中，定义一个变量currentIndex = 0表示第一张，默认渲染第一张即dataList[currentIndex]，然后获取每张的下标。点击切换时把当前的下标赋值给currentIndex即可实现切换显示。
二、定义变量
三、模板渲染
四、点击小圆点切换
在li标签里执行一个点击函数，把当前下标值传进来。点击时设置currentIndex的值为当前的下标值。
五、左右按钮切换
定义两个变量作为参数prevIndex和nextIndex，利用计算属性算出当前的上一张或者下一张的下标（加1和减1 *** 作）。
六、定时器切换
定义一个定时器，每X秒执行一次nextIndex()函数即可。
鼠标经过清除定时器就不说了，使用clearInterval(thistimer)就可以了。
七、css样式
1 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。列如 <script type="text/javascript" src="animate-201js"></script>
而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName，然后把需要一个规范的命名。
2 、第二部我们创建一个定时器先让轮播图中所有的 li 动起来
右边点击函数跟定时器所运动的函数一个样，所以我们可以封装一个函数abc（）；他们是共用的；
3 、 写出左边点击按钮事件的函数，这样就如上abc（）；差不多只是修改一些东西就行了；
4 、讲小圆点的样式改变封装成一个函数就是下面的chnage（）；
然后还得监听点击每个小圆点的事件，所以可以用for + onclick 讲每个小圆点点击事件给写出来。
难点：
1 、函数截留，当我们点击函数正在执行时，如果多次点击就会出现运动混乱的现象，这是我们需要用if(picDivisanimated) {return;}，
2 、cloneNode（）函数picUlappendChild(picLi[0]cloneNode(true))工具/材料
Sublime Text
01首先我们需要新建一个HTML5的文档，然后在文档中导入Bootstrap的样式文件，这个文件中包含了轮播图所有的样式定义，如下图所示
02接下来我们需要导入脚本文件，注意先导入Jquery文件，然后导入bootstrap的脚本文件，顺序一定不能颠倒，如下图所示
03然后在body标签里定义轮播图的容器，容器的大小需要和的大小一样，否则会出现轮播图错位，效果如下图所示
04接下来我们就正式的添加轮播图了，这里先添加三张图，如下图所示，注意让哪种轮播图显示直接调用Bootstrap的active样式即可
05轮播添加完毕以后，就可以添加轮播图焦点了。在Bootstrap中运用li列表定义轮播图焦点，注意焦点的数量和的数量要一样，如下图所示
06轮播图中还有一个必不可少的元素就是左右箭头，通过Bootstrap的carousel-control样式添加轮播图箭头，如下图所示
07最后我们运行程序以后，在页面中你就可以看到如下图所示的轮播图效果了。可以看到我们上面说的轮播图焦点和左右箭头都在页面上显示出来了，如下图所示
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）