我想创建自己的幻灯片而不使用任何滑块插件Shear是我的代码
--在页脚中---
<script type="text/javascript" src="<?php bloginfo( \'template_url\' );?>/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(\'#slideshow\').cycle({
fx: \'scrollLeft\',
timeout: 3000,
pager: \'#navSlider\',
slideExpr: \'#mySlide\'
});
</script>
在我的头版。php
<div class="slideContent">
<div id="navSlider"></div>
<div id="slideshow" class="pics" style="position: relative; overflow: hidden;">
<div id="mySlide">
<div id="textBack"></div>
<div id="textSlide">the title 1</div>
<img src="<?php bloginfo( \'template_url\' );?>/slideimage/myimage1.jpg">
</div>
<div id="mySlide">
<div id="textBack"></div>
<div id="textSlide">the title 2</div>
<img src="<?php bloginfo( \'template_url\' );?>/slideimage/myimage2.jpg">
</div>
</div>
</div>
--在css文件中----
#slideshow {
width: 232px;
height: 232px;
}
#navSlider {
z-index: 50;
position:absolute;
width:19px;
top:0;
right:-5px;
}
#navSlider a {
display:block;
height:31px;
margin: 0 0px;
padding: 3px 6px;
border: 1px solid #ccc;
background: #cff;
text-decoration: none
}
#navSlider a.activeSlide {
background: #aaf;
padding:9px 0 0 0;
text-align:center;
}
#navSlider a:focus {
outline: none;
}
#textBack {
background-color:#000;
/*color:#FFF;*/
opacity: 0.4;
height:30px;
position:absolute;
right:0;
bottom:0;
width:232px;
/*text-align:center;*/
}
#textSlide {
color:#fff;
height:26px;
position:absolute;
bottom:0;
right:10px;
font-size:18px;
/* margin:auto;*/
/* width:232px;*/
/* text-align:center;*/
}
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
.slideContent {
margin: 30px auto;
width: 244px;
height: 234px;
position:relative;
top: 0;
left: 0;
background-color:#069;
}
我创建了这个,实际上它单独工作非常好,但我不知道为什么它在wordpress中不工作,如果有其他滑块,有什么关系吗?请帮忙
最合适的回答,由SO网友:Nicolai Grossherr 整理而成
做not 使用外部jQuery库,使用WordPress附带的库。
使用wp_enqueue_script 要将脚本排队,请执行以下操作:
wp_enqueue_script( \'jquery\' );
另外,请注意WordPress将内部jQuery设置为
noConflict()
模式,更多信息
here.