js实现轮播图(点击小图片切换大图片+自动切换)
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代码，如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>