用js实现简单的图片轮播效果

系统管理员 2023-05-30 09:27 25阅读 0赞

# 用js实现简单的图片轮播效果 #

## js部分 ##

<script>
        //跑动的次数
        var count = 0;
        //动画的执行方向
        var isgo = false;
        //定义计时器对象
        var timer;
        
        window.onload = function () {
            获取ul元素*/
            var ul_img = document.getElementsByClassName("ul_img")[0];
            //获取所有的图片元素
            var li_img = document.getElementsByClassName("li_img");
            //获取控制方向的箭头元素
            var arrow = document.getElementsByClassName("arrow");
            //获取所有按钮元素
            var div_btn = document.getElementsByClassName("div_btn");
            div_btn[0].style.backgroundColor = "aqua";
    
    
            /*定义计时器，控制图片移动*/
            showtime();
            function showtime() {
                timer = setInterval(function () {
                //判断方向
                    if (isgo == false) {
                        count++;
                        //移动图片位置
                        ul_img.style.transform = "translate(" + -800 * count + "px)";
                        if (count >= li_img.length - 1) {
                            count = li_img.length - 1;
                            isgo = true; 
                        }
                    }
                    else {
                        count--;
                        ul_img.style.transform = "translate(" + -800 * count + "px)";
                        if (count <= 0) {
                            count = 0;
                            isgo = false;
                        }
                    }
           //刷新按钮颜色
                    for (var i = 0; i < div_btn.length; i++) 
                        div_btn[i].style.backgroundColor = "aquamarine";
                    }
                    点击按钮改变按钮颜色
                    div_btn[count].style.backgroundColor = "aqua";
                    
                }, 4000)
            }
    
            /*鼠标进入左右方向键操作*/
            for (var i = 0; i < arrow.length; i++) {
                //鼠标悬停时
                arrow[i].onmouseover = function () {
                    //停止计时器
                    clearInterval(timer);
                }
                //鼠标离开时
                arrow[i].onmouseout = function () {
                    //添加计时器
                    showtime();
                }
                arrow[i].onclick = function () {
                    //区分左右
                    if (this.title == 0) {
                        count++;
                        if (count > 3) {
                            count = 0;
                        }
                    }
                    else {
                        count--;
                        if (count < 0) {
                            count = 3;
                        }
                    }
    
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
    
                    for (var i = 0; i < div_btn.length; i++) {
                    
                        div_btn[i].style.backgroundColor = "aquamarine";
                    }
                    div_btn[count].style.backgroundColor = "aqua";
                }
            }
    
            //鼠标悬停在底部按钮的操作
            for (var b = 0; b < div_btn.length; b++) {
                div_btn[b].index = b;
                div_btn[b].onmouseover = function () {
    
                    clearInterval(timer);
    
                    for (var a = 0; a < div_btn.length; a++) {
                        div_btn[a].style.backgroundColor = "aquamarine";
                    }
                    div_btn[this.index].style.backgroundColor = "aqua";
                    让count值对应
                    为了控制方向
                    if (this.index == 3) {
                        isgo = true;
                    }
                    if (this.index == 0) {
                        isgo = false;
                    }
                    count = this.index;
                    ul_img.style.transform = "translate(" + -800 * this.index + "px)";
                }
                div_btn[b].onmouseout = function () {
                    //添加计时器
                    showtime();
                }
            }
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关用js实现简单的图片轮播效果

用js实现简单的图片轮播效果 js部分 <script> //跑动的次数 var count = 0; //

系统管理员/ 2023年05月30日 09:27/ 0 赞/ 26 阅读

相关纯CSS、JS简单实现图片轮播效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

旧城等待，/ 2023年01月14日 01:59/ 0 赞/ 164 阅读

相关简单JS实现图片轮播效果（一）

实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

不念不忘少年蓝@/ 2023年01月13日 05:50/ 0 赞/ 170 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 321 阅读

相关 jquery实现简单图片轮播效果

[下载地址][Link 1]jquery实现简单图片轮播效果，按钮控制上下图片翻转效果。 ![1631561661.png][] dd: [Link 1]: https

柔情只为你懂/ 2022年09月11日 11:10/ 0 赞/ 290 阅读

相关 js实现简单轮播效果

html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年06月09日 08:45/ 0 赞/ 205 阅读

相关 html+css+js简单实现图片轮播效果

<html> <head> <style type="text/css"> \\{background-color:green;\} \lunbo\{ w

雨点打透心脏的1/2处/ 2022年05月29日 06:28/ 0 赞/ 284 阅读

相关原生js实现简单图片轮播效果+用bootstrap4框架实现轮播图对比

原生js实现图片轮播效果： ![原生js][js] 代码： html+css： <!DOCTYPE html> <html lang

╰半夏微凉°/ 2022年04月05日 03:56/ 0 赞/ 338 阅读

相关用js写图片轮播效果

用js写图片轮播效果轮播效果有两种，位移轮播（位移又分为上下和左右）和渐变轮播。两种轮播的HTML是一样的结构，只是css和js有一点点区别。 ![效果图][wate

雨点打透心脏的1/2处/ 2022年02月24日 11:55/ 0 赞/ 234 阅读

相关【用HTML+CSS实现简单的轮播图片效果】

本文主要从两种方式上实现轮播图片效果 -------------------- 方法一 \\\====================================

梦里梦外;/ 2021年12月04日 07:17/ 0 赞/ 826 阅读