php轮播图代码_js如何实现轮播图播放效果（附代码）

本篇文章给大家带来的内容是关于js如何实现轮播图播放效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。

实现效果如下：(图片来自网络)

实现功能如下：鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。

点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6

点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3

间隔2000ms自动播放(包括图片、数字、缩略图)。

根据前面运动知识，实现代码如下：

我们把前面总结的运动框架封装在move.js中

轮播图

*{

margin: 0;

padding: 0;

}

#switch{

width: 1400px;

height: 520px;

margin:auto;

position: relative;

overflow: hidden;

}

#switch .bigpic li{

position: absolute;

top: 0;

left: 0;

}

#switch .bigpic li:nth-child(1){

z-index: 2;

}

#switch .prev{

width: 46px;

height: 46px;

line-height: 46px;

color: #fff;

border-radius: 100%;

background: rgba(255,255,255,0.6);

position: absolute;

top:192px;

left: 20px;

border-width: 0;

filter:alpha(opacity:0);

opacity:0;

z-index: 999;

}

#switch .next{

width: 46px;

height: 46px;

line-height: 46px;

color: #fff;

border-radius: 100%;

background: rgba(255,255,255,0.6);

position: absolute;

top:192px;

right: 20px;

border-width: 0;

filter:alpha(opacity:0);

opacity:0;

z-index: 9999;

}

#switch .number{

p