本文实例为大家分享了jquery插件实现轮播图的具体代码，供大家参考，具体内容如下
轮播图的实现（jquery插件）
需要引入jquery插件，去jquery官网搜索
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
title Document /title
style
margin: 0;
padding: 0;
list-style: none;
img {
display: block;
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
overflow: hidden;
.slider li {
position: absolute;
display: none;
.slider li:first-child {
display: block;
/*文字部分的样式*/
.slider li p {
position: absolute;
width: 100%;
padding: 10px 0;
text-indent: 2em;
background-color: rgba(0, 0, 0, .6);
bottom: 0;
left: 0;
font-size: 18px;
/*给文字设置位移到底部去*/
transform: translate3d(0, 100%, 0);
/*添加过渡*/
transition: all .8s;
/*当前展示li 下的文字样式*/
.slider li.current p {
/*文字位移到0的位置，正常显示*/
transform: translate3d(0, 0, 0);
.slider li a {
color: #fff;
.arrow {
display: none;
.slider:hover .arrow {
display: block;
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
.arrow-left {
left: 0;
.arrow-right {
right: 0;
/style
/head
body
div
a href="#"
img src="image/1.jpg" alt=""
p 这是第1张图片的文字说明 /p
/li
a href="#"
img src="image/2.jpg" alt=""
p 这是第2张图片的文字说明 /p
/li
a href="#"
img src="image/3.jpg" alt=""
p 这是第3张图片的文字说明 /p
/li
a href="#"
img src="image/4.jpg" alt=""
p 这是第4张图片的文字说明 /p
/li
a href="#"
img src="image/5.jpg" alt=""
p 这是第5张图片的文字说明 /p
/li
a href="#"
img src="image/6.jpg" alt=""
p 这是第6张图片的文字说明 /p
/li
a href="#"
img src="image/7.jpg" alt=""
p 这是第7张图片的文字说明 /p
/li
a href="#"
img src="image/8.jpg" alt=""
p 这是第8张图片的文字说明 /p
/li
/ul
!--箭头--
div
span /span
span /span
/div
/div
script src="../jquery-2.2.4.js" /script //jquery插件
script
//1、定义一个索引，且设置第一张图片为默认
var index = 0;
$('ul li').eq(index).addClass('current').siblings().removeClass('current');
//2、右边按钮的点击
$('.arrow-right').click(function(){
index++;
//判断图片是否超过最后一张，则重新赋值
if(index == $('ul li').length){
index = 0;
showImage();
左边按钮的实现
$('.arrow-left').click(function(){
index--;
if(index 0) index = $('ul li').length - 1;
showImage()
function showImage(){
$('ul li').eq(index).addClass('current').fadeIn().siblings().removeClass('current').fadeOut();
//实现自动轮播
var times = '';
//鼠标移入停止播放
$('.slider').mouseover(function(){
clearInterval(times)
//鼠标移出，停止
$('.slider').mouseout(function(){
times = setInterval(function(){
$('.arrow-right').click();
},3000)
$('.slider').mouseout();
/script
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。
