HTML轮播图编写

最终实现的效果如下，可进入展示页面查看
展示页面：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);

图片及网站源码：码云仓库