g改造轮播图1：https://www.cnblogs.com/huanghuali/p/8677338.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>轮播图</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/lunbo.js"></script> -->
<style type="text/css">
*{
margin: 0;
padding: 0;
} body {
font-size: 14px;
line-height: 1.5;
font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun';
color: #666;
background-color: #fff
} img {
border: 0;
} a {
text-decoration: none;
color: #666;
} .wrapper_lb {
position: relative;
width: 640px;
height: 480px;
} .lb_pic_list a {
position: absolute; display: block;
} .lb_pic_list a img {
width: 640px;
height: 480px;
display: block;
} .arrow_left {
position: absolute;
top: 50%;
margin-top: -18px;
left: 10px;
background: red;
width: 80px; height: 30px;
color: #fff;
} .arrow_right {
position: absolute;
top: 50%;
margin-top: -18px;
right: 10px;
background: red;
width: 80px; height: 30px;
color: #fff;
}
.scoll_dot{ overflow: hidden; text-align: center; position: absolute; bottom:0; z-index: 9; }
.scoll_dot i{ width: 16px; height: 6px; background: blue; margin:0 3px; display: inline-block; cursor: pointer;}
.scoll_dot .active{ background-color: red }
</style>
</head> <body>
<div class="wrapper_lb">
<div class="lb_pic_list" id="scrollWrap">
<a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a30eb359a.jpg" alt="1"></a>
<a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a2bd253bd.jpg" alt="2"></a>
<a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a321a708b.jpg" alt="3"></a>
</div>
<div class="scoll_dot J_bannerPage"></div>
<div class="arrow_left J_arrow">向左</div>
<div class="arrow_right J_arrow">向右</div>
</div>
<script type="text/javascript">
$(function() {
var index = 0;
var timer;
//获取id为scrollWrap 所有的img
var imgList = $('#scrollWrap .J_pic');
//img的个数
var imgNum = imgList.length;
if(imgNum>1){
//第一张图显示
$('.J_pic').eq(0).show().siblings().hide(); $('.J_pic').mouseover(function(){
clearInterval(timer); //鼠标经过停止自动播放
});
$('.J_pic').mouseout(function(){
showTime(); //鼠标离开继续自动播放
});
//点击向左按钮
$('.arrow_left').click(function() {
clearInterval(timer);
if (index == 0) {
index = imgNum;
} index--;
showBg();
showTime();
}); //点击向右按钮
$('.arrow_right').click(function() {
clearInterval(timer);
if (index == imgNum - 1) {
index = -1;
} index++;
showBg();
showTime();
});
// 填充分页
var bPage=$(".wrapper_lb").find('.J_bannerPage');
var html='';
for(var i=0,max=imgNum;i<max;i++){
html+=(i==0)?'<i class="active"></i>':'<i></i>';
}
bPage.append(html);
// //鼠标点击分页
bPage.children('i').on('click',function(){ index=$(this).index();
showBg();
}) function showBg() {
$('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);
bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');
} function showTime() {
timer = setInterval(function() {
index++;
// if (index == imgNum) {
// index = 0;
// }
index=(index==imgNum)?0:index;
showBg();
}, 2000);
}
//自动播放图片
showTime();
}
});
</script>
</body> </html>