jQuery（十）幻灯片（一个综合练习）

小东西的东西

于 2022-03-16 20:52:19 发布

阅读量71

点赞数

分类专栏： java 后端文章标签： jquery css3 html

本文链接：https://blog.csdn.net/m0_67393619/article/details/123536009

版权

java 同时被 2 个专栏收录

287 篇文章 20 订阅

订阅专栏

后端

12 篇文章 1 订阅

订阅专栏

本文详细介绍了使用HTML和CSS创建幻灯片的效果，包括原理、代码实现、效果演示和关键点总结。通过设置CSS样式和JavaScript事件处理，实现了图片的自动播放、左右切换以及小点指示器的功能。同时还强调了防止快速切换图片的优化策略和代码组织的重要性。

摘要由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="./css/幻灯片.css">
    <script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            var $box = $('#box');
            var $ul_list = $('ul');
            var $li_list = $('ul li');
            var $len = $li_list.length;
            var $left = $('.left_move');
            var $right = $('.right_move');
            $point_list = $('.point');
            var $nowli = 0;
            var $preli = 0;
            var $clickmore = false;//设置一个布尔量，通过切换布尔量防止暴力切换图片操作
            var timer = null;
            var move_num = 400;
            //添加小点
            $sTr = '<span>';
                for(var i=0;i<$len;i++){
                    $point_list.append($sTr);
                }
            var $points = $('.point span');
            $points.eq(0).addClass('active');
            //小点点击事件
            $points.click(function(){
                $nowli = $(this).index();
                if($nowli == $preli){
                    return;             
                }
                add_active($(this));
                if($clickmore){
                    return;
                }
                move();
                })
            //向左点击事件
            $left.click(function(){
                document.title = $clickmore;
                if($clickmore){
                    return;
                }
                $clickmore = true;
                $nowli++;
                move();
                add_active($points.eq($nowli));
                })
            //向右点击事件
            $right.click(function(){
                if($clickmore){
                    return;
                }
                $clickmore = true;
                $nowli--;
                move();
                add_active($points.eq($nowli));
            })
            //循环切图播放
            timer = setInterval(autoplay,1000);//注意导入的函数不要加括号，否则会立马执行。
            //鼠标移到图上、圆点上或方向标上，停止自动播放
            $box.mouseover(function(){
                clearInterval(timer);
            });
            //鼠标移出图上、圆点上或方向标，开始自动播放
            $box.mouseout(function(){
                timer = setInterval(autoplay,1000);
            })
            //圆点被选中时执行的函数
            function add_active(event){
                event.addClass('active').siblings().removeClass('active');
            }
            //图片切换时的移动函数
            function move(){
                if($nowli>$len-1){
                    $nowli = 0;
                    $preli = $len-1;
                    move_sytle(move_num,-move_num);
                    return;
                }
                else if($nowli<0){
                    $nowli =$len-1 ;
                    $preli = 0;
                    move_sytle(-move_num,move_num);
                    return;
                }
                if($nowli<$preli ){
                    //由于点击的点的索引值小于之前的，则先将点击索引值对应的照片快速拉到左边再运行动画
                    move_sytle(-move_num,move_num);
                }
                else{
                    move_sytle(move_num,-move_num);      
                }
            }
            //移动设置方式函数
            function move_sytle(num1,num2){
                $li_list.eq($nowli).css({'left':num1});
                $li_list.eq($nowli).animate({'left':0});
                $li_list.eq($preli).animate({'left':num2},function(){
                    $clickmore = false;
                });
                $preli = $nowli;
            }
            //自动播放设置
            function autoplay(){
                $nowli++;
                move();
                add_active($points.eq($nowli));
            }
        })
    </script>
</head>
<body>
    <h1>最美女神jisoo</h1>
    <div id="box">
        <ul>
            <li><a href="javascript:;"><img src="./img/img1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/img2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/img3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/img4.jpg" alt=""></a></li>
        </ul>
        <div class="point">
        </div>
        <span class="iconfont icon-xiangzuo1 left_move"></span>
        <span class="iconfont icon-xiangyou1 right_move"></span>
    </div>
</body>
</html>

CSS代码

@import '//at.alicdn.com/t/font_3233091_vbj8k8jhtk.css';
h1{
    text-align: center;
    color: pink;
}
#box{
    position: fixed;
    overflow: hidden;
    width: 400px;
    height: 500px;
    box-sizing: content-box;
    border: 20px solid pink;
    border-radius: 5px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.iconfont{
    color: pink;
    font-size: 50px;
    font-weight: bold;
}

.icon-xiangyou1{
    display: inline-block;
    position: fixed;
    top: 290px;
    right: 430px;

}

.icon-xiangzuo1{
    position: fixed;
    top: 290px;
    left: 430px;
}

ul{
    list-style: none;
    position: absolute;
    height: 500px;
    padding: 0;
    margin: 0;
}
li{
    position: absolute;
    left: 0;
}
li:nth-child(n+2){
    left: 400px;
}

li img{
    width: 400px;
}
.point{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    text-align: center;
}
.point span{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin:0 5px;
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.point .active{
    background-color: #ccc;
}

效果演示

请添加图片描述

总结

1. 重点是要弄明白一个项目的原理，才好着手写代码。
2. var $clickmore = false;//设置一个布尔量，通过切换布尔量防止暴力切换图片操作，这是一部关键操作，用于解决快速点击切换图片导致的bug
3. timer = setInterval(autoplay,1000);//注意导入的函数不要加括号，否则会立马执行。
4. 移动方式的设置是着手于原理所设置的巧妙方式，可以细细斟酌。
5. 最后，感谢智秀对我学习事业所作出的贡献，哈哈哈哈哈！

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的点击我的Gitee获取。
还有高级java全套视频教程 java进阶架构师视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。