jquery 플러그 인 윤방송 도 정의

윤 방도 - html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>   title>
    <style>
        * {padding: 0;margin: 0;list-style: none;}
        .box {width: 400px;height: 260px;margin: 50px auto;border: 1px solid #f66;position: relative;}
        .box .items {width: 400px;height: 260px;position: relative;}
        .box .items img { position: absolute; top:0;left: 0;display: none;}
        .box .items img:nth-child(1) {display: block;}
        .box .controls .prev{width: 50px;height: 50px; position: absolute;left:10px; top: 50%;transform: translateY(-50%)}
        .box .controls .next{width: 50px;height: 50px; position: absolute;right:10px; top: 50%;transform: translateY(-50%)}
        .points { position: absolute;bottom:20px;left: 50%;transform: translateX(-50%);}
        .points li {width: 10px;display: inline-block;height: 10px;border-radius: 50%;background-color: #fff;}
        .points li.active { background-color: #f66;}
    style>
head>
<body>
    <div class="box banner1">
        <div class="items">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/6.jpg" alt="">
        div>
        <div class="controls">
            <button class="prev">←button>
            <button class="next">→button>
        div>
        <ul class="points">ul>
    div>
body>
<script src="jquery.js">script>
<script src="jquery.banner.js">script>
<script>
   $('.banner1').fade({
       box:$(".box"),
       imgs: $('.banner1').find('.items').find('img'), //   
       prev: $('.banner1').find('.prev'), //   ，     
       next: $('.banner1').find('.next'), //   ,      
       points: $('.banner1').find('.points'), //   ，   
       autoplay: true,  //   ,    true
       delay: 4000, //   ，   3000
       current: 0, //   ，     0     
       duration: 500 //   ，    300 --     
   })
script>
html>

라운드 맵 - 플러그 인

;(function ($) {
    'use strict';
    $.fn.extend({
        fade (options) {
            var obj = {} //      
            // console.log(options)
            // console.log('   ')
            // 1、              
            var { imgs, prev, next, points, autoplay, delay, current, duration } = options
            // 2、          
            autoplay = autoplay === false ? false : true //     
            delay = delay || 3000 //        
            current = current || 0 //            
            duration = duration || 300 //       
            // 3、       
            var len = imgs.length
            console.log(len)

            // 4、       
            ani(current)

            // 5、     
            next.on('click', function () {
                current++
                if (current === len) {
                    current = 0
                }
                ani(current)
            })

            // 6、     
            prev.on('click', function () {
                current--
                if (current === -1) {
                    current = len - 1
                }
                ani(current)
            })

            // 7、                       
            for (var i = 0; i < len; i++) {
                points.append('

')
}
points.find('li').eq(current).addClass('active').siblings().removeClass('active')
/ / 8, 자동 윤 방
var timer = null
if (autoplay) {
timer = setInterval(function () {
next.click()
}, delay)
}
/ / 9 、 마우스 스 케 이 트 이벤트 - 자동 윤 방 취소, 마우스 제거, 다시 자동 윤 방
console.log(this)
if (autoplay) {
this.hover(function () {
clearInterval(timer)
}, function () {
timer = setInterval(function () {
next.click()
}, delay)
})
}
/ / 10 、 작은 원점 슬라이딩 전환
points.find('li').on('mouseenter', function () {
current = $(this).index()
ani(current)
})
/ / 애니메이션 을 봉인 하 는 함수
function ani (current) {
points.find('li').eq(current).addClass('active').siblings().removeClass('active')
imgs.eq(current).stop().fadeIn(duration).siblings().stop().fadeOut(duration)
}
}
})
})(jQuery);

다음으로 전송:https://www.cnblogs.com/hy96/p/11581834.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jquery 플러그 인 윤방송 도 정의

좋은 웹페이지 즐겨찾기