自动滑块显示不滑动 [英] auto slider show not sliding
本文介绍了自动滑块显示不滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从jsfiddle http://jsfiddle.net/samuelmac/EPXuH/ 复制[ ^ ]
但不适合我。
< body >
< 表格 < span class =code-attribute> id = form1 runat = server >
< ul id <跨度class =code-keyword> = rotator >
< li class = show >
< a href = ＃ title = < span class =code-keyword>标题二 >
< img src = http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg alt = 某些替代文字 width = 500 height < span class =code-keyword> = 500 / >
< span class = rotator-caption > Caption One < / span >
< / a >
< / li >
< li class = hide >
< a href = ＃ title = 标题二 >
< img src = http://farm7.staticflickr.com/6238/ 6362150571_5268f71c2f.jpg alt = 更多替代文字 width = 500 height = 500 / >
< span class = rotator-caption > 标题二< / span >
< / a < span class =code-keyword>>
< / li >
< li class = 隐藏 >
< a href = ＃ title = 标题二 < span class =code-keyword>>
< img src = http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg alt = 更多替代文字 width = 500 height = 500 / >
< span class = < span class =code-keyword> rotator-caption > 标题二< / span >
< / a >
< ; / li >
< / ul >
< / form >
< / body >
< style>
＃ rotator {
height ： 580px;
width ： 900px;
float ： left;
position ： relative;
padding ： 0px;
margin ： 0px;
}
＃ rotator li {
position ： 绝对;
left ： 0px;
right ： 0px;
top ： 0px;
width ： 100％;
height ： 100％;
display ： block;
margin ： 0px;
}
＃ rotator li img {
position ： 绝对;
left ： 0px;
top ： 0px;
z-index ： 10;
}
＃ rotator li span 。 rotator-caption {
display ： 阻止;
position ： 绝对;
bottom ： 40px;
float ： right;
right ： 35px;
font-size ： 3.2em;
width ： auto;
height ： auto;
z-index ： 20;
paddi ng-left ： 40px;
颜色 ： ＃fff;
line-height ： 1.3em;
}
。 show ，
。 show * {
display ： block < span class =code-keyword bold>！important ;
}
。 hide ，
。 hide * {
display ： none ！important ;
}
< / style >
< / style >
< script 类型 = text / javascript < span class =code-keyword>>
var config = {
speed：4000，
rotateid：'＃rotator'
};
$（document）.ready（function（）{
$（config.rotateid）.each（function（）{
if（$（this） .children（）。长度> 1）{
BeginSlideshow（）;
}
}）;
}）;
函数BeginSlideshow（）{
$（config.rotateid +'li'）。css（{opacity：0.0}）;
$（config.rotateid +'li：first'）。css（{opacity：1.0}）;
if（$（config.rotateid +'li'）。length> 0）{
setInterval（'RotateSlides（）'，config.speed）;
}
}
函数RotateSlides（）{
var current =（$（config.rotateid +'li.show'）？$（config.rotateid +'li.show '）：$（config.rotateid +'li：first'））;
var next =（（current.next（）。length）？current.next（）：$（config.rotateid +'li：first'））;
next.css（{opacity：0.0}）
.addClass（'show'）
.animate（{opacity：1.0}，1000）
.removeClass （'隐藏'）;
current.animate（{opacity：0.0}，1000，function（）{
$（this）.addClass（'hide'）;
}）。removeClass（'节目'）;
var index = $（'ul'+ config.rotateid +'li.show'）。index（）;
}
< / script >
< / head >
解决方案
（document）.ready（function（）{
（config.rotateid）.each（function（）{
if（
（this）.children（）。length> 1） {
BeginSlideshow（）;
}
}）;
}）;
函数BeginSlideshow（）{
I copied from jsfiddle http://jsfiddle.net/samuelmac/EPXuH/[^]
but not working for me.
<body>
<form id="form1" runat="server">
<ul id="rotator">
<li class="show">
<a href="#" title="Title Two">
<img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some alt text" width="500" height="500" />
<span class="rotator-caption">Caption One</span>
</a>
</li>
<li class="hide">
<a href="#" title="Title Two">
<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg" alt="some more alt text" width="500" height="500" />
<span class="rotator-caption">Caption Two</span>
</a>
</li>
<li class="hide">
<a href="#" title="Title Two">
<img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some more alt text" width="500" height="500" />
<span class="rotator-caption">Caption Two</span>
</a>
</li>
</ul>
</form>
</body>
<style>
#rotator {
height: 580px;
width: 900px;
float: left;
position: relative;
padding: 0px;
margin: 0px;
}
#rotator li {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
display: block;
margin: 0px;
}
#rotator li img {
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
#rotator li span.rotator-caption {
display: block;
position: absolute;
bottom: 40px;
float: right;
right: 35px;
font-size: 3.2em;
width: auto;
height: auto;
z-index: 20;
padding-left: 40px;
color:#fff;
line-height: 1.3em;
}
.show,
.show * {
display: block !important;
}
.hide,
.hide * {
display: none !important;
}
</style>
</style>
<script type="text/javascript">
var config = {
speed: 4000,
rotateid:'#rotator'
};
$(document).ready(function() {
$(config.rotateid).each(function() {
if ($(this).children().length > 1) {
BeginSlideshow();
}
});
});
function BeginSlideshow() {
$(config.rotateid + 'li').css({ opacity: 0.0 });
$(config.rotateid + 'li:first').css({ opacity: 1.0 });
if ($(config.rotateid + 'li').length > 0) {
setInterval('RotateSlides()', config.speed);
}
}
function RotateSlides() {
var current = ($(config.rotateid + 'li.show') ? $(config.rotateid + 'li.show') : $(config.rotateid + 'li:first'));
var next = ((current.next().length) ? current.next() : $(config.rotateid + ' li:first'));
next.css({ opacity: 0.0 })
.addClass('show')
.animate({ opacity: 1.0 }, 1000)
.removeClass('hide');
current.animate({ opacity: 0.0 }, 1000, function() {
$(this).addClass('hide');
}).removeClass('show');
var index = $('ul' + config.rotateid + 'li.show').index();
}
</script>
</head> 解决方案
(document).ready(function() {
(config.rotateid).each(function() { if (
(this).children().length > 1) { BeginSlideshow(); } }); }); function BeginSlideshow() {
这篇关于自动滑块显示不滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
