请你为它编写一段照片轮播效果的代码
时间: 2024-03-07 19:50:42 浏览: 25
好的,以下是一个简单的照片轮播效果的代码示例:
HTML代码如下:
```
<div class="wrap" id="wrap">
<ul class="pics">
<li class="pic1"><img src="./img/首页大图1.jpg" alt=""></li>
<li class="pic2"><img src="./img/首页大图2.jpg" alt=""></li>
<li class="pic3"><img src="./img/首页大图3.jpg" alt=""></li>
<li class="pic4"><img src="./img/首页大图4.jpg" alt=""></li>
</ul>
<a href="#" class="lbtn" id="lbtn"><</a>
<a href="#" class="rbtn" id="rbtn">></a>
</div>
```
CSS代码如下:
```
.wrap {
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.pics {
position: absolute;
left: 0;
top: 0;
width: 3200px;
height: 400px;
margin: 0;
padding: 0;
}
.pics li {
position: relative;
float: left;
width: 800px;
height: 400px;
list-style: none;
}
.lbtn,
.rbtn {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.lbtn {
left: 20px;
}
.rbtn {
right: 20px;
}
```
JS代码如下:
```
var wrap = document.getElementById('wrap');
var pics = document.getElementsByClassName('pics')[0];
var lbtn = document.getElementById('lbtn');
var rbtn = document.getElementById('rbtn');
var index = 0;
var timer;
function animate(offset) {
var newLeft = parseInt(pics.style.left) + offset;
pics.style.left = newLeft + 'px';
if (newLeft > -800) {
pics.style.left = -3200 + 'px';
}
if (newLeft < -3200) {
pics.style.left = -800 + 'px';
}
}
function play() {
timer = setInterval(function() {
rbtn.onclick();
}, 2000);
}
function stop() {
clearInterval(timer);
}
rbtn.onclick = function() {
if (index == 3) {
index = 0;
} else {
index++;
}
animate(-800);
}
lbtn.onclick = function() {
if (index == 0) {
index = 3;
} else {
index--;
}
animate(800);
}
wrap.onmouseover = stop;
wrap.onmouseout = play;
play();
```
该代码使用了 JavaScript 来实现轮播效果。其中 animate 函数用来实现轮播动画,play 函数和 stop 函数用来控制自动轮播的开始和停止,rbtn.onclick 和 lbtn.onclick 用来控制点击按钮进行轮播,wrap.onmouseover 和 wrap.onmouseout 用来控制鼠标移入移出时自动轮播的开始和停止。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)