<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style>
#box{ /*给图片盒子创建样式*/
width : 400px;
height : 400px;
margin: 0 auto;
position: relative;
}
#img{ /*给图片设置样式*/
width: 400px;
height : 400px;
}
.bt{ /*给左右箭头设置样式*/
color:white;
width: 50px;
height: 60px;
background-color: gray;
opacity: 0.2;
font-size: 60px;
font-weight: 900;
cursor : pointer; /*设置光标类型*/
position: absolute; /*设置显示方式为绝对定位*/
top: 170px;
display: none; /*默认不显示*/
text-align: center;
line-height: 60px;
}
#left{ /*左箭头样式*/
left: 0px;
}
#right{ /*右箭头样式*/
right: 0px;
}
#ul{ /*页码样式*/
list-style-type: none;
position: absolute;
top:330px;
left:50px;
}
#ul>li{ /*页码样式*/
float: left;
margin-right: 20px;
background-color: skyblue;
font-size: 30px;
border-radius: 15px; /*边框导角设置为文字大小的50%,会显示成圆形*/
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
opacity: 0.2; /*透明度*/
cursor : pointer; /*光标类型*/
}
</style>
</head>
<body>
<div id='box'>
<img id='img' src='img/0.jpg'>
<div id='left' class='bt'><</div>
<div id='right' class='bt'>></div>
<ul id='ul'>
<li class='li'>1</li>
<li class='li'>2</li>
<li class='li'>3</li>
<li class='li'>4</li>
<li class='li'>5</li>
</ul>
</div>
</body>
<script>
// 获取元素
var jsBox = document.getElementById('box');
var jsImg = document.getElementById('img')
var jsBts = document.getElementsByClassName('bt')
var jsLeft = document.getElementById('left')
var jsRight = document.getElementById('right')
var jsLis = document.getElementsByClassName('li')
//设置鼠标悬念事件
jsBox.addEventListener('mouseover',stop,false)
// 设置鼠标移出事件
jsBox.addEventListener('mouseout',start,false)
var page=0;
//翻页函数
function setPage(page){
jsImg.src='img/'+page+'.jpg'; //设置图片源,图片源为img/page.jpg(需先定义好图片文件名和目录)
for (var p in jsLis){ //设置页码透明度
jsLis.item(p).style.opacity=0.2
}
jsLis[page].style.opacity=0.8 //当前页面的页码透明度加深
}
//启动轮播函数
function start(){
timer = setInterval(function(){ //定时软播
setPage(page)
page++
if (page==5){
page=0;
}
},1000) //切换时间为1000毫秒
jsBts[0].style.display='none'; //轮播时隐藏左箭头
jsBts[1].style.display='none'; //轮播时隐藏右箭头
}
//停止轮播函数
function stop(){
clearInterval(timer) //清除轮播定时器
jsBts[0].style.display='block'; //显示左箭头
jsBts[1].style.display='block'; //显示右箭头
}
//启动轮播函数
start()
//为左右箭头添加事件
for (var i=0;i<2;i++){
jsBts[i].index = i; //设置当前标签(箭头)的index值(不能直接使用循环中的i)
jsBts[i].addEventListener('mouseover',function(){ //当鼠标悬念在箭头上时,加深箭头的背景
this.style.opacity=0.6;
},false)
jsBts[i].addEventListener('mouseout',function(){ //当鼠标移出箭头时,减淡箭头的背景
this.style.opacity=0.2;
},false)
jsBts[i].addEventListener('mousedown',function(){ //当鼠标点击箭头时执行翻页
switch (this.index){
case 0:
page--
if (page<0){
page=4
}
setPage(page) //执行翻页函数
break;
case 1:
page++
if (page>4){
page=0
}
setPage(page) //执行翻页函数
break;
}
},false)
}
//为页码添加翻页事件
for (var i=0;i<jsLis.length;i++){
jsLis[i].index = i
jsLis[i].addEventListener('mouseover',function(){ //鼠标悬念在页码上时,执行翻页函数
page = this.index;
setPage(page)
})
}
</script>
</html>
js示例1(图片轮播)
最新推荐文章于 2024-08-25 09:57:22 发布