Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.10.2013, 11:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

aleksandr8i,
читайте документацию по плагину ...
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<style>


/*cycle*/
.contain-cycle{width:590px;border:1px solid red;}
.cycle{position: relative;height: 287px;padding: 0;overflow: hidden;}
.cycle ul{position: relative;z-index: 1;height: 100%;}
.cycle li{height: 100%;width: 100% !important;}
.pager{text-align: center;display: inline-block;z-index: 2;top: -31px; position: absolute; width: 100%; top:100%; margin-top:-36px;}
#next_slide, #prev_slide {background:#333;width: 30px; height:30px; position: absolute; cursor:pointer; top:50%; z-index: 3; margin-top: -20px;}
#prev_slide {left: 0; margin-left:13px;}
#next_slide {right: 0; margin-right:9px;}
/*/cycle*/

.background1{background:#666;color:#fff;text-align:center;font-size:30px;}
#box_fly{width:200px;height:200px;background:#000;margin:0px;position:absolute;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://strong-spirit-mazda.ru/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://strong-spirit-mazda.ru/js/jquery.pluginssiteimage.js"></script>
<script type="text/javascript">

if (!$.isFunction($.fancybox)) {
    var loadingTimer, loadingFrame = 1;
    body.append(loading = $('<div id="fancybox-loading"><div></div></div>'));
    _animate_loading = function() {
        if (!loading.is(':visible')) {
            clearInterval(loadingTimer);
            return;
        }

        $('div', loading).css('top', (loadingFrame * -40) + 'px');
        loadingFrame = (loadingFrame + 1) % 12;
    };
    $.fancybox = function() {
    };
    $.fancybox.showActivity = function() {
        clearInterval(loadingTimer);
        loading.show();
        loadingTimer = setInterval(_animate_loading, 66);
    };
    $.fancybox.hideActivity = function() {
        loading.hide();
    };
}
var imageCmsApiDefaults = {
    hideForm: true,
    messagePlace: 'ahead', // behind
    durationHideForm: 3000,
    cMsgPlace: 'after', //place error
    captcha: function(ci) {
        return '<div class="frame-label"><span class="title">' + captchaText + '</span>\n\
                        <span class="frame-form-field">\n\
                            <input type="text" name="captcha" value="' + captchaText + '"/> \n\
                            <span class="help-block" id="for_captcha_image">' + ci + '</span>\n\
                        </span></div>'
    },
    captchaBlock: '#captcha_block',
    cMsg: function(name, text, classN, form) {
        form.find('[for="' + name + '"]').remove();
        return '<label for="' + name + '" class="for_validations ' + classN + '">' + text + '</label>';
    }
// callback (callback accept (msg, status, form, DS)) where DS - imageCmsApiDefaults and "any other" ex. report_appereance has drop:".drop-report" if callback return true form hide
// any other
};
var genObj = {
    msgF: '.msg',
    err: 'error', //клас
    scs: 'success', //клас
    info: 'info' //клас
}
var message = {
    success: function(text) {
        return '<div class = "msg"><div class = "' + genObj.scs + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    },
    error: function(text) {
        return '<div class = "msg"><div class = "' + genObj.err + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    },
    info: function(text) {
        return '<div class = "msg"><div class = "' + genObj.info + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    }
};
var optionsDrop = {
    overlayColor: '#000',
    overlayOpacity: '0.6',
    place: 'center', //noinherit(default) || inherit(ex. for ViewedProducts)
    effon: 'fadeIn',
    effoff: 'fadeOut',
    duration: 500,
    moreoneNC: false
};
function hideDrop(drop, form, durationHideForm) {
    var drop = $(drop);
    setTimeout(function() {
        drop.drop('closeDrop', drop);
    }, durationHideForm - 500/*time fadeout drop see on site*/)
    setTimeout(function() {
        drop.find(genObj.msgF).hide().remove();
        form.show();
    }, durationHideForm)
}
$(document).ready(function() {
    if (ltie7) {
        ieInput()
    }
    if (ltie8) {

    }
    try {
        $('.cycle ul').cycle({
            fx: 'fade',
            timeout: 3500,
            next: '#next_slide',
            prev: '#prev_slide',
            pager: '.pager',
  *!* 
         before: function (el)
{
   if(el.id == 'box1')      $("#box_fly").css({left: "0"}).animate({left: "200"} ,2000);
} ,
*/!*
            pagerAnchorBuilder: function(idx, slide) {
                return '<a href="#"></a>';
            }
        })
    } catch (e) {
    }
    $('.menu-main').menuCorporate({
        item: $('.menu-main').find('td'),
        duration: 300,
        drop: '.frame-item-menu > ul',
        dropWidth: 500
    })
    $('[data-drop]').drop(optionsDrop);
    $(document).on('drop.click showActivity', function(e) {
        $.fancybox.showActivity();
    })
    $(document).on('drop.show drop.hide hideActivity', function(e) {
        $.fancybox.hideActivity();
    })
})

</script>


<script type="text/javascript">
$ (document).ready(function(){
    $("#box_fly").animate({left: "200"} ,2000);
    });
	</script>

</head>

<body>

<div class="contain-cycle">
    <div class="cycle container_slider">
        <ul>
            <li >
            <div class="background1">Слайд 01</div>
            <div id="box_fly">BOX FLY</div>
            </li>
            <li>
               <div class="background1">Слайд 02</div>
            </li>
        
    <li id = 'box1'>

               <div class="background1">Слайд 03</div>
            </li>

        </ul>
        <div class="pager p_r">

        </div>
        <div id="prev_slide"></div>
        <div id="next_slide"></div>
    </div>
</div>

</body>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обойти удаление js в jquery IgorN jQuery 1 09.05.2012 01:32
jQuery, функция animate(), рекурсия xintrea jQuery 12 03.01.2011 12:33
JQuery и JS - динамичность элементов MCTrane jQuery 1 26.10.2010 21:41
jQuery, load: замена элемента вырубает js на странице. warobushek AJAX и COMET 0 08.10.2010 07:44
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00