当前位置: 动力学知识库 > 问答 > 编程问答 >

Cycle2 Plugin Javascript/jQuery

问题描述:

First of all, the slideshow works; however, I notice when I leave the page to go to a new tab and then return to the slider, the slider stops "sliding." Then after a second or two, the slider starts up again. How can I have it so that it is continuously running regardless if the user is on the page or not?

<html>

<head>

<?php include "includes/header.php"; ?>

<style type="text/css">

#slider-container {

width: 100%;

height: 700px;

overflow: hidden;

}

.cycle-overlay {

width: 60%;

height: 700px;

background-color: blue;

z-index: 600;

position: absolute;

top: 0;

}

.s-titles {

font-size: 100px;

color: red;

}

</style>

</head>

<body>

<!--Slideshow-->

<div id="slider-container" class="cycle-slideshow"

data-cycle-fx="fade"

data-cycle-speed="800"

data-cycle-timeout="4500"

data-cycle-manual-fx = "fade"

data-cycle-manual-speed = "400"

data-cycle-next = "#next"

data-cycle-prev = "#prev"

data-cycle-loop = "0"

data-cycle-pause-on-hover= "true"

data-cycle-overlay-template="<div class='s-titles'>{{title}}</div><div class='s-descs'>{{desc}}</div><div class='s-btn-wraps'><div class='s-btns'>{{btn1}}</div><div class='s-btns'>{{btn2}}</div></div>">

<div><img id="prev" src=""/></div>

<div class="cycle-overlay"></div>

<div><img id="next" src=""/></div>

<!--Images-->

<img id="img1" src="../UGSM/imgs/slider/img1.jpg" data-title="Title 1"/>

<img id="img2" src="../UGSM/imgs/slider/img2.jpg" data-title="Title 2"/>

<img id="img3" src="../UGSM/imgs/slider/img3.jpg" data-title="Title 3"/>

</div>

</body>

<script type="text/javascript" src="js/plugins/jquery.cycle2.min.js"></script>

</html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: