实现后的效果 
html
<!DOCTYPE html>
<!--声明 本页面语言为中文-->
<html lang="en">
<head>
<!--使用编码为 utf-8 -->
<meta charset="UTF-8">
<title>固定尺寸 轮播图</title>
<!--全局初始化样式-->
<link rel="stylesheet" href="css/css.css">
<!--轮播图样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="lunbo">
<div class="con">
<!--轮播图主体-->
<ul class="img_con">
<li><a href="#"><img src="img/1.jpg" alt="1图"></a></li>
<li><a href="#"><img src="img/2.jpg" alt="2图"></a></li>
<li><a href="#"><img src="img/3.jpg" alt="3图"></a></li>
<li><a href="#"><img src="img/4.jpg" alt="4图"></a></li>
<li><a href="#"><img src="img/5.jpg" alt="5图"></a></li>
</ul>
<!--焦点元素-->
<ul class="img_jiao">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--左箭头-->
<div class="left_arrows arrows">
<img src="img/left.svg" alt="左箭头">
</div>
<!--右箭头-->
<div class="right_arrows arrows">
<img src="img/right.svg" alt="右箭头">
</div>
</div>
<!--JQ库文件-->
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<!--轮播图JS文件-->
<script type="text/javascript" src="js/style.js"></script>
</body>
</html>css初始化文件
/* CSS Document */
html, body, div, span, object, iframe,h1, h2,
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
outline-style:none;/*FF浣跨敤*/
}
body {
line-height:1;
}
a{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
a:hover,a:focus{
text-decoration:none;
bblr:expression(this.onFocus=this.blur());/*IE浣跨敤*/
outline-style:none;/*FF浣跨敤*/
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select {
vertical-align:middle;
}
ul,li{
list-style-type: none;
}css
.lunbo{
position: absolute;
width: 548px;
left: 27%;
top: 10%;
}
/*轮播主体*/
.lunbo .con{
width: 460px;
height: 290px;
border: 1px solid #aaa;
margin: 0 auto;
position: relative;
overflow: hidden;
-moz-box-shadow: 5px 7px 5px #888888; /* 老的 Firefox */
box-shadow: 5px 7px 5px #888888;
}
/*给予轮播图盒子固定尺寸*/
.con .img_con{
width: 3000px;
height: 290px;
}
.con .img_con li{
position: relative;
float: left;
}
.con .img_con li img{
height: 290px;
width: 460px;
}
/*焦点元素*/
.con .img_jiao{
position: absolute;
right: 40%;
bottom: 10px;
}
.con .img_jiao li{
float: left;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: aliceblue;
margin: 3px;
text-align: center;
line-height: 20px;
cursor: pointer;
border: 1px solid #aaa;
}
/*焦点特殊样式*/
.con .img_jiao li.on{
background-color: coral;
}
/*左右箭头共同CLASS*/
.lunbo .arrows img{
width: 43px;
height: 46px;
position: absolute;
top: 40%;
}
/*鼠标划过箭头效果*/
.lunbo .arrows:hover{
cursor: pointer;
}
/*左箭头*/
.lunbo .left_arrows img{
left: 0;
}
/*右箭头*/
.lunbo .right_arrows img{
right: 0;
}js
var img_c = $(".img_con li");//获取轮播图元素
var imw = img_c.eq(0).width();//获取轮播图第一位元素的宽度
var img_i = $(".img_jiao li");//获取焦点元素
var left_a = $(".left_arrows");//左箭头
var right_a = $(".right_arrows");//右箭头
var arrows = $(".arrows");//箭头共同类
var i = 0;
var time;//全部变量 用承载计时事件
var set_time = 1500;
/*鼠标移入到焦点触发事件*/
img_i.mouseover(function(){
clearInterval(time);//停止计时事件
i = img_i.index(this);//获取当前焦点索引值
$(this).addClass("on").siblings().removeClass("on");//给当前焦点元素添加CLASS
img_c.stop().animate({right:imw*i});//去到指定焦点位置 并停止动画
});
/*鼠标移出焦点触发事件*/
img_i.mouseout(function(){
time = setInterval("automatic()",set_time);
});
/*轮播自动运行函数*/
function automatic(){
arrows_a(1);
}
time = setInterval("automatic()",set_time);//每隔1.5秒触发计时事件
/*轮播主体代码*/
function arrows_a(s){
i += s;
clearInterval(time);
/*当轮播图到第一张时 再点击 返回到最后一张*/
if(i<0){
i=img_c.length -1;
}
/*当轮播到最后一张时 再点击 返回到第一张*/
if(i>=img_i.length){
i=0;
}
img_c.stop().animate({right:imw*i});
img_i.eq(i).addClass("on").siblings().removeClass("on");
time = setInterval("automatic()",set_time);
}
/*左箭头*/
left_a.click(function(){
arrows_a(-1);
});
/*右箭头*/
right_a.click(function(){
arrows_a(1);
});