制作web幻燈，對很多初學(xué)者來說， 是一件挺難的事情，尤其是剛開始學(xué)， 無處下手， 這里制作一個(gè)簡易的幻燈效果，無論是CSS,HTML, JS都盡量做到簡單， 希望能夠給大家起到拋磚引玉的效果
1, css代碼
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
body{
font-family: '微軟雅黑';
font-size: 14px;
}
.slide{
width: 230px;
height: 90px;
margin:50px auto;
position:relative;
}
.slide > ul > li{
display: none;
position: relative;
height: 90px;
}
.slide > ul > li:first-child{
display:block;
}
.slide > ul > li img{
width:230px;
height:90px;
border-radius: 3px;
}
.slide > ul > li p{
position:absolute;
left:0;
bottom:0;
height:30px;
line-height: 30px;
text-align: center;
width:210px;
padding:0 10px;
color:#fff;
background-color:
rgb(0,0,0,0.1);
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.slide .toLeft, .slide .toRight{
position:absolute;
width:20px;
height:40px;
text-align:center;
line-height:40px;
top:25px;
color:#fff;
background-color:
rgb(0,0,0,0.5);
cursor: pointer;
}
.slide .toLeft{
left:0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.slide .toRight{
right:0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.slide > .dots{
width:100%;
position:absolute;
height:30px;
top:0;
left:0;
text-align:center;
z-index: 2;
}
.slide > .dots > li{
display:inline-block;
height:10px;
width:10px;
border-radius:50%;
background-color:#ccc;
margin-right: 6px;
}
.slide > .dots > li.focus{
background-color:red;
}2, HTML代碼
<div class="slide"> <div class="dots"></div> <ul> <li><a href=""> <img src="./1.jpg"> <p>沉睡花園：龔俊喬欣上演情感專家上演情感專家上演情感專家</p> </a> </li> <li><a href=""> <img src="./2.jpg"> <p>幸福二重奏：殷桃孫藝洲床頭鬧床尾合</p> </a> </li> <li><a href=""> <img src="./3.jpg"> <p>我們的滾燙人生： 陳小春被男孩唱懵</p> </a> </li> </ul> <div class="toLeft" > < </div> <div class="toRight"> > </div> </div>
3. JS代碼：
var now = 0; //表示顯示的第幾個(gè)
var time = 0;
var t = null;
var allLi = document.querySelectorAll(".slide > ul > li");
//得到所有的li
var str = "";
for(var i = 0; i < allLi.length; i++){
if(i == 0){
str += "<li class='focus' data-index="+i+"></li>";
}
else{
str += "<li data-index="+i+"></li>";
}
//任何標(biāo)簽， 除了自帶的屬性外，還可以自定義屬性
}
document.querySelector(".slide > .dots").innerHTML = str;
var dotsLi = document.querySelectorAll(".slide > .dots > li");
//console.log(allLi);
function getFocus(){
for(var i = 0; i < dotsLi.length; i++){
if(i == now){
dotsLi[i].classList.add("focus");
}
else{
dotsLi[i].classList.remove("focus");
}
}
}
function toLeft(){
//向左移函數(shù) 如果now > 0, now 減一， 否則設(shè)置為 最大
clearInterval(t);
if(now < allLi.length - 1) now++;
else now = 0;
for(var i = 0; i <= allLi.length - 1; i++){
if(i == now){
allLi[i].style.display = "block";
}
else{
allLi[i].style.display = "none";
}
}
getFocus();
t = setInterval(toLeft,3000);
}
function toRight(){
clearInterval(t);
if(now > 0) now--;
else now = allLi.length - 1;
for(var i = 0; i <= allLi.length - 1; i++){
if(i == now){
allLi[i].style.display = "block";
}
else{
allLi[i].style.display = "none";
}
}
getFocus();
t = setInterval(toLeft,3000);
}
//document.querySelector(".toLeft").onclick = toLeft;
document.querySelector(".toLeft").addEventListener("click",toLeft);
//增加事件監(jiān)聽
document.querySelector(".toRight").addEventListener("click",toRight);
dotsLi.forEach((item,index)=>{
item.addEventListener("click",function(){
//單擊的是第幾個(gè)，就讓第幾個(gè)圖片顯示，并對應(yīng)獲得焦點(diǎn)
var cc = this.getAttribute("data-index");
var cc1 = this.dataset.index; //僅支持 data-的屬性
//得到屬性
now = cc;
clearInterval(t);
for(var i = 0; i <= allLi.length - 1; i++){
if(i == now){
allLi[i].style.display = "block";
}
else{
allLi[i].style.display = "none";
}
}
getFocus();
t = setInterval(toLeft,3000);
});
})
t = setInterval(toLeft,3000);效果如下：
源代碼下載：
