index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=4, minimum-scale=1, user-scalable=no" />
</head>
<body>
<div class="wrap">
<div class="inner" id="inner" >
<div class="pic-wrap" style="left:0">
<img src="" alt=""></div><div class="pic-wrap" style="">
<img src="" alt=""></div><div class="pic-wrap" style="">
<img src="" alt=""></div><div class="pic-wrap" style="">
<img src="" alt=""></div>
</div>
<span class="left direction" id="left"><</span>
<span class="right direction" id="right">></span>
</div>
<div class="control-wrap">
<span class="control control-selected" data-id="0"><img src="" alt=""></span>
<span class="control" data-id="1"><img src="" alt=""></span>
<span class="control" data-id="2"><img src="" alt=""></span>
<span class="control" data-id="3"><img src="" alt=""></span>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="pictureplay.js"></script>
<script>
var picSrc=["https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-5.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-2-1.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-3-1.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-4-1.jpg"];
var controlSrc=["https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-5-130x130.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-2-1-130x130.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-3-1-130x130.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-4-1-130x130.jpg"];
$(function(){
if($(window).width()>=600){
picturePlay(4,"450","1000",picSrc,controlSrc);
}else{
picturePlay(4,"300","1000",picSrc,controlSrc);
}
})
</script>
</body>
</html>style.css
.wrap{
height: 450px;
width:450px;
overflow: hidden;
position: relative;
/* background: #ccc; */
left:0;
display: inline-block;
}
.wrap:hover .direction{
display: inline-block;
}
.control-wrap{
display: inline-block;
}
.inner{
height: 450px;
width:1800px;
position: absolute;
overflow: hidden;
left: 0;
}
.pic-wrap{
width:450px;
height: 450px;
display: inline-block;
/* background: #ccc */
}
.control ,.direction{
display: inline-block;
width:100px;
cursor: pointer;
}
.pic-wrap img{
max-width: 450px;
}
.direction{
position: absolute;
top:50%;
transform: translateY(-50%);
font-size: 30px;
color:#111;
padding: 0;
display: none;
}
.right{
right:0;
text-align: right;
}
@keyframes pictureOpacity{
from {opacity: 0.5;}
to{opacity:1;}
}
@-moz-keyframes pictureOpacity{
from {opacity: 0.5;}
to{opacity:1;}
}
@-webkit-keyframes pictureOpacity{
from {opacity: 0.5;}
to{opacity:1;}
}
@-o-keyframes pictureOpacity{
from {opacity: 0.5;}
to{opacity:1;}
}
.control{
position: relative;
height: 100px;
border:1px solid white;
display: block;
}
.control:hover,.control-selected{
border:1px solid #ccc;
}
.control img{
opacity:0.5;
position: absolute;
max-width: 100px;
left: 50%;
transform: translateX(-50%);
}
.control img:hover {
opacity: 1;
animation:pictureOpacity 1s;
-moz-animation: pictureOpacity 1s; Firefox
-webkit-animation: pictureOpacity 1s; Safari 和 Chrome
-o-animation: pictureOpacity 1s
}
.control-selected img{
opacity: 1;
}
@media screen and (max-width: 600px){
.wrap,.control-wrap{
display: block;
margin: 0 auto;
}
.wrap,.pic-wrap,.pic-wrap img{
width: 300px;
height: 300px;
}
.control{
display: inline-block;
}
.inner{
height:300px;
width:1200px;
}
.control, .control img{
width: 66px;
height: 66px;
}
.control-wrap{
width:300px;
}
}pictureplay.js
function picturePlay(n,distance,interval,picSrc,controlSrc){
var pos = 0;
var pic=$(".pic-wrap img");
var control=$(".control img");
for(var i=0;i<n;i++){
pic.eq(i).attr("src",picSrc[i]);
control.eq(i).attr("src",picSrc[i]);
}
for(var i=0;i<n;i++){
$(".pic-wrap img").css("left",i*distance);
}
$(".control").click(function() {
$("#inner").stop(true,true);
$(this).addClass("control-selected");
$(this).siblings().removeClass("control-selected");
var id = $(this).data("id");
if (id == pos) {
return;
} else if (id > pos) { //需要的圖片在右邊，-
var m = ((id - pos) * distance) + "px";
$("#inner").animate({
left: "-=" + m
},
interval);
} else if (id < pos) {
m = ((pos - id) * distance) + "px";
$("#inner").animate({
left: "+=" + m
},
interval);
}
pos = id;
})
$("#left").click(function(){
$("#inner").stop(true,true);
if(pos==0){
pos=n-1;
$("#inner").animate({
left: distance+"px"
},
interval,function(){
$("#inner").css("left","-"+n*distance+"px");
$("#inner").animate({
left: "-" + (n-1)*distance + "px"
},
interval);
});
}else{
pos--;
$("#inner").animate({
left: "+=" + distance + "px"
},
interval);
}
$(".control").eq(pos).addClass("control-selected");
$(".control").eq(pos).siblings().removeClass("control-selected");
});
$("#right").click(function(){
$("#inner").stop(true,true);
if(pos==(n-1)){
pos=0;
$("#inner").animate({
left:"-" + n * distance +"px"
},
interval,function(){
$("#inner").css("left",distance+"px");
$("#inner").animate({
left:"0px"
},interval);
});
}else{
pos++;
$("#inner").animate({
left:"-=" + distance + "px"
},interval);
}
$(".control").eq(pos).addClass("control-selected");
$(".control").eq(pos).siblings().removeClass("control-selected");
});
}現在沒經驗，寫的比較簡陋，先記錄一下，以後應該可以封裝的好一點。
效果圖（大小屏響應式的切換要刷新一下）
