尝试编辑HTML/JavaScript模板:如何点击更改图片,但不自动旋转图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (192)

我有一个可以旋转3张图片的网站(images/1felpla.jpgimages/1nicehum.jpgimages/hummu.jpg) 部。你可以浏览3张图片与箭头和点击箭头,这是我想要的。然而,图像自动旋转,这是我不想要的。我可以在这里剪切或修改任何JS代码吗?

下面是HTML:

<!-- Slide1 -->
<section class="section-slide">
    <div class="wrap-slick1">
        <div class="slick1">
            <div class="item-slick1 item1-slick1" style="background-image: url(images/1felpla.jpg);">
                <div class="wrap-content-slide1 sizefull flex-col-c-m p-l-15 p-r-15 p-t-150 p-b-170">
                    <span class="caption1-slide1 txt1 t-center animated visible-false m-b-15" data-appear="fadeInDown">
                        Dans
                    </span>

                    <h2 class="caption2-slide1 tit1 t-center animated visible-false m-b-37" data-appear="fadeInUp">
                        Diner
                    </h2>

                    <div class="wrap-btn-slide1 animated visible-false" data-appear="zoomIn">
                        <!-- Button1 -->
                        <a href="menu.html" class="btn1 flex-c-m size1 txt3 trans-0-4">
                            Menu
                        </a>
                        <br>
                        <div class="visible-on-mobile"> 
                            <a href="tel:555555555" class="btn1 flex-c-m size1 txt3 trans-0-4">Call</a>
                        </div>
                        <div class="visible-on-desktop">
                            <a href="contact.html" class="btn1 flex-c-m size1 txt3 trans-0-4">Contact</a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="item-slick1 item2-slick1" style="background-image: url(images/1nicehum.jpg);">
                <div class="wrap-content-slide1 sizefull flex-col-c-m p-l-15 p-r-15 p-t-150 p-b-170">
                    <span class="caption1-slide1 txt1 t-center animated visible-false m-b-15" data-appear="rollIn">
                        Dans 
                    </span>

                    <h2 class="caption2-slide1 tit1 t-center animated visible-false m-b-37" data-appear="lightSpeedIn">
                        Diner
                    </h2>

                    <div class="wrap-btn-slide1 animated visible-false" data-appear="slideInUp">
                        <!-- Button1 -->
                        <a href="menu.html" class="btn1 flex-c-m size1 txt3 trans-0-4">
                            Menu
                        </a>
                        <br>
                        <div class="visible-on-mobile"> 
                            <a href="tel:555555555" class="btn1 flex-c-m size1 txt3 trans-0-4">Call</a>
                        </div>
                        <div class="visible-on-desktop">
                            <a href="contact.html" class="btn1 flex-c-m size1 txt3 trans-0-4">Contact</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-slick1 item3-slick1" style="background-image: url(images/hummu.jpg);">
                <div class="wrap-content-slide1 sizefull flex-col-c-m p-l-15 p-r-15 p-t-150 p-b-170">
                    <span class="caption1-slide1 txt1 t-center animated visible-false m-b-15" data-appear="rotateInDownLeft">
                        Dans
                    </span>

                    <h2 class="caption2-slide1 tit1 t-center animated visible-false m-b-37" data-appear="rotateInUpRight">
                        Diner
                    </h2>

                    <div class="wrap-btn-slide1 animated visible-false" data-appear="rotateIn">
                        <!-- Button1 -->
                        <a href="menu.html" class="btn1 flex-c-m size1 txt3 trans-0-4">
                            Menu
                        </a>
                        <br>

                        <div class="visible-on-mobile"> 
                            <a href="tel:555555555" class="btn1 flex-c-m size1 txt3 trans-0-4">Call</a>
                        </div>
                        <div class="visible-on-desktop">
                            <a href="contact.html" class="btn1 flex-c-m size1 txt3 trans-0-4">Contact</a>
                        </div>
                    </div>
                    </div>
                </div>
            </div>



        <div class="wrap-slick1-dots"></div>
    </div>
</section>

以下是JavaScript:

(function ($) {
// USE STRICT
"use strict";

    /*[ Slick1 ]
    ===========================================================*/
    var itemSlick1 = $('.slick1').find('.item-slick1');
    var action1 = [];
    var action2 = [];
    var action3 = [];
    var cap1Slide1 = [];
    var cap2Slide1 = [];
    var btnSlide1 = [];

    for(var i=0; i<itemSlick1.length; i++) {
      cap1Slide1[i] = $(itemSlick1[i]).find('.caption1-slide1');
      cap2Slide1[i] = $(itemSlick1[i]).find('.caption2-slide1');
      btnSlide1[i] = $(itemSlick1[i]).find('.wrap-btn-slide1');
    }


    $('.slick1').on('init', function(){

        action1[0] = setTimeout(function(){
            $(cap1Slide1[0]).addClass($(cap1Slide1[0]).data('appear') + ' visible-true');
        },200);

        action2[0] = setTimeout(function(){
            $(cap2Slide1[0]).addClass($(cap2Slide1[0]).data('appear') + ' visible-true');
        },1000);

        action3[0] = setTimeout(function(){
            $(btnSlide1[0]).addClass($(btnSlide1)[0].data('appear') + ' visible-true');
        },1800);              
    });


    $('.slick1').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        dots: true,
        appendDots: $('.wrap-slick1-dots'),
        dotsClass:'slick1-dots',
        infinite: true,
        autoplay: true,
        autoplaySpeed: 6000,
        arrows: true,
        appendArrows: $('.wrap-slick1'),
        prevArrow:'<button class="arrow-slick1 prev-slick1"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
        nextArrow:'<button class="arrow-slick1 next-slick1"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',  
    });

    $('.slick1').on('afterChange', function(event, slick, currentSlide){ 
        for(var i=0; i<itemSlick1.length; i++) {

          clearTimeout(action1[i]);
          clearTimeout(action2[i]);
          clearTimeout(action3[i]);


          $(cap1Slide1[i]).removeClass($(cap1Slide1[i]).data('appear') + ' visible-true');
          $(cap2Slide1[i]).removeClass($(cap2Slide1[i]).data('appear') + ' visible-true');
          $(btnSlide1[i]).removeClass($(btnSlide1[i]).data('appear') + ' visible-true');

        }

        action1[currentSlide] = setTimeout(function(){
            $(cap1Slide1[currentSlide]).addClass($(cap1Slide1[currentSlide]).data('appear') + ' visible-true');
        },200);

        action2[currentSlide] = setTimeout(function(){
            $(cap2Slide1[currentSlide]).addClass($(cap2Slide1[currentSlide]).data('appear') + ' visible-true');
        },1000);

        action3[currentSlide] = setTimeout(function(){
            $(btnSlide1[currentSlide]).addClass($(btnSlide1)[currentSlide].data('appear') + ' visible-true');
        },1800);            
    });


    /*[ Slick2 ]
    ===========================================================*/
    var itemSlick2 = $('.item-slick2');
    var action1s2 = [];
    var cap1Slide2 = [];

    for(var i=0; i<itemSlick2.length; i++) {
      cap1Slide2[i] = $(itemSlick2[i]).find('.wrap-content-slide2 .blo2');
    }


    $('.slick2').on('init', function(){

        action1s2[0] = setTimeout(function(){
            $(cap1Slide2[0]).addClass($(cap1Slide2[0]).data('appear') + ' visible-true');
        },200);              
    });


    $('.slick2').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        dots: true,
        appendDots: $('.wrap-slick2-dots'),
        dotsClass:'slick2-dots',
        infinite: true,
        autoplay: true,
        autoplaySpeed: 6000,
        arrows: true,
        appendArrows: $('.wrap-slick2'),
        prevArrow:'<button class="arrow-slick2 prev-slick2"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
        nextArrow:'<button class="arrow-slick2 next-slick2"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',  
    });

    $('.slick2').on('afterChange', function(event, slick, currentSlide){ 
        for(var i=0; i<itemSlick2.length; i++) {

          clearTimeout(action1s2[i]);

          $(cap1Slide2[i]).removeClass($(cap1Slide2[i]).data('appear') + ' visible-true');
        }

        action1s2[currentSlide] = setTimeout(function(){
            $(cap1Slide2[currentSlide]).addClass($(cap1Slide2[currentSlide]).data('appear') + ' visible-true');
        },200);            
    });


    /*[ Slick3 ]
    ===========================================================*/
    var itemSlick3 = $('.slick3').find('.item-slick3');
    var action1s3 = [];
    var action2s3 = [];
    var action3s3 = [];
    var cap1Slide3 = [];
    var cap2Slide3 = [];
    var btnSlide3 = [];

    for(var i=0; i<itemSlick3.length; i++) {
      cap1Slide3[i] = $(itemSlick3[i]).find('.pic-review');
      cap2Slide3[i] = $(itemSlick3[i]).find('.content-review');
      btnSlide3[i] = $(itemSlick3[i]).find('.more-review');
    }


    $('.slick3').on('init', function(){

        action1s3[0] = setTimeout(function(){
            $(cap1Slide3[0]).addClass($(cap1Slide3[0]).data('appear') + ' visible-true');
        },200);

        action2s3[0] = setTimeout(function(){
            $(cap2Slide3[0]).addClass($(cap2Slide3[0]).data('appear') + ' visible-true');
        },1000);

        action3s3[0] = setTimeout(function(){
            $(btnSlide3[0]).addClass($(btnSlide3)[0].data('appear') + ' visible-true');
        },1000);              
    });


    $('.slick3').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: false,
        dots: true,
        appendDots: $('.wrap-slick3-dots'),
        dotsClass:'slick3-dots',
        infinite: true,
        autoplay: true,
        autoplaySpeed: 6000,
        arrows: true,
        appendArrows: $('.wrap-slick3'),
        prevArrow:'<button class="arrow-slick3 prev-slick3"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
        nextArrow:'<button class="arrow-slick3 next-slick3"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',  
    });

    $('.slick3').on('afterChange', function(event, slick, currentSlide){ 
        for(var i=0; i<itemSlick3.length; i++) {

          clearTimeout(action1s3[i]);
          clearTimeout(action2s3[i]);
          clearTimeout(action3s3[i]);


          $(cap1Slide3[i]).removeClass($(cap1Slide3[i]).data('appear') + ' visible-true');
          $(cap2Slide3[i]).removeClass($(cap2Slide3[i]).data('appear') + ' visible-true');
          $(btnSlide3[i]).removeClass($(btnSlide3[i]).data('appear') + ' visible-true');

        }

        action1s3[currentSlide] = setTimeout(function(){
            $(cap1Slide3[currentSlide]).addClass($(cap1Slide3[currentSlide]).data('appear') + ' visible-true');
        },200);

        action2s3[currentSlide] = setTimeout(function(){
            $(cap2Slide3[currentSlide]).addClass($(cap2Slide3[currentSlide]).data('appear') + ' visible-true');
        },1000);

        action3s3[currentSlide] = setTimeout(function(){
            $(btnSlide3[currentSlide]).addClass($(btnSlide3)[currentSlide].data('appear') + ' visible-true');
        },1000);            
    });




})(jQuery);
提问于
用户回答回答于

热门问答

关于Linux DNS服务器设置问题?

mariolu

腾讯 · 后台开发工程师 (已认证)

CDN及云从业者
推荐

CNAME到XX.com,这个XX.COM本身也是需要能解析ip的。CNAME到XX.COM的意义是你能解析到CDN厂商A的域名XX.COM或者CDN厂商B的域名YY.COM。所以需要提供服务的CDN厂商给你他们的域名。这样,DNS查询链路才是完整的。

我刚申请的服务器,缺省给我的是linux,可我要Windows,怎么办?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐
云服务器提供 不同平台重装:仅支持中国大陆地区(不含中国香港)。 例如,Linux 重装为 Windows,Windows 重装为 Linux 。 参考 重装系统: https://cloud.tencent.com/document/product/213/4933 图片.p...... 展开详请

合作伙伴学院里的学习视频测试题和在线培训系统里的测试题能否提供答案?

骑牛看晨曦love&peace~
推荐

http://tencentcloudxuexi.com 合作伙伴可以登录此平台做练习题,有答案的喔

两台腾讯云的服务器在同一个地区,内网网段也相同,都是172.17.0.X,为啥ping内网地址不通?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐已采纳

首先看下两台机器是否在同个vpc内,在同个vpc内默认网络可以互通,如果不在同个vpc内需要通过对等连接或者云联网打通,如果在同个vpc下无法互通,请检查下安全组和os的防火墙规则,放行icmp连接。

云服务器不能访问外部网站?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
不能访问外部网站一般是网络和dns的问题,按照如下步骤排查: 1. 确保CVM有外网ip或者NAT转换,使用ping测试下外网的连通性,如果不通请购买弹性公网IP,先申请后购买参考https://cloud.tencent.com/document/product/215/201...... 展开详请

求问keil5项目无法下载到开发板该怎么解决?

Supowang

腾讯 · 高级工程师 (已认证)

腾讯物联网操作系统TencentOS tiny产品接口人---岁寒知松柏,做最好的自己!
推荐
请检查st-link的驱动和stlink硬件,如果不行,尝试换其他stlink下载器试试,谢谢! 如果还没有解决,请加TencentOS tiny官方QQ群提问,谢谢! qq.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券