1、效果
2、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/slide.less">
</head>
<body>
<div class="slide-container"></div>
<script type="text/javascript" src='js/jquery-2.2.1.min.js'></script>
<script type="text/javascript" src = 'js/slide.js'></script>
</body>
</html>
3、less代码
.slide-container{
1000px;
height: 560px;
margin: 0 auto;
box-shadow: 0 0 10px 3px gray;
position: relative;
top: 0;
left: 0;
overflow: hidden;
.slide-box{
1000px;
height: 560px;
transition: all 0.4s linear;
.slide-list{
height: 560px;
overflow: hidden;
display: inline-block;
float: left;
img{
1000px;
height: 100%;
}
}
.first-one{
position: absolute;
top: 0;
left: -1000px;
}
.last-one{
position: absolute;
top: 0;
right: -1000px;
}
}
.slide-btn{
80px;
height: 560px;
background-color: rgba(0,0,0,0.4);
position: absolute;
z-index: 3;
top: 0;
text-align:center;
transition: all 0.3s linear;
cursor: pointer;
i{
color: white;
font-size: 40px;
line-height: 560px;
}
}
.slide-left-btn{
left: 0;
transform: translateX(-80px);
}
.slide-right-btn{
right: 0;
transform: translateX(80px);
}
&:hover{
.slide-left-btn{
transform:translateX(0);
}
.slide-right-btn{
transform:translateX(0);
}
.slide-menu{
visibility: visible;
}
}
.slide-menu{
visibility: hidden;
position: absolute;
bottom: 20px;
z-index: 3;
left: 50%;
transform: translateX(-50%);
display: inline-block;
auto;
height: 56px;
text-align: center;
white-space: nowrap;
padding: 20px;
background-color: rgba(0,0,0,0.4);
.list{
display: inline-block;
100px;
height: 56px;
overflow: hidden;
border: 2px solid white;
margin: 4px;
img{
display: inline-block;
100px;
height: 56px;
background-color: red;
border-radius: 10px;
margin: 0 10px 0 10px;
cursor: pointer;
}
&:hover{
border: 2px solid red;
}
}
.choose{
border: 2px solid red;
}
}
}
3、js代码
var imgObj = {
"imgList": [
{ "name": "name1", "url": "imgs/1.jpg", "detail": "1号宝贝", "link": "http://www.hao123.com" },
{ "name": "name2", "url": "imgs/2.jpg", "detail": "2号宝贝", "link": "http://www.baidu.com" },
{ "name": "name3", "url": "imgs/3.jpg", "detail": "3号宝贝", "link": "http://www.w3cschool.com" },
{ "name": "name4", "url": "imgs/4.jpg", "detail": "4号宝贝", "link": "http://www.taobao.com" },
{ "name": "name2", "url": "imgs/5.jpg", "detail": "5号宝贝", "link": "http://www.jd.com" },
{ "name": "name3", "url": "imgs/6.jpg", "detail": "6号宝贝", "link": "http://www.lianxiang.com" },
{ "name": "name4", "url": "imgs/7.jpg", "detail": "7号宝贝", "link": "http://www.meituan.com" }
]
}
var parent = $(".slide-container");
var now_index = 1;
var prev_index = 1;
var len = imgObj.imgList.length;
var imgList = imgObj.imgList;
var is_active = true; //是否自动轮播
var is_running = true;
creatSlide();
function creatSlide() {
initSlide();
addSlideOperation();
addClock(is_active);
function initSlide() {
parent.empty();
var rightBtn = $("<div class='slide-left-btn slide-btn'>" +
"<i class='iconfont icon-left-copy'></i>" +
"</div>");
var leftBtn = $("<div class='slide-right-btn slide-btn'>" +
"<i class='iconfont icon-right-copy'></i>" +
"</div>");
parent.append(rightBtn);
parent.append(leftBtn);
var slideBox = $("<div class='slide-box'></div>");
slideBox.css("width", (len * 1000) + "px");
var slideList = $("<div class='slide-list first-one'>" +
"<a href='" + imgList[len - 1].url + "'>" +
"<img src='static/imgs/" + len + ".jpg'>" +
"</a>" +
"</div>");
slideBox.prepend(slideList);
for (var i = 0; i < len; i++) {
var slideList = $("<div class='slide-list'>" +
"<a href='" + imgList[i].url + "'>" +
"<img src='static/imgs/" + (i + 1) + ".jpg'>" +
"</a>" +
"</div>");
slideBox.append(slideList);
}
var slideList = $("<div class='slide-list last-one'>" +
"<a href='" + imgList[1].url + "'>" +
"<img src='static/imgs/" + (1) + ".jpg'>" +
"</a>" +
"</div>");
slideBox.append(slideList);
parent.append(slideBox);
var slideMenu = $("<div class='slide-menu'></div>");
for (var j = 0; j < len; j++) {
var menuList = $("<div class='list list" + (j + 1) + "'>" +
"<img src='static/imgs/" + (j + 1) + ".jpg'>" +
"</div>");
if (j == 0) {
menuList.addClass("choose");
}
slideMenu.append(menuList);
}
parent.append(slideMenu);
}
function addSlideOperation() {
var slideBox = parent.find(".slide-box");
var slideMenu = parent.find(".slide-menu");
//左键
parent.on("click", ".slide-left-btn", function() {
if (is_running) {
is_running = false;
if (now_index < len) {
now_index++;
console.log(now_index);
slideBox.attr("style", " " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);");
var tar = slideMenu.find(".list" + now_index);
tar.addClass("choose");
tar.siblings().removeClass("choose");
} else if (now_index == len) {
now_index = 1;
slideBox.attr("style", "transition:all 0.3s linear; " + ((len) * 1000) + "px;transform:translateX(" + (-(len) * 1000) + "px);");
setTimeout(function() {
slideBox.attr("style", "transition:all 0s linear; " + ((len) * 1000) + "px;transform:translateX(" + (0) + "px);");
}, 300)
var tar = slideMenu.find(".list" + 1);
tar.addClass("choose");
tar.siblings().removeClass("choose");
}
is_running = true;
}
})
//右键
parent.on("click", ".slide-right-btn", function() {
if (is_running) {
is_running = false;
if (now_index > 1) {
now_index--;
console.log(now_index);
slideBox.attr("style", " " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);");
var tar = slideMenu.find(".list" + now_index);
tar.addClass("choose");
tar.siblings().removeClass("choose");
} else if (now_index == 1) {
now_index = len;
slideBox.attr("style", "transition:all 0.3s linear; " + ((len) * 1000) + "px;transform:translateX(" + (1000) + "px);");
setTimeout(function() {
slideBox.attr("style", "transition:all 0s linear; " + ((len) * 1000) + "px;transform:translateX(" + ((1 - len) * 1000) + "px);");
}, 300)
var tar = slideMenu.find(".list" + len);
tar.addClass("choose");
tar.siblings().removeClass("choose");
}
is_running = true;
}
})
//小图选取
parent.on("click", ".slide-menu .list", function() {
now_index = $(this).index() + 1;
console.log(now_index);
slideBox.attr("style", " " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);");
$(this).addClass("choose");
$(this).siblings().removeClass("choose");
})
//mouseover 停止自动轮播
parent.on("mouseover", function() {
active = false;
addClock(active);
})
//mouseout 停止自动轮播
parent.on("mouseout", function() {
active = true;
addClock(active);
})
}
function addClock(active) {
var active = active;
if (active) {
clock = setInterval(function() {
var is_right = parseInt(Math.random());
if (is_right) {
parent.find(".slide-right-btn").click();
} else {
parent.find(".slide-left-btn").click();
}
}, 3000)
} else {
clearTimeout(clock);
}
}
}
4、总结
轮播图实现的难点在于头调到尾，尾调到头，为实现这个我在头尾加了两个块来实现