js实现轮播图(点击小图片切换大图片+自动切换)
实现效果如下：
点击小图切换大图和轮播标题，点击左右按钮大小图和轮播标题切换，鼠标进入清除定时器，鼠标移出恢复轮播
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>
