学习Js（1）-使用Jquery实现滑动切换效果

最新推荐文章于 2024-04-26 16:47:03 发布

VIP文章 KingArthur_Tao

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.8k

点赞数 1

分类专栏： javascript 文章标签： jquery javascript 滑动切换

本文链接：https://blog.csdn.net/kingarthur_tao/article/details/78499651

版权

1.前言杂谈：
对于Javascript 是从大二就开始接触了，那个时候刚开始接触到web开发。在公司实习期间，由于什么都不会，带我师兄就让我在百度传课上看了一周的传智播客的教学视频，这才有点底子，可以写写正则，做表单验证什么的。到现在刚参加工作的时候，一直不太想从事前端方面的工作，觉得这个应该由公司前端来完成，我是用C#的，让我能专注的写后台就好。
但现实比较那啥，领导要求啊，没办法，只能写了。在接触了一段时间后，也着实加深了自己对整个web开发的理解，从HTML到CSS，再到JS，虽然简单，上手容易，但这是针对学习门槛上的。任何一个需要多人参与才能完成的网站项目，都需要对这三门语言进行深入理解才行。如：只有理解CSS的样式继承层次，对HTML代码结构做好规划，才能够良性的对网站中的页面进行增添删除，不至于显得过于臃肿，也不会造成修改了某局部的样式之后，造成网站中其余页面错位等情况。

2.需求说明：
网站首页的广告位，要增添左右滑动效果；
方便以后对广告位进行扩展；
方便移植到其它需要滑动的区域中。

示例下载1

3.效果展示图：
这里写图片描述

4.重要代码展示及说明：

/*HTML代码结构*/
<body>
    <div class="cooperation">
        <div class="ico" >/*图标*/
            <span id="icoL" ></span>
            <span id="icoR" ></span>
        </div>
        <!--网页中的展示区域，这里注意style中的三个属性是必须的，如果滑动效果出现了弹跳或是不流畅等现象，可以对width属性进行微调-->
        <ul class="img_display" style="overflow:hidden;white-space:nowrap;width: 1175px;" >

            <li ><img src="1.png"></li>
            <li ><img src="2.png"></li>
            <li ><img src="3.png"></li>
            <li ><img src="4.png"></li>

        </ul>
        <!--这里是隐藏区域，用来存放未展示出来的图片-->
        <!--这里有个问题就是，每次页面加载的时候，隐藏区域的图片未被展示出来，但仍然请求了服务器的资源，这样不太好，但一时也没想到好的方法来存储隐藏区域的信息-->
        <ul class="img_hidden" style="display:none;">
            <li><img  src="5.png"></li>
            <li ><img src="6.png"></li>
            <li ><img src="7.png"></li>
            <li ><img src="8.png"></li>
        </ul>    
        <div class="clear"></div>
    </div>
</body>

下面是JS的代码展示：
这里主要使用了Jquery中的animate函数。简单来说这个函数是在指定时间内，将指定的元素逐渐移动到某一位置。animate用法参考

需要注意的是，指定函数位置时可以使用left，right，top，bottom，也可以使用marginLeft，marginTop等，区别在于前者需要HTML元素本身的position设置成为absolute即绝对定位，后者则没什么要求，都可以使用。

这里其实涉及到CSS定位的一个层次问题，笔者在这方面没有什么了解，就不过多解释了。

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $("#icoL").bind("click",function(){
    
        MoveLeft(".img_display",4,"li",".img_hidden");
    });
    $("#icoR").bind("click",function(){
    
        MoveRight(".img_display",4,"li",".img_hidden");
    });

//往左滑动
//displayRegion 显示区域
//displayNum 显示区域中，显示元素个数
//elementName 显示元素标识
//HiddenRegion 隐藏区域
function MoveLeft(displayRegion, displayNum, elementName, HiddenRegion) {
    
    //防止重复点击
    if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
        return;
    }

    //算滑动距离
    var width = parseInt($($(displayRegion)[0]).css("width"));
    var marginLeft = 0;
    $(displayRegion + " " + elementName).each(function (index) {
    
        if (index > 0) {
            //除去displayRegion中第一个元素的marginLeft，因为滑动是以第一个元素本身的左边为基准开始滑动的。
            marginLeft += parseInt($(this).css("marginLeft"));
        }
    });

    //原始滑动距离
    var distance = (width - marginLeft) / displayNu

最低0.47元/天解锁文章

KingArthur_Tao

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
学习Js（1）-使用Jquery实现滑动切换效果

代码实现了以下几点需求：1.网站首页广告位进行滑动展示；2.网站首页的广告位不够用，需要按地区进行分类；3.当某一地区广告位不足时，可以进行循环滑动；4.全国地区类别中，可以通过滑动浏览到所有的公司，公司按加入时间降序排列。5.方便在不同地区里新增广告位；6.方便移植到其它需要滑动的区域中。
复制链接

扫一扫