<div class="all" id="all">
<div class="top">
<div class="main" id="main">
<div class="main-img">
<a href="">
</a>
</div>
<div class="main-img">
<a href="">
</a>
</div>
<div class="main-img">
<a href="">
</a>
</div>
<div class="main-img">
<a href="">
</a>
</div>
<div class="main-img">
<a href="">
</a>
</div>
<div class="main-img">
<a href="">
</a>
</div>
</div>
</div>
<div class="bottom" id="bottom">
<span id="left" class="left"></span>
<!--<span class="icon"></span>-->
<!--<span class="icon"></span>-->
<!--<span class="icon"></span>-->
<!--<span class="icon"></span>-->
<!--<span class="icon"></span>-->
<!--<span class="icon"></span>-->
<span id="right" class="right"></span>
</div>
</div>
*{
margin:0;
padding:0;
border:none;
}
.all{
width: 310px;
height: 260px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.top{
width: 310px;
height: 220px;
}
.main-img{
position: absolute;
width: 310px;
height: 220px;
}
.main-img img{
width: 100%;
height: 100%;
}
.bottom{
text-align: center;
}
.left,.right{
width: 20px;
height: 34px;
position: absolute;
top:50%;
margin-top: -34px;
background: url(../images/icon.png);
}
.left{
background-position:0 0;
left: 0;
}
.right{
background-position:-9px -45px;
right: 0;
}
.icon{
width: 20px;
height: 5px;
background: url(../images/icon.png) -24px -790px;
display: inline-block;
margin:5px;
text-indent: 20em;
}
.curr{
background-position: 0 -770px;
}
window.onload = function () {
var all = document.getElementById('all');
var main = document.getElementById('main');
var bottom = document.getElementById('bottom');
var pics = main.children;
var allW = all.offsetWidth;
var iNow = 0 ;
//動(dòng)態(tài)添加span
for(var i=0;i<pics.length;i++){
var mySpan = document.createElement("span");
mySpan.className = "icon";
mySpan.innerHTML = pics.length-i;
bottom.insertBefore(mySpan,bottom.children[1])
}
bottom.children[1].className = "icon curr";
for(var i=1;i<pics.length;i++){
pics[i].style.left =allW + "px";
}
for(var i=0;i< bottom.children.length;i++){
var mySpan = bottom.children[i];
mySpan.onclick = function () {
if(this.className == "left"){
buffer(pics[iNow],{left:allW});
iNow--;
// alert(iNow);
if(iNow<0){
iNow = pics.length-1;
}
pics[iNow].style.left = -allW+"px";
buffer(pics[iNow],{left:0})
}
else if(this.className == "right"){
buffer(pics[iNow],{left:-allW});
iNow++;
if(iNow>pics.length-1){
iNow = 0;
}
pics[iNow].style.left = allW+"px";
buffer(pics[iNow],{left:0})
}
else{
var index = this.innerHTML -1;
if(index>iNow){
buffer(pics[iNow], {left: -allW});
iNow = index;
pics[iNow].style.left = allW+"px";
buffer(pics[iNow],{left:0})
}else if(index<iNow){
buffer(pics[iNow], {left: allW});
iNow = index;
pics[iNow].style.left = -allW+"px";
buffer(pics[iNow],{left:0})
}
}
change();
}
}
//排他思想變span的顏色
function change(){
for(var i= 1;i<bottom.children.length-1;i++){
bottom.children[i].className = "icon";
}
//小span的角標(biāo)是從1開始的所以記錄當(dāng)前顯示第幾章圖片的iNow需要加1//
bottom.children[iNow+1].className = "icon curr";
}
//用定時(shí)自動(dòng)循環(huán)
var timer = setInterval(go,1000)
function go(){
//自動(dòng)循環(huán)就是相當(dāng)于點(diǎn)擊了右鍵
buffer(pics[iNow],{left:-allW});
iNow++;
if(iNow>pics.length-1){
iNow = 0;
}
pics[iNow].style.left = allW+"px";
buffer(pics[iNow],{left:0})
//調(diào)用排他思想變換顏色的函數(shù)
change();
}
//當(dāng)移動(dòng)到slider上的時(shí)候停止定時(shí)器，移開的時(shí)候開啟定時(shí)器//
all.onmouseover = function () {
clearInterval(timer);
}
all.onmouseout = function () {
timer = setInterval(go,1000);
}
}
<script src="../MyFn.js"></script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
