代码部分:
HTML部分:
<div class="wrap"> <ul> <li class="active" style="background-color:red;">一</li> <li style="background-color:skyblue;">二</li> <li style="background-color:blue;">三</li> <li style="background-color:green;">四</li> <li style="background-color:purple;">五</li> </ul> <div class="intro t-num"><span>1</span>/5</div> <div class="intro b-title">白少在双拥广场玩耍</div> <div class="arrow a-left"><</div> <div class="arrow a-right">></div> </div> <div class="btn"> <button>正常模式</button> <button class="active">循环模式</button> </div>
CSS部分:
body,ul{margin: 0;padding:0} li{list-style: none} button:focus{outline: 0} .wrap,.btn{ position: relative; width:600px; height: 335px; margin: 35px auto } .btn{ height: 65px; text-align: center;} .wrap>ul>li{ position: absolute; display: none; width:100%; height:100%; color:#fff; text-align:center; line-height:335px; font-size:48px; } .wrap>ul>li.active{ display: block;} .arrow{ position: absolute; width: 25px; height: 50px; top:50%; margin-top: -25px; color:#fff; line-height: 50px; text-align: center; font-size: 24px; font-weight: bold; cursor: pointer; background-color: rgba(51,136,125,.5); } .arrow:hover{ background-color: rgba(51,136,125,.9);} .a-left{ left: 0;} .a-right{right: 0;} .intro{ position: absolute; width: 100%; height: 38px; line-height: 38px; font-size:16px; color:#fff; text-align: center; background-color: rgba(0,0,0,.6); } .t-num{ top: 0;} .b-title{ bottom: 0;} .btn>button{ width: 100px; height: 38px; color: #fff; font-size: 16px; font-weight: bold; background-color: MediumVioletRed; border:solid 1px #ccc; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin: 15px; cursor: pointer; } .btn>button.active{background-color: orange} .btn>button:hover{background-color: #935404}
JS部分:
//get the object var oLi = document.getElementsByTagName("li"), //获取图片 leftArrow = document.getElementsByClassName("a-left")[0], //获取左边按钮 rightArrow = document.getElementsByClassName("a-right")[0], //获取右边按钮 topBar = document.querySelector(".t-num span"), //显示顶部数字用 btmBar = document.getElementsByClassName("b-title")[0], //显示底部简介用 btns = document.getElementsByTagName("button"), //获取正常播放和循环播放两个按钮 arrTitle = ["白少在双拥广场玩耍","白少在研究口红","白少在五岳独尊静坐","恩,是男神,没错儿","少爷在卖萌^_^"], //用数组按顺序存储标题 len = oLi.length, //用来获取图片的张数 index = 0, //用来存储当前图片的索引值 mark = true; //用来标记是单边播放还是循环播放,这里默认true为循环播放;false则为正常播放模式 //正常播放按钮事件 btns[0].onclick = function () { this.className = 'active'; btns[1].className = ""; mark = false ; } //循环播放按钮事件 btns[1].onclick = function () { this.className = 'active'; btns[0].className = ""; mark = true ; } leftArrow.onclick = fn; rightArrow.onclick = fn; //通过自定义属性来标记是否是点击上一张图片 leftArrow.isPrev = true; rightArrow.isPrev = false ; function fn() { oLi[index].className = ''; //隐藏当前图片 if(this.isPrev){ //如果为true,则是点击上一张图片 index--; //序号自减,到上一张的索引值 if(mark){ // 如果是循环播放 if(index<0){ index = len-1; } }else { //如果是单边播放 if(index<0){ index = 0; alert("前边没有了") } } }else { //否则的话,是点击下一张图片 index++; //序号自减,到上一张的索引值 if(mark){ // 如果是循环播放 if(index>len-1){ index = 0; } }else { //如果是单边播放 if(index>len-1){ index = len-1; alert("后边边没有了") } } } oLi[index].className = 'active'; topBar.innerHTML = index + 1; btmBar.innerHTML = arrTitle[index]; }
评论前必须登录!
注册