淘宝商品轮播图

最新推荐文章于 2022-04-11 20:54:01 发布

ヽ错落不堪的年华。

最新推荐文章于 2022-04-11 20:54:01 发布

阅读量715

点赞数

分类专栏：技术交流前端小功能技术总结文章标签：轮播图 js 前端小功能前端开发

本文链接：https://blog.csdn.net/qq_44777678/article/details/90115066

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="box">
        <!-- 相框 -->
        <div id="xiangkuang">
             <ul id="ulobj">
                <li><a href=""><img src="images/1.jpg" alt=""></a></li>
                <li><a href=""><img src="images/2.jpg" alt=""></a></li>
                <li><a href=""><img src="images/3.jpg" alt=""></a></li>
                <li><a href=""><img src="images/4.jpg" alt=""></a></li>
                <li><a href=""><img src="images/5.jpg" alt=""></a></li>
                <li><a href=""><img src="images/1.jpg" alt=""></a></li>
            </ul>
        </div>
        <!-- 圆点 -->
        <ol id="olobj">
            <li class="bjys"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!-- 左右按钮 -->
        <div id="anniu">
            <span id="left"> < </span>
            <span id="right"> > </span>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    box-sizing: border-box;
}
#box{
    width: 508px;
    height: 208px;
    background: #fff;
    border: 1px solid #333;
    padding: 3px 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#xiangkuang{
    width:500px;
    height: 200px;
    position: relative;
    background: pink;
    overflow: hidden;
    font-size: 0;
}
#xiangkuang ul {
    position: absolute;
    left: 0;
    top: 0px;
    width: 3000px;
  }
#xiangkuang li a img{
    display: block;
    width: 500px;
    height: 200px;
    overflow: hidden;
    float: left;
}

/* 圆点 */
#olobj{
    height: 16px;
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .3);
    display: block;
}
#olobj li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    float: left;
    margin: 3px 5px;
    cursor: pointer;
    display: block;
}
/* 圆点背景颜色 */
#olobj .bjys{
    background-color: red;
}

/* 按钮 */
#anniu{
    display: none;
}
#anniu span{
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      color: #fff;
      font-size:16px;
      opacity: 0.3;
      border: 1px solid #fff;
      cursor: pointer;
    }
#anniu #right{
      right: 2px;
}
#anniu #left{
    left: 2px;
}

js部分

// id封装函数
function my$(id) {
    return document.getElementById(id);
}
// 动画封装函数
function animate(element,target) {
    // 先清除定时器
    clearInterval(element.timeId);
    // 设置定时器.只能产生一个定时器
    element.timeId = setInterval(function() {
        // 获取当前div的位置
        var current = element.offsetLeft;//数组类型;
        // 设置div每次移动的距离---像素
        var step = 100;
        // 判断要移动的是正数还是负数
        step = current < target ? step : -step;
        // 每次移动后的距离
        current += step;
        // 判断当前移动后的位置是否到达目标位置
        if(Math.abs(target - current) > Math.abs(step)) {
            
            element.style.left = current + "px";
        }else{
            // 清除定时器
            clearInterval(element.timeId);
            element.style.left = target + "px";
        }
    },10);
}

// 获取最外面的div
var box = my$("box");
// 获取相框的宽度
var imgWidth = my$("xiangkuang").offsetWidth;
// 获取ul里的li
var list = my$("ulobj").getElementsByTagName("li");
// 获取ol里的li
var liobj = my$("olobj").getElementsByTagName("li");
// 获取左右按钮div
var anniu = my$("anniu");

// 全局变量
var pic = 0;
// console.log(liobj);
// 遍历ul里面的li标签
for(var i=0;i<liobj.length;i++ ) {

    // 给ol里面的li自定义索引
    liobj[i].setAttribute("index",i);
    // 给ol里面的li注册点击事件
    liobj[i].onclick = function() {
  
        // 循环遍历ol里面的li标签
        for(var j =0;j<liobj.length;j++ ) {
            // 先干掉ol里面所有li的背景
            liobj[j].removeAttribute("class");
        }
        // 设置点击进来li的背景颜色
        this.className = "bjys";
        // 设置ol里面的li的索引值
        pic =this.getAttribute("index");
        //  动画移动ul里面的li
        animate(my$("ulobj"),-pic*imgWidth);
    };
}

// 鼠标进入div显示左右按钮
box.onmouseover = function() {
    anniu.style.display = "block";
    clearInterval(tt);
}
// 鼠标离开div隐藏左右按钮
box.onmouseout = function() {
    anniu.style.display = "none";
    tt = setInterval(dianjia,5000);
}

var tt = setInterval(dianjia,5000);
// 点击右标签
my$("right").onclick = dianjia;
 function dianjia() {
    // 判断无缝连接
    if(pic == liobj.length-1 ) {
        // 如果图片超过了5就返回0；
        pic = 0;
        // ul原来的位置
        my$("ulobj").style.left = 0 + "px";
    }else{
        // 没有超出就继续++
        pic++;
        animate(my$("ulobj"),-pic*imgWidth);
        // 判断下面的红标跟着按钮走
    }

    if(pic == list.length-1 ) {
        // 等于5把所有按钮颜色干掉
        for(var i=0;i<liobj.length-1;i++) {
            liobj[i].removeAttribute("class");
        }
        // 然后给第一个按钮上颜色
        liobj[0].className = "bjys";
    }else{
        // 点击的按钮不等于5判断点击的是哪一个按钮
        for(var i =0;i<liobj.length;i++) {
            liobj[i].removeAttribute("class");
        }
        liobj[pic].className = "bjys";
    }
};
// 点击左标签
my$("left").onclick = function() {
    // 判断pic等不等于0；
    if(pic == 0){
        pic = 5;
        my$("ulobj").style.left = -pic*imgWidth + "px";
    }
    // 不等于0
    pic--
    animate(my$("ulobj"),-pic*imgWidth);
    // 同步小按钮按时先干掉全部小按钮颜色
    for(var i=0;i<liobj.length;i++) {
        liobj[i].removeAttribute("class");
    }
    // 设置当前索引的颜色
    liobj[pic].className = "bjys";
};

ヽ错落不堪的年华。

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
淘宝商品轮播图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>哈哈</title> <style> * { margin: 0; padding: 0; } .box { ...
复制链接

扫一扫