鼠标事件之简单轮播更换背景图实
简单轮播图案例:
先看效果图:
核心思路如下:
一、(结构)一个div盒子放置背景图片、五个轮播点用 ul 包涵五个 Li 来实现
ps:用了定位position,父相子绝:父亲盒子要相对定位,子盒子要绝对定位。
二、(js实现)获取五个轮播点Li 用for循环遍历注册点鼠标事件、并给五个 Li 依次设置索引号、用this关键字更换div盒子的背景图片。
scirpt核心代码如下:
<script>
//获取元素
var myLis = document.querySelector('.nav').querySelectorAll('li');
//循环注册点击事件
for (var i = 0; i < myLis.length; i++) {
//设置索引号
myLis[i].index = i;
myLis[i].onmouseover = function () {
//更改盒子背景图片
document.querySelector('div').style.backgroundImage = 'url("images03/b' + (this.index+1) + '.jpg")';
}
}
</script>
HTML结构代码如下:
<div class="box">
<!--圆点选项-->
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS样式代码如下:
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
position: relative;
width: 520px;
height: 280px;
margin: 100px auto;
padding: 5px;
background-size: contain;
background-image: url("images03/b5.jpg");
}
.nav {
position: absolute;
left: 40%;
bottom: 10px;
width: 70px;
height: 14px;
background-color: rgba(255,255,255,.2);
border-radius: 10px;
}
.nav li {
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 3px;
background-color: white;
cursor: pointer;
}
.nav li:hover {
background-color: #ff6600;
}
版权声明:本文为weixin_46054543原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。