轮播图是我们网页上最常见到的效果，尤其要兼容IE8,这时就的考虑兼容了，下面就是我们PC端项目上用到的一个demo,整理了一下，以便择日使用，话不多说，直接上代码。
html
<
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>带左右箭头的轮播图</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/carouse1.css">
</head>
<body>
<!--========================== 4.0大轮播start ===========================-->
<div class="w100">
<div id="lunbo" class="pos1">
<ul id="one">
<li class="on">
<a href="javascript:;">
<img src="img/banner-1.jpg">
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/banner-2.jpg">
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/banner-3.jpg">
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/banner-4.jpg">
</a>
</li>
</ul>
<ul id="two">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!------------------------------------轮播图左右箭头------------------------>
<div class="slider-page">
<a href="javascript:;" id="left">
<</a>
<a href="javascript:;" id="right">></a>
</div>
</div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/carouse1.js"></script>
</body>
</html>
css样式
@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box;}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,a,i,b,em,strong,span,img{padding:0;margin:0; font-size:12px;}
body{font-family: "Microsoft Yahei","微软雅黑",verdana,arial;}
a{text-decoration:none; color: #333;}
a:focus{outline:none;}
li{list-style:none;}
em,i{font-style:normal;}
b,strong{font-weight:normal;}
img{vertical-align:top;}
a img{ border:none;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:'';display:block;clear:both;visibility:hidden;height:0;}
.clearfix{zoom:1}
a:hover{
text-decoration: none;
}
.mar0{
margin:0 auto;
}
.pos1{
position:relative;
}
.w100{
width:100%;
}
.h100{
height: 100%;
}
.w1200{
width: 1200px;
}
#lunbo{
width:300px;
height:494px;
margin:30px auto;
}
#one{
width:300px;
height:494px;
overflow:hidden;
}
#one li{
float:left;
width:300px;
height:494px;
display:none;
}
#one li img{
width:100%;
height:100%;
}
#one .on{display:block;}
#two .on{ border:1px solid #801b1f;background:#801b1f;}
#two{
position:absolute;
left:110px;
bottom:20px;
}
#two li{
float:left;
width:10px;
height:10px;
border:1px solid #fff;
background:#fff;
margin-left:10px;
cursor: pointer;
text-align:center;
}
.slider-page{display:none;}
.slider-page a{
display: block;
width: 28px;
height: 62px;
line-height: 62px;
background: rgba(0,0,0,.2);
color: #e64352;
text-align: center;
font-size: 50px;
font-weight: 400;
margin-top: -5px;
font-family: simsun;
}
#left{
position:absolute;
left:5%;
top:215px;
}
#right{position:absolute;
right:5%;
top:215px;
}
#lunbo:hover .slider-page{display:block;}下面是js
$(function () {
//手动控制轮播图
$('#one li').eq(0).show();
$('#two li').mouseover(function () {
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
i = index;
// $('#one li').eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
$('#one li').eq(i).addClass('on').siblings().removeClass('on');
})
var len = $("#two li").length;
//自动播放
var i = 0;
var t = setInterval(move, 4000);
//自动播放核心函数
function move() {
i++;
if (i == len) {
i = 0;
}
$('#two li').eq(i).addClass('on').siblings().removeClass('on');
// $('#one li').eq(i).fadeIn(300).siblings().fadeOut(300);
$('#one li').eq(i).addClass('on').siblings().removeClass('on');
}
//向右播放核心函数
function moveL() {
i--;
if (i == -1) {
i = len - 1;
}
$('#two li').eq(i).addClass('on').siblings().removeClass('on');
// $('#one li').eq(i).fadeIn(300).siblings().fadeOut(300);
$('#one li').eq(i).addClass('on').siblings().removeClass('on');
}
$('#left').click(function () {
moveL();
})
$('#right').click(function () {
move();
})
//鼠标移入移除
$('#lunbo').hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move, 4000);
})
})再引入jquery-3.1.1.js就可以看到效果啦。
主要用到：定时器setInterval，记得用完定时器要清除定时器clearInterval,再就是计算图片左移。右移的个数，可以用index
下面是一个效果的截图，可以参考一下：
