最终实现的效果如下,可进入展示页面查看
展示页面:http://xyy9.gitee.io/roll/
照片轮播图,点击进入相册
HTML
<!--实现图片轮播效果-->
<div id="Upper">
<div class="carousel">
<div class="imgBox">
<ul>
<li class="list1"><img src="img/carousel1.jpg" style="width:730px;height:336px;"></li>
<li class="list2"><img src="img/carousel2.jpg" style="width:730px;height:336px;"></li>
<li class="list3"><img src="img/carousel3.jpg" style="width:730px;height:336px;"></li>
<li class="list4"><img src="img/carousel4.jpg" style="width:730px;height:336px;"></li>
<li class="list5"><img src="img/carousel5.jpg" style="width:730px;height:336px;"></li>
<li class="list6"><img src="img/carousel6.jpg" style="width:730px;height:336px;"></li>
</ul>
</div>
<div class="lineBar">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
slideshow.css
/*轮播图*/
#Upper{
width:1570px;
height:380px;
margin:0 auto;
text-align: center;
top: 115px;
position: relative;
}
.imgBox>ul{
position: relative;
padding-left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.imgBox>ul>li{
position: absolute;
list-style: none;
width: 730px;
height: 336px;
transition: 1.5s;
}
.carousel img{
display: block;
}
.carousel{
width: 1200px;
height: 367px;
margin: 80px auto;
}
.imgBox{
width: 1200px;
height: 336px;
}
.lineBar{
width: 1200px;
height: 31px;
text-align: center;
}
.list1{
z-index: 1;
transform: scale(0.81);
transform-origin: 0% 100%;
}
.list2{
transform: translateX(235px);
z-index: 2;
}
.list3{
transform: translateX(730px) scale(0.81);
z-index: 1;
transform-origin: 100% 100%;
}
.list4{
transform: translateX(965px) scale(0.81);
transform-origin: 100% 100%;
}
.list5{
transform: translateX(1200px) scale(0.81);
transform-origin: 100% 100%;
}
.list6{
transform: translateX(1435px) scale(0.81);
transform-origin: 100% 100%;
}
.list1,.list2,.list3,.list4,.list5,.list6:hover{
cursor:pointer;
}
.lineBar{
top: 100px;
position: relative;
}
.lineBar span{
display: inline-block;
width: 35px;
height: 3px;
background-color: #ccc;
}
slideshow.js
//轮播图
var aLi = document.querySelectorAll(".imgBox li");
var aSpan = document.querySelectorAll(".lineBar span");
var oImgbox = document.querySelector(".imgBox");
var aName = [];
var index = 0;
setColor();
for(var item of aLi){
aName.push(item.classList[0]);
}
function nextPic() {
aName.unshift(aName[5]);
aName.pop();
for (var i=0,len=aLi.length;i<len;i++){
aLi[i].setAttribute("class",aName[i]);
}
index++;
if(index>5)index=0;
setColor();
}
function nowPic(){
self.location.href="album.html"
}
function prePic() {
aName.push(aName[0]);
aName.shift();
for (var i=0,len=aLi.length;i<len;i++){
aLi[i].setAttribute("class",aName[i]);
}
index--;
if(index<0)index=5;
setColor();
}
function setColor() {
for(var item of aSpan){
item.style.backgroundColor="#ccc";
}
aSpan[index].style.backgroundColor = "#45c17c";
}
6
var eleList=["list1","list2","list3"];
var eleAct=["prePic","nowPic","nextPic"];
oImgbox.addEventListener("click",function (ev) {
var ele = ev.target.parentNode;
var eleName = ele.classList[0];
window[eleAct[eleList.indexOf(eleName)]]();
})
setInterval("nextPic()",3000);
图片及网站源码:码云仓库