JS轮播图，拖拽旋转木马

最新推荐文章于 2024-07-15 18:00:00 发布

柠檬boy

最新推荐文章于 2024-07-15 18:00:00 发布

阅读量252

点赞数

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/qq_60891094/article/details/124525985

版权

该博客详细介绍了如何使用HTML、CSS和JavaScript实现两种旋转木马效果：点击切换和拖动旋转。第一种实现包括自动切换和无缝衔接功能，图片可以平滑过渡；第二种则是通过鼠标拖动实现3D旋转，提供了一种动态交互体验。文章还讨论了可能存在的问题，如点击过快，以及解决策略。

摘要由CSDN通过智能技术生成

旋转木马

功能包括点击切换，自动切换，无缝衔接

图片包括

HTML样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="animate.js"></script>
    <script src="index.js"></script>
    <style>

    </style>
</head>

<body>
    <div class="box">
        <ul class="con">
            <li>
                <a href=""><img src="../img/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../img/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../img/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../img/focus3.jpg" alt=""></a>
            </li>
        </ul>
        <div class="cricle">
            <a href="#" class="current">活动促销</a>
            <a href="#">抽免费商品</a>
            <a href="#">联名八音盒入线</a>
            <a href="#">商户特权上新</a>
        </div>
    </div>

</body>

</html>

css样式


* {
    margin: 0;
    padding: 0;
}

.box {
    margin: 10px 10px 10px;
    width: 721px;
    height: 495px;
    position: relative;
    overflow: hidden;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.con {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
}

.con li {
    float: left;
}

.cricle {
    position: relative;
    left: 0;
    top: 455px;
    display: flex;
    width: 721px;
    height: 40px;
}

.cricle a {
    flex-grow: 1;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #b1b2be;
}

.current {
    background: rgba(255, 255, 255, 0.15);
    color: #f3c258;
}

.pink {
    background-color: pink;
}

.purple {
    width: 200px;
    height: 200px;
    background-color: pink;
}

JS样式


//想让页面加载
window.addEventListener('load', function() {
//获取各个元素
    var ul1 = document.querySelector('.con');
    var ul2 = document.querySelector('.cricle');
    var box = document.querySelector('.box');
//获取大盒子的宽度
    var boxwidth = box.offsetWidth;
    //num为图片的索引
    var num = 0;
    //下方按钮的索引
    var cricle = 0;
    for (var i = 0; i < ul2.children.length; i++) {
        //自定义个属性，方便之后查找
        //也可以用 ul2.children[i].index=i;来定义
        ul2.children[i].setAttribute('date-index', i);
        ul2.children[i].addEventListener('mouseover', function() {
            for (var j = 0; j < ul2.children.length; j++) {
                ul2.children[j].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('date-index');
            num = index;
            cricle = num;
            animate(ul1, -index * boxwidth);
        });
    }
    var first = ul1.children[0].cloneNode(true);
    ul1.appendChild(first);
//动画函数
    function dong() {
        if (num == ul1.children.length - 1) {
            ul1.style.left = 0;
            num = 0;
        }
        num++;
        cricle++;
        if (cricle == ul2.children.length) {
            cricle = 0;
        }
        animate(ul1, -num * boxwidth);
        cricleChange();
    }
    setInterval(dong, 2000);
//选中的按钮
    function cricleChange() {
        for (var i = 0; i < ul2.children.length; i++) {
            ul2.children[i].className = '';
        }
        ul2.children[cricle].className = 'current';
    }
})

动画函数

function animate(obj, target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var length = (target - obj.offsetLeft) / 10;
        length = length > 0 ? Math.ceil(length) : Math.floor(length);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            
        }
        obj.style.left = obj.offsetLeft + length + 'px';
    }, 15)
}

总结下：这个是没有左右点击切换的，那个问题主要注意点就是可能存在点击过快问题，可以用节流阀控制或者用定时器控制，其他功能都挺完善的

托转旋转木马

我用的图片是阴阳师官网上的图片，格式都一样

HTML样式


<div class="str_box ">
    <div class="str_box_son ">
        <img src="images/shishen1.jpg " alt=" ">
        <img src="images/shishen2.jpg " alt=" ">
        <img src="images/shishen3.jpg " alt=" ">
        <img src="images/shishen4.jpg " alt=" ">
        <img src="images/shishen5.jpg " alt=" ">
        <img src="images/shishen6.jpg " alt=" ">
        <img src="images/shishen7.jpg " alt=" ">
    </div>
</div>

css样式

.part-xzmm .str_box {
    perspective: 800px;
    transform: translateY(220px);
}

.str_box .str_box_son {
    width: 165px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    margin: auto;
}

.str_box_son img {
    border: 2px solid;
    border-image: linear-gradient(pink, skyblue) 15 15;
    width: 100%;
    height: 100%;
    position: absolute;
}

JS样式

//旋转木马
var part_xzmm = document.querySelector('.part-xzmm');
var str_box_son = document.querySelector('.str_box_son');
var str_son_length = str_box_son.children.length;
var jiaodu = 360 / str_son_length;
//初始将每个图片平均分配角度
for (var i = 0; i < str_box_son.children.length; i++) {
    str_box_son.children[i].style.transform = "rotateY(" + jiaodu * i + "deg) " + "translateZ(250px)";
    str_box_son.children[i].style.transition = "transform 1s " + (str_son_length - i) * 0.1 + "s";
}
var lastX, lastY, nowX, nowY,
    disX = 0,
    disY = 0,
    roY = 0,
    roX = -10,
    timer;
//点击整个盒子
part_xzmm.addEventListener('mousedown', function(e) {
    var e = e || window.event;
    clearInterval(timer);
    e.preventDefault();
    //获取初始点击的坐标
    lastX = e.clientX;
    lastY = e.clientY;

    document.addEventListener('mousemove', mouseMove);
    document.addEventListener('mouseup', mouseup);

})

function mouseMove(e) {

    // 获取移动后的鼠标坐标
    nowX = e.clientX;
    nowY = e.clientY;
    // 获取鼠标移动距离
    disX = nowX - lastX;
    disY = nowY - lastY;
    //计算图片旋转角度
    roX -= disY * 0.2;
    roY += disX * 0.2;
    str_box_son.style.transform = "rotateX(" + roX + "deg) " + "rotateY(" + roY + "deg)"
    str_box_son.style.cursor = 'pointer';
    // 让last始终与now相差不远，改变鼠标点击位置，避免旋转速度过快
    lastX = nowX;
    lastY = nowY;
}

function mouseup(e) {
    document.removeEventListener('mousemove', mouseMove);
    clearInterval(timer);
    // 定时器，逐渐降低旋转角度，直到dis小于一定距离后，停止移动
    timer = setInterval(function() {
        // 逐渐降低移动距离
        disX *= 0.98;
        disY *= 0.98;
        // 获得的角度也逐渐减小
        roX -= disY * 0.2;
        roY += disX * 0.2;
        str_box_son.style.transform = "rotateX(" + roX + "deg) " + "rotateY(" + roY + "deg)"
        str_box_son.style.cursor = 'pointer';
        //  当dis小于0.1时停止移动
        if (Math.abs(disX) < 0.1 && Math.abs(disY) < 0.1) {
            clearInterval(timer);
        }
    }, 20)
}