js实现带缩略图定时循环轮播幻灯

主页 M

js实现带缩略图定时循环轮播幻灯

2020-06-17 网页编程网 网页编程网

<style>
body{
    background-color:#333;
}
.container{
    width:400px;
    hieght:450px;
    margin:0 auto;
}
.box{
    width:300px;
}
#title,#bottom{
    height:30px;
    line-height:30px;
    background:#000;
    text-align: center;
    color:#fff;
}
img{
    width:300px;
    height:400px;
    vertical-align: middle;
}
ul{
    margin:0;
    padding:0;
    list-style: none;
}
.clear{
    zoom:1;
}
.clear:after{
    content: ' ';
    display:block;
    clear:both;
}
li{
    float:left;
    width:40px;
    height:40px;
    background:#666;
    margin-right: 4px;
    cursor: pointer;
    border:2px solid #ddd;
    border-radius: 5px;
    transition:border 1s;
}
li img{
    width:100%;
    height:100%;
}
li.active{
    border:2px solid #ffcc33;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
    <div id="title">加载中...</div>
    <img src="imgs/1.jpg">
    <div id="bottom"></div>
</div>
<ul class="clear"></ul>
</div>
<script>
window.onload=function(){
var arrUrl = ['imgs/1.jpg','imgs/2.jpg','imgs/3.jpg','imgs/4.jpg','imgs/5.jpg'];
var arrText= ['邀请函1','邀请函2','邀请函3','邀请函4','邀请函5'];
var title = document.getElementById('title');
var bottom = document.getElementById('bottom');
var img = document.getElementsByTagName('img')[0];
var ul = document.getElementsByTagName('ul')[0];

for(var i=0;i<arrUrl.length;i++){
    ul.innerHTML += '<li><img src="'+arrUrl[i]+'"></li>';
}
var num = 0;
var timer = null;
var oldLi = null;
var lis = document.getElementsByTagName('li');
oldLi = lis[0];
for(var i=0;i<lis.length;i++){
    lis[i].index = i;
    lis[i].onclick=function(){
        num = this.index;
        update();
    }
}
function update(){
    img.src = arrUrl[num];
    title.innerHTML = num+1 + '/' + arrUrl.length;
    bottom.innerHTML = arrText[num];
    oldLi.className = '';
    oldLi = lis[num];
    lis[num].className = 'active';
}
function autoPlay(){
    update();
    num++;
    num%=arrUrl.length;//1 2 3 4 0 1 2 3 4 0...
}
timer = setInterval(autoPlay,2000);
img.onmouseover=function(){
    clearInterval(timer);
}
img.onmouseout=function(){
   timer =  setInterval(autoPlay,2000);
}
}
</script>
</body>

阅读原文

阅读 3237

123 显示电脑版