轮播图
主要功能及效果演示
- 鼠标移入出现按钮, 鼠标移出按钮消失
- 鼠标移入图片停止轮播(关闭定时器)
- 点击下一页和上一页
- 点击小图切换对应图片
代码分享
百度网盘下载地址
链接:https://pan.baidu.com/s/1btcsI-hdbJ1O-adVD7J5tg
提取码:d604
国内码云Gitee下载地址(内含超多有趣案例)
https://gitee.com/huang_weifu/JavaScript_demo.git
喜欢的老铁们可以点赞收藏喔~
一、HTML代码
<div id="box" class="box">
<ul id="ball">
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.webp" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
<li><img src="images/5.webp" alt=""></li>
<li><img src="images/6.webp" alt=""></li>
</ul>
<ul id="btns">
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.webp" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
<li><img src="images/5.webp" alt=""></li>
<li><img src="images/6.webp" alt=""></li>
</ul>
<a href="javascript:void(0);" id="prev"><</a>
<a href="javascript:void(0);" id="next">></a>
</div>
</body>
二、CSS代码
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
.box{
width:300px;
height:350px;
overflow:hidden;
position:relative;
margin:20px auto;
}
#ball{
width:2100px;
overflow:hidden;
position:absolute;
left:0;
top:0;
}
#ball li{
float:left;
height:300px;
width:300px;
}
#ball img{
width:100%;
height:100%;
display:block;
border:0;
}
#btns{
width:300px;
overflow:hidden;
position:absolute;
top:300px;
left:0;
}
#btns li{
width:50px;
height:50px;
float:left;
}
#btns img{
width:100%;
height:100%;
display:block;
border:0;
}
.box a{
position:absolute;
top:135px;
font-size:20px;
width:30px;
line-height:30px;
height:30px;
color:#ffffff;
background:rgba(154,154,154,0.4);
z-index:10;
text-align:center;
text-decoration:none;
border-radius:50%;
opacity:0;
filter:alpha(opacity=0);
}
#prev{
left:0;
}
#next{
right:0;
}
</style>
三、JavaScript代码
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript">
var box = document.getElementById('box');
var ball = document.getElementById('ball');
var btns = document.getElementById('btns').getElementsByTagName('li');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
//复制第一张图,添加到尾部
var first = ball.children[0].cloneNode(true);
ball.appendChild(first);
//初始化相关数据
var flag = true;
box.index = 0;
box.w = box.clientWidth;
//添加计时器
box.timer = setTimeout(move,3000);
function move(){
box.index--;
if(box.index==-(btns.length+1)){
box.index = -1;
ball.style.left = 0;
}
animation(ball,'left',box.w * box.index,function(){
clearTimeout(box.timer);
if(flag){
box.timer = setTimeout(move,3000);
}
});
}
//缩略图切换
for(var i = 0;i < btns.length;i++){
btns[i].index = -i;
btns[i].onclick = function(){
if(box.index==-btns.length){
ball.style.left = 0;
}
box.index = this.index;
animation(ball,'left',box.w*box.index);
}
}
//左右切换
box.onmouseover = function(){
flag = false;
clearTimeout(box.timer);
animation(prev,'opacity',1);
animation(next,'opacity',1);
}
box.onmouseout = function(){
flag = true;
box.timer = setTimeout(move,3000);
animation(prev,'opacity',0);
animation(next,'opacity',0);
}
//上一张图
prev.onclick = function(){
box.index++;
if(box.index==1){
box.index = -(btns.length-1);
ball.style.left = -(box.w * btns.length) + 'px';
}
animation(ball,'left',box.w*box.index);
}
//下一张图片
next.onclick = move;
</script>