私の最初のjquery .css
ol,ul
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 28em;
}
li
{
height: 24em;
width: 24em;
text-align: center;
cursor: pointer;
}
li img
{
width: 100%;
}
li.roundabout-in-focus
{
cursor: default;
}
li span
{
display: block;
padding-top: 6em;
}
#carbonads-container
.carbonad
{
margin: 0 auto;
}
.html コード
<script src="js/jquery_002.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function () {
$('ul').roundabout();
});
</script>
<ul class="roundabout-moveable-item roundabout-in-focus" style="padding: 0px; position: relative;">
<li style="position: absolute; opacity: 1; z-index: 280;" class="roundabout-moveable-item">
<img src="img1.jpg" /></li></ul>
注:
画像付きの 5 liタグを繰り返すと、このように表示されます
そして、その正常に動作します
しかし、同じページで別のjqueryを使用しました.cssクラスは
.slider {
float:left;
left: -5000px;
margin:10px;
position:relative;
visibility:hidden;
}
.slider ul.menu {
height:100px;
width:990px;
}
.slider ul.menu li.menu1 {
padding:0px 4px 0px 4px;
}
.slider ul.menu li.menu1 img {
cursor:pointer;
height:110px;
padding-top:0px;
width:177px;
}
.html コードは
<script type="text/javascript" src="js1/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js1/captify.tiny.js"></script>
<script type="text/javascript">
$(function () {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(document).ready(function () {
$('img.captify').captify({
speedOver: 'fast',
});
});
</script>
<div class="slider">
<ul class="menu">
<li class="menu1">
<img src="images/gallery1/1.jpg" border="0" alt="" /></li></ul></div>
注:liタグを繰り返すと、スライダーのように見えます
しかし、要素を検査すると、上記の ul クラスがclass="menu roundabout-holder"として表示され、li クラスがclass="menu1 roundabout-moveable-item roundabout-in-focus" として表示され、スタイルが異なり、2 番目のスクリプトが機能しない