实现效果如下：
html代码如下：
<div class="switch fl" id="jsSwitch"> <div class="switch-bottom"> <div class="switch-l" > <img class="switch-img" id="jsSwitchL" src="images/lunbo-left.png" alt=""> </div> <ul class="switch-list" id="jsSwitchList"> <li class="switch-item active"><img class="switch-min" src="images/lunbo-1-min.png "></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-2.png"></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-3.png"></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-4.png"></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-5.png"></li> </ul> <div class="switch-r fr" > <img class="switch-img" id="jsSwitchR" src="images/lunbo-right.png"></img> </div> </div> <div class="switch-title"> <p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p> </div> </div>关键部分，js代码：
var num = 0; var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png']; var img = document.getElementById('jsSwitch'); var li = document.getElementById('jsSwitchList').children; var left = document.getElementById('jsSwitchL'); var right = document.getElementById('jsSwitchR'); var info = document.getElementById('jsSwitchInfo'); var timer = null; //左右按钮 left.onclick = function(){ num--; if (num == -1) { num = arrUrl.length - 1; } changeImg(); } right.onclick = function(){ num++; if (num == arrUrl.length) { num = 0; } changeImg(); } setTimeout(autoplay(),1000); //鼠标进入清除定时器，鼠标离开恢复 img.onmouseover = function(ev){ clearInterval(timer); }; img.onmouseout = autoplay; //点击小图片 换大图片 for (var i = 0; i < li.length; i++){ li[i].index = i; li[i].onclick = function (ev) { num = this.index; changeImg(); } } //图片切换 function changeImg() { for (var i = 0; i < li.length; i++) { //判断当前li是否包含active类 if(li[i].classList.contains('active')){ li[i].classList.remove('active'); } } //修改小图背景 li[num].classList.add('active'); //修改大图 var currentImg = arrUrl[num]; img.style.background = "url("+currentImg+") no-repeat center"; //修改轮播标题 info.innerText = arrInfo[num]; } //定时器 function autoplay() { timer = setInterval(function () { num++; num %= arrUrl.length; changeImg(); },2000); }以下是轮播全部代码，加上css代码，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,html { width: 100%; height: 100%; } *{ margin: 0; padding: 0; font-family: "microsoft yahei"; font-weight: normal; } ol, ul, li { list-style: none; } a { text-decoration: none; color: #fff; } img { display: block; border: none; } .fl { float: left; } .fr { float: right; } .switch { position: absolute; width: 566px; height: 302px; left: -283px; margin-top: 100px; margin-left: 50%; background: url(images/lunbo-1.png) no-repeat; background-size: 566px 302px; } .switch-bottom { position: absolute; bottom: 0; width: 100%; height: 66px; background: rgba(0,0,0,0.65); } .switch-l, .switch-r { width: 45px; height: 66px; display: table-cell; vertical-align: middle; } .switch-r { margin-top: -46px; } .switch-img { margin-left: 16px; cursor: pointer; } .switch-img { margin-left: 10px; cursor: pointer; } .switch-list { float: left; width: 475px; height: 66px; margin-top: -66px; margin-left: 45px; } .switch-item { float: left; width: 95px; height: 66px; } .active { background-color: #fff; } .switch-min { margin: 5px; cursor: pointer; } .switch-title { position: absolute; bottom: 66px; width: 100%; height: 36px; background: rgba(0,0,0,0.4); } .switch-info { margin-top: 10px; margin-left: 8px; font-size: 16px; color: #fff; } </style> </head> <body> <div class="switch fl" id="jsSwitch"> <div class="switch-bottom"> <div class="switch-l" > <img class="switch-img" id="jsSwitchL" src="images/lunbo-left.png" alt=""> </div> <ul class="switch-list" id="jsSwitchList"> <li class="switch-item active"><img class="switch-min" src="images/lunbo-1-min.png "></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-2.png"></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-3.png"></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-4.png"></li> <li class="switch-item"><img class="switch-min" src="images/lunbo-5.png"></li> </ul> <div class="switch-r fr" > <img class="switch-img" id="jsSwitchR" src="images/lunbo-right.png"></img> </div> </div> <div class="switch-title"> <p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p> </div> </div> <script src="jQuery.v1.11.1.min.js"></script> <script> var num = 0; var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png']; var arrInfo = ['北京市人民检察院第十五次代表大会召开','北京市人民检察院','北京市人民会召开','十五次代表大会召开','北京市人民大会召开'] var img = document.getElementById('jsSwitch'); var li = document.getElementById('jsSwitchList').children; var left = document.getElementById('jsSwitchL'); var right = document.getElementById('jsSwitchR'); var info = document.getElementById('jsSwitchInfo'); var timer = null; //左右按钮 left.onclick = function(){ num--; if (num == -1) { num = arrUrl.length - 1; } changeImg(); } right.onclick = function(){ num++; if (num == arrUrl.length) { num = 0; } changeImg(); } setTimeout(autoplay(),1000); //鼠标进入清除定时器，鼠标离开恢复 img.onmouseover = function(ev){ clearInterval(timer); }; img.onmouseout = autoplay; //点击小图片 换大图片 for (var i = 0; i < li.length; i++){ li[i].index = i; li[i].onclick = function (ev) { num = this.index; changeImg(); } } //图片切换 function changeImg() { for (var i = 0; i < li.length; i++) { //判断当前li是否包含active类 if(li[i].classList.contains('active')){ li[i].classList.remove('active'); } } //修改小图背景 li[num].classList.add('active'); //修改大图 var currentImg = arrUrl[num]; img.style.background = "url("+currentImg+") no-repeat center"; //修改轮播标题 info.innerText = arrInfo[num]; } //定时器 function autoplay() { timer = setInterval(function () { num++; num %= arrUrl.length; changeImg(); },2000); } </script> </body> </html>