js实现按钮控制图片向左、向右、向上、向下无缝轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>向左、向右、向上、向下无缝滚动</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }

            .button{
                width: 640px;
                margin: 50px 0 0 80px;
            }

            .button input{
                width: 80px;
                height: 40px;
                line-height: 40px;
                border: none;
                outline: none;
                background: #8E3E8B;
                border-radius: 10px;
                color: #fff;
                font-size: 14px;
                margin-left: 20px;
                cursor: pointer;
            }

            ul,li{
    list-style</
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 JS 无缝轮播,鼠标移入小圆点改变图片的方法有很多,以下是其中一种实现方式: HTML 代码: ```html <div id="slider"> <ul id="slider-list"> <li><img src="img/1.jpg" alt="图片1"></li> <li><img src="img/2.jpg" alt="图片2"></li> <li><img src="img/3.jpg" alt="图片3"></li> <li><img src="img/4.jpg" alt="图片4"></li> <li><img src="img/5.jpg" alt="图片5"></li> </ul> <ul id="slider-dots"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> ``` CSS 代码: ```css #slider { position: relative; width: 600px; height: 400px; overflow: hidden; } #slider-list { position: absolute; width: 3000px; height: 400px; padding: 0; margin: 0; list-style: none; transition: left 0.5s ease; } #slider-list li { float: left; width: 600px; height: 400px; } #slider-dots { position: absolute; right: 20px; bottom: 20px; padding: 0; margin: 0; list-style: none; } #slider-dots li { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer; } #slider-dots li.active { background-color: #f00; } ``` JS 代码: ```javascript window.onload = function() { var sliderList = document.getElementById("slider-list"); var sliderItems = sliderList.getElementsByTagName("li"); var sliderDots = document.getElementById("slider-dots"); var sliderDotItems = sliderDots.getElementsByTagName("li"); var sliderIndex = 0; var maxIndex = sliderItems.length / 2 - 1; var animateInterval; // 复制列表项,实现无缝轮播 sliderList.innerHTML += sliderList.innerHTML; // 自动轮播 animateInterval = setInterval(function() { sliderIndex++; if (sliderIndex > maxIndex) { sliderList.style.left = "0px"; sliderIndex = 1; } sliderList.style.left = -(sliderIndex * 600) + "px"; setActiveDot(); }, 2000); // 鼠标移入小圆点切换图片 for (var i = 0; i < sliderDotItems.length; i++) { sliderDotItems[i].index = i; sliderDotItems[i].onmouseover = function() { sliderIndex = this.index; sliderList.style.left = -(sliderIndex * 600) + "px"; setActiveDot(); }; } // 设置当前小圆点状态 function setActiveDot() { for (var i = 0; i < sliderDotItems.length; i++) { sliderDotItems[i].className = ""; } sliderDotItems[sliderIndex % 5].className = "active"; } }; ``` 这段代码实现了一个横向方向的无缝轮播,每隔两秒钟切换一张图片。鼠标移入小圆点切换图片。可以根据实际需要进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值