자동 또는 수동으로 사진을 전환하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자동 또는 수동으로 사진을 전환하는 방법

小云云

Jan 30, 2018 am 09:21 AM

스위치 오토매틱

JS를 배우면서 흥미롭고 작은 예제를 많이 쌓았지만 이러한 JS 효과를 보여줄 수 있는 좋은 플랫폼을 찾는 데 어려움을 겪었기 때문에 빨리 여러분과 공유하고 싶었습니다. 이 글에서는 jQuery 자동 또는 수동 이미지 전환 효과를 주로 소개하는데, 관심 있는 친구들이 참고하면 도움이 될 것입니다.

주요 쇼핑몰 웹사이트를 탐색할 때나 일부 웹사이트의 홈페이지에서 이 웹사이트와 관련된 일부 실시간 전환 사진이 표시됩니다. 이 글에서는 jQuery를 사용하여 사진 자동 전환을 구현하는 예를 공유하겠습니다.

홈 페이지 핵심 코드(Default.aspx):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>jQuery实现图片切换</title>  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/tupianqiehuan.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/tupianqiehuan.css"> 
</head> 
<body> 
    <p class="wrapper"> 
        <h1>jquer实现图片切换</h1> 
        <p id="focus"> 
            <ul> 
                <li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/02.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/03.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/04.jpg" alt="" /></a></li><span style="white-space:pre">                 </ul> 
        </p> 
    </p> 
</body> 
</html>

로그인 후 복사

CSS 코드(tupianqiehuan.css):

*{margin:0;padding:0;} 
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix{zoom:1;} 
ul,li{list-style:none;} 
img{border:0;} 
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 
/* focus */ 
#focus{width:800px;height:280px;overflow:hidden;position:relative;} 
#focus ul{height:380px;position:absolute;} 
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} 
#focus ul li p{position:absolute;overflow:hidden;} 
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 
#focus .btn span.on{background:#fff;} 
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;} 
#focus .pre{left:0;} 
#focus .next{right:0;background-position:right top;}

로그인 후 복사

JS 코드(tupianqiehuan.js):

$(function() { 
  var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） 
  var len = $("#focus ul li").length; //获取焦点图个数 
  var index = 0; 
  var picTimer; 
   
  //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 
  var btn = "<p class=&#39;btnBg&#39;></p><p class=&#39;btn&#39;>"; 
  for(var i=0; i < len; i++) { 
    btn += "<span></span>"; 
  } 
  btn += "</p><p class=&#39;preNext pre&#39;></p><p class=&#39;preNext next&#39;></p>"; 
  $("#focus").append(btn); 
  $("#focus .btnBg").css("opacity",0.5); 
 
  //为小按钮添加鼠标滑入事件，以显示相应的内容 
  $("#focus .btn span").css("opacity",0.4).mouseover(function() { 
    index = $("#focus .btn span").index(this); 
    showPics(index); 
  }).eq(0).trigger("mouseover"); 
 
  //上一页、下一页按钮透明度处理 
  $("#focus .preNext").css("opacity",0.2).hover(function() { 
    $(this).stop(true,false).animate({"opacity":"0.5"},300); 
  },function() { 
    $(this).stop(true,false).animate({"opacity":"0.2"},300); 
  }); 
 
  //上一页按钮 
  $("#focus .pre").click(function() { 
    index -= 1; 
    if(index == -1) {index = len - 1;} 
    showPics(index); 
  }); 
 
  //下一页按钮 
  $("#focus .next").click(function() { 
    index += 1; 
    if(index == len) {index = 0;} 
    showPics(index); 
  }); 
 
  //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 
  $("#focus ul").css("width",sWidth * (len)); 
   
  //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 
  $("#focus").hover(function() { 
    clearInterval(picTimer); 
  },function() { 
    picTimer = setInterval(function() { 
      showPics(index); 
      index++; 
      if(index == len) {index = 0;} 
    },4000); //此4000代表自动播放的间隔，单位：毫秒 
  }).trigger("mouseleave"); 
   
  //显示图片函数，根据接收的index值显示相应的内容 
  function showPics(index) { //普通切换 
    var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 
    $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 
    $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果  
  } 
});

로그인 후 복사

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7529

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Xiaomi Mi 14Ultra에서 4g와 5g 사이를 전환하는 방법은 무엇입니까? Feb 23, 2024 am 11:49 AM

Xiaomi 14Ultra는 올해 가장 인기 있는 Xiaomi 모델 중 하나입니다. Xiaomi 14Ultra는 프로세서와 다양한 구성을 업그레이드할 뿐만 아니라 사용자에게 많은 새로운 기능 애플리케이션을 제공합니다. 이는 Xiaomi 14Ultra 휴대폰의 판매에서 확인할 수 있습니다. 많이 사용되는 기능이지만 아직은 모르실 수도 있는 일반적으로 사용되는 기능이 있습니다. 그렇다면 Xiaomi 14Ultra는 어떻게 4g와 5g 사이를 전환합니까? 구체적인 내용을 아래에서 소개해드리겠습니다! Xiaomi 14Ultra에서 4g와 5g 사이를 전환하는 방법은 무엇입니까? 1. 휴대폰의 설정 메뉴를 엽니다. 2. 설정 메뉴에서 '네트워크' 및 '모바일 네트워크' 옵션을 찾아서 선택하세요. 3. 모바일 네트워크 설정에 '기본 네트워크 유형' 옵션이 표시됩니다. 4. 이 옵션을 클릭하거나 선택하면 다음과 같은 내용이 표시됩니다.

win11 홈 버전에서 프로페셔널 버전으로 전환하기 위한 조작 튜토리얼_win11 홈 버전에서 프로페셔널 버전으로 전환하기 위한 조작 튜토리얼 Mar 20, 2024 pm 01:58 PM

Win11 Home Edition을 Win11 Professional Edition으로 변환하는 방법 Win11 시스템은 Home Edition, Professional Edition, Enterprise Edition 등으로 나뉘며 대부분의 Win11 노트북에는 Win11 Home Edition 시스템이 사전 설치되어 있습니다. 오늘은 에디터가 win11 홈버전에서 프로페셔널 버전으로 전환하는 단계를 보여드리겠습니다! 1. 먼저, win11 바탕화면과 속성에서 이 컴퓨터를 마우스 오른쪽 버튼으로 클릭하세요. 2. 제품 키 변경 또는 Windows 업그레이드를 클릭합니다. 3. 입력 후 제품키 변경을 클릭하세요. 4. 활성화 키: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB를 입력하고 다음을 선택합니다. 5. 그러면 성공이 보장되므로 win11 홈 버전을 win11 프로페셔널 버전으로 업그레이드할 수 있습니다.

Win10 시스템에서 이중 시스템 전환을 구현하는 방법 Jan 03, 2024 pm 05:41 PM

많은 친구들이 Win 시스템을 처음 접했을 때 익숙하지 않을 수 있습니다. 현재 컴퓨터에는 이중 시스템이 있습니다. 이제 두 시스템 사이를 전환하는 자세한 단계를 살펴보겠습니다. 두 시스템 사이. win10 시스템에서 두 시스템 간 전환하는 방법 1. 단축키 전환 1. "win" + "R" 키를 눌러 실행을 엽니다. 2. 실행 상자에 "msconfig"를 입력하고 "확인"을 클릭합니다. 3. 열린 창에서 " 시스템 구성" 인터페이스에서 필요한 시스템을 선택하고 "기본값으로 설정"을 클릭합니다. 완료 후 "다시 시작"을 클릭하면 스위치가 완료됩니다. 방법 2. 부팅 시 스위치 선택 1. 듀얼 시스템이 있는 경우 선택 작업 인터페이스 부팅할 때 나타납니다. 키보드의 위쪽 및 아래쪽 키를 사용하여 시스템을 선택할 수 있습니다.

Apple 컴퓨터의 이중 시스템 부팅 모드 전환 Feb 19, 2024 pm 06:50 PM

Apple 컴퓨터를 시작할 때 Apple 듀얼 시스템 간을 전환하는 방법 Apple 컴퓨터는 자체 macOS 운영 체제를 실행하는 것 외에도 Windows와 같은 다른 운영 체제를 설치하도록 선택하여 듀얼 시스템 전환을 달성할 수도 있습니다. 그렇다면 부팅할 때 두 시스템 간에 어떻게 전환합니까? 이 문서에서는 Apple 컴퓨터에서 듀얼 시스템 간에 전환하는 방법을 소개합니다. 먼저 듀얼 시스템을 설치하기 전에 Apple 컴퓨터가 듀얼 시스템 전환을 지원하는지 확인해야 합니다. 일반적으로 Apple 컴퓨터는 다음을 기반으로 합니다.

JavaScript를 사용한 자동 썸네일 생성 Jun 16, 2023 pm 12:51 PM

인터넷이 발달하면서 사진은 웹페이지에서 없어서는 안 될 부분이 되었습니다. 하지만 이미지 수가 증가함에 따라 이미지 로딩 속도가 매우 중요한 문제가 되었습니다. 이 문제를 해결하기 위해 많은 웹사이트에서는 썸네일을 사용하여 이미지를 표시하지만, 썸네일을 생성하려면 전문적인 이미지 처리 도구를 사용해야 하는데, 이는 일부 비전문가에게는 매우 번거로운 일입니다. 그런 다음 JavaScript를 사용하여 자동 썸네일 생성을 달성하는 것이 좋은 선택이 됩니다. 자바 사용 방법

Excel에서 통합 문서 전환에 바로 가기 키를 사용하는 방법 Mar 20, 2024 pm 01:50 PM

Excel 소프트웨어를 적용할 때 우리는 일부 작업을 보다 쉽고 빠르게 수행하기 위해 단축키를 사용하는 데 익숙합니다. 때로는 Excel의 여러 테이블 간에 관련 데이터가 있을 때 작업 간에 지속적으로 전환해야 합니다. 빠른 전환 방법을 사용하면 전환에 소요되는 시간을 많이 절약할 수 있어 작업 효율을 크게 높일 수 있습니다. 빠른 전환을 완료하려면 어떤 방법을 사용할 수 있나요? 오늘 편집자는 이에 대해 이야기하겠습니다. 내용은 다음과 같습니다. Excel에서 통합 문서를 전환하기 위해 바로 가기 키를 사용합니다. 1. 먼저 열려 있는 엑셀 표 하단에 여러 개의 통합 문서가 표시됩니다. 아래 그림과 같이 여러 통합 문서 사이를 빠르게 전환해야 합니다. 2. 그런 다음 이동하지 않고 키보드의 Ctrl 키를 누르고 필요한 경우 오른쪽에 있는 작업을 선택합니다.

Linux에서 드라이브 자동 마운트 Mar 20, 2024 am 11:30 AM

Linux 운영 체제를 사용하고 시스템이 부팅 시 드라이브를 자동으로 마운트하도록 하려면 장치의 고유 식별자(UID)와 마운트 지점 경로를 fstab 구성 파일에 추가하면 됩니다. fstab은 /etc 디렉터리에 있는 파일 시스템 테이블 파일입니다. 여기에는 시스템 시작 시 마운트해야 하는 파일 시스템에 대한 정보가 포함되어 있습니다. fstab 파일을 편집하면 시스템이 시작될 때마다 필요한 드라이브가 올바르게 로드되어 안정적인 시스템 작동을 보장할 수 있습니다. 드라이버 자동 장착을 통해 다양한 상황에서 편리하게 사용할 수 있습니다. 예를 들어, 내 시스템을 외부 저장 장치에 백업할 계획입니다. 자동화를 달성하려면 시작 시에도 장치가 시스템에 연결된 상태를 유지해야 합니다. 마찬가지로, 많은 애플리케이션이 직접적으로

Linux 팁: vim에 붙여넣을 때 자동 들여쓰기 취소 Mar 07, 2024 am 08:30 AM

서문: vim은 Linux에서 큰 인기를 얻은 강력한 텍스트 편집 도구입니다. 최근에 다른 서버에서 vim을 사용할 때 이상한 문제에 직면했습니다. 로컬로 작성된 스크립트를 복사하여 서버의 빈 파일에 붙여넣을 때 자동 들여쓰기가 발생했습니다. 간단한 예를 사용하기 위해 로컬에서 작성한 스크립트는 다음과 같습니다: aaabbbcccddd. 위 내용을 복사하여 서버의 빈 파일에 붙여넣으면 다음과 같은 결과가 나타납니다: aabbbcccddd. 우리. 형식 들여 쓰기. 그러나 이 자동은 약간 지능적이지 않습니다. 여기에 해결책을 기록하세요. 해결 방법: 홈 디렉터리에 .vimrc 구성 파일을 설정합니다.

See all articles

자동 또는 수동으로 사진을 전환하는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제