创建特殊的wordpress幻灯片"jquery.cycle.all.js"
Create special wordpress slideshow by "jquery.cycle.all.js"
我想创建自己的幻灯片,而不使用任何滑块插件。下面是我的代码:
——在页脚——
<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>
——in my front-page.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环境中工作得很好。我不知道为什么它不会在wordpress工作。是否有另一个滑块有关系吗?
我找到了.....它只是没有注册js文件.....我用这个
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'cycle', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/jquery.cycle.all.js', 'jquery' );
相关文章:
- "工具提示"jQuery插件坏了
- 防止“;jQuery(html)"防止触发浏览器请求图像和其他参考内容
- jquery validate 1.8.1”;jQuery"是未定义的错误IE8
- 使用javascript"这个“;用于jquery选择器
- jQuery"或“;操作员没有处理mouseleave
- jQuery"焦点”;在一个实例中有效,但在其他实例中无效
- Jquery scrollTop动画不工作"无法读取属性'top'无风
- 如何分解jQuery"toggle”;函数转换为separate“;显示“;以及“;隐藏“;功能
- "未定义不是函数“;错误jQuery,.replaces,scrollTop
- 改变“;onClick"这个jQuery的操作从清除输入文本改为将输入文本添加到下面的列表中
- "这个“;在每个范围之外(JQuery)
- 如何在“;beforeSend:function()"使用ajax和jquery
- jQuery"悬停时放大”;无法相对于图片中心放大
- 我正在使用php includes来构建一个多页面网站.使用jquery,我将如何添加一个类"活动的”;添加到
- jQuery捕获"RangeError:超过了最大调用堆栈大小“;
- jQuery:使用.attr('href',")调用javascript
- 我怎么能读“;.on()"jQuery中的方法参数
- jQuery css"点击“;不会'更改日历中选定的月份后无法工作
- 改变与“"至“-"(JS/Jquery)
- 通过分离除“”之外的任何特殊字符来获得所有列表框值"通过jquery