广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >常用相册图片左右点击切换轮播js特效怎么实现
  • 637

0
分享到

常用相册图片左右点击切换轮播js特效怎么实现

2024-04-02 19:04:59 637人浏览 薄情痞子
摘要

这篇文章主要讲解了“常用相册图片左右点击切换轮播js特效怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“常用相册图片左右点击切换轮播js特效怎么实现”

这篇文章主要讲解了“常用相册图片左右点击切换轮播js特效怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“常用相册图片左右点击切换轮播js特效怎么实现”吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>常用相册图片左右点击切换轮播js特效</title>

        <meta name="keyWords" content="相册,图片,左右,点击切换,轮播,js特效">

        <meta name="description" content="常用相册图片左右点击切换轮播，可应用在商品详情、汽车展示、相册展示等，Jquery左右按钮切换图片，点击小图缩略图可切换到对应的大图，当缩略图过多时可点击左右按钮控制底部缩略图片左右滚动，进行更多的图片切换。" />

    </head>

 

    <body>

 

        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

 

                //点击小图切换大图

                $("#thumbnail li a").click(function() {

                    $(".zoompic img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});

                    $("#thumbnail li.current").removeClass("current");

                    $(this).parents("li").addClass("current");

                    return false;

                });

                $(".zoompic>img").load(function() {

                    $(".zoompic>img:hidden").show();

                });

 

                //小图片左右滚动

                var $slider = $('.slider ul');

                var $slider_child_l = $('.slider ul li').length;

                var $slider_width = $('.slider ul li').width();

                $slider.width($slider_child_l * $slider_width);

 

                var slider_count = 0;

 

                if ($slider_child_l < 5) {

                    $('#btn-right').CSS({cursor: 'auto'});

                    $('#btn-right').removeClass("dasabled");

                }

 

                $('#btn-right').click(function() {

                    if ($slider_child_l < 5 || slider_count >= $slider_child_l - 5) {

                        return false;

                    }

 

                    slider_count++;

                    $slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');

                    slider_pic();

                });

 

                $('#btn-left').click(function() {

                    if (slider_count <= 0) {

                        return false;

                    }

                    slider_count--;

                    $slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');

                    slider_pic();

                });

 

                function slider_pic() {

                    if (slider_count >= $slider_child_l - 5) {

                        $('#btn-right').css({cursor: 'auto'});

                        $('#btn-right').addClass("dasabled");

                    }

                    else if (slider_count > 0 && slider_count <= $slider_child_l - 5) {

                        $('#btn-left').css({cursor: 'pointer'});

                        $('#btn-left').removeClass("dasabled");

                        $('#btn-right').css({cursor: 'pointer'});

                        $('#btn-right').removeClass("dasabled");

                    }

                    else if (slider_count <= 0) {

                        $('#btn-left').css({cursor: 'auto'});

                        $('#btn-left').addClass("dasabled");

                    }

                }

 

            });

        </script>

 

        <style type="text/css">

            *{margin:0;padding:0;list-style-type:none;}

            a,img{border:0;}

            body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}

           

            .zoombox{width:686px;margin:20px auto 0 auto;}

            .zoompic{border:solid 1px #dfdfdf;width:684px;height:394px;background:url(images/loading.gif) no-repeat 50% 50%;}

 

            .sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}

            .sliderbox .arrow-btn{width:38px;height:76px;background:url(images/arrow-btn.png) no-repeat;cursor:pointer;}

            .sliderbox #btn-left{float:left;background-position:0 0;}

            .sliderbox #btn-left.dasabled{background-position:0 -76px;}

            .sliderbox #btn-right{float:right;background-position:-38px 0;}

            .sliderbox #btn-right.dasabled{background-position:-38px -76px;}

            .sliderbox .slider{float:left;height:76px;width:605px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}

            .sliderbox .slider ul{position:absolute;left:0;width:999em;}

            .sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;}

            .sliderbox .slider li img{border:solid 1px #dfdfdf;}

            .sliderbox .slider li.current img{border:solid 1px #3366cc;}

        </style>

 

        <div class="zoombox">

 

            <div class="zoompic"><img src="images/3427.jpg" width="684" height="394" alt="美女配奥迪A4L墙纸" /></div>

 

            <div class="sliderbox">

                <div id="btn-left" class="arrow-btn dasabled"></div>

                <div class="slider" id="thumbnail">

                    <ul>

                        <li class="current"><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>

                        <li><a href="images/52347.jpg" target="_blank"><img src="images/41a.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸02" /></a></li>

                        <li><a href="images/23463.jpg" target="_blank"><img src="images/234fa.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸03" /></a></li>

                        <li><a href="images/3247.jpg" target="_blank"><img src="images/412saf.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸04" /></a></li>

                        <li><a href="images/26547.jpg" target="_blank"><img src="images/41356a.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸05" /></a></li>

                        <li><a href="images/2153.jpg" target="_blank"><img src="images/432sadf.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸06" /></a></li>

                        <li><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>

                    </ul>

                </div>

                <div id="btn-right" class="arrow-btn"></div>

            </div>

 

        </div><!--slider end-->

    </body>

</html>

感谢各位的阅读，以上就是“常用相册图片左右点击切换轮播js特效怎么实现”的内容了，经过本文的学习后，相信大家对常用相册图片左右点击切换轮播js特效怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 常用相册图片左右点击切换轮播js特效怎么实现

本文链接: https://www.lsjlt.com/news/93625.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 常用相册图片左右点击切换轮播js特效怎么实现
    这篇文章主要讲解了“常用相册图片左右点击切换轮播js特效怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“常用相册图片左右点击切换轮播js特效怎么实现”...
    99+
    2022-10-19
  • vue自定义js图片碎片轮播图切换效果怎么实现
    这篇文章给大家分享的是有关vue自定义js图片碎片轮播图切换效果怎么实现的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。定义一个banner.js文件，代码如下;window.re...
    99+
    2022-10-19
  • JavaScript怎么实现左右全屏大图焦点图幻灯片切换效果
    这篇“JavaScript怎么实现左右全屏大图焦点图幻灯片切换效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下...
    99+
    2022-10-19
  • 怎么用js点击按钮实现多张图片循环切换
    本篇内容介绍了“怎么用js点击按钮实现多张图片循环切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！具体内容如下代码：<!DOCTYP...
    99+
    2023-06-28
  • 怎么用小程序swiper组件实现点击图片切换效果
    这篇文章主要讲解了“怎么用小程序swiper组件实现点击图片切换效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用小程序swiper组件实现点击图片切换效果”吧！　　小程序swiper...
    99+
    2023-06-26
  • 怎么用layui实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
    本篇内容主要讲解“怎么用layui实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用layui实现点击左侧导航切换右侧内容且右侧选项卡跟随...
    99+
    2023-06-09
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作