我想要实现 文字和图片一起变换的效果 其实问题对高手来说很简单 旧是自己绕不过这个弯了 代码如下
HTML:
<div id="images">
<ul id="images-ul">
<li id="images-content-1" class="images-contents">
<img src="images/2.jpg" />
</li>
<li id="images-content-2" class="images-contents">
<img src="images/3.jpg" />
</li>
<li id="images-content-3" class="images-contents">
<img src="images/1.jpg" />
</li>
</ul>
<div id="images-nav">
</div>
<div id="images-nav-num">
<ul id="images-nav-num-ul">
<li id="images-nav-num-li-1">1</li>
<li id="images-nav-num-li-2">2</li>
<li id="images-nav-num-li-3">3</li>
</ul>
</div>
</div>CSS:#images{
height:300px;
width:958px;
border:1px solid;
position:relative;
overflow:hidden;
}
#images-nav{
height:30px;
width:958px;
position:absolute;
bottom:0;
background:black;
z-index:200;
}
#images-nav-num{
position:absolute;
bottom:6px;
left:10;
z-index:200;
}
#images-nav-num ul{
list-style:none;
z-index:200;
}
#images-nav-num ul li{
display:block;
float:left;
margin-top:px;
width:20px;
height:20px;
line-height:20px;
text-align:center;
margin-right:3px;
cursor:pointer;
color:black;
font-weight:bold;
background:#E1E2E6;
}
.images-contents{
position:absolute;
left:0;
top:0;
z-index:1;
}
#images-nav-num-ul li.hongse{
background:#CF4046;
color:white;
}
#images-nav-num-ul li.quhong{
background:#E1E2E6;
color:black;
}JQUERY:(这里的$符号换成了sss 因为用到了其他的框架)sss('#images-nav-num-ul li:first').addClass("hongse")
sss('#images-ul li:not(:first)').css('display','none')
sss("#images-ul li:not(:first)").css("display","none");
var B=sss("#images-ul li:last");
var C=sss("#images-ul li:first");
var nb=sss("#images-nav-num-ul li:last");
var nc=sss("#images-nav-num-ul li:first");
nc.addClass("in");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.fadeOut();
nb.removeClass().css({
'background':'#E1E2E6',
'color':'black'
})
nc.css({
'background':'#CF4046',
'color':'white'
}).addClass('in')
}else{
sss("#images-ul li:visible").addClass("in");
sss("#images-ul li.in").next().fadeIn(500);
sss("#images-ul li.in").fadeOut().removeClass("in")};
var hhh=sss("#images-nav-num-ul li.in");
sss("#images-nav-num-ul li.in").next().removeClass().css({
'background':'#CF4046',
'color':'white'
}).addClass('in')
hhh.removeClass().css({
'background':'#E1E2E6',
'color':'black'
})
},5000)谢谢各位大哥大姐!!!
HTML:
<div id="images">
<ul id="images-ul">
<li id="images-content-1" class="images-contents">
<img src="images/2.jpg" />
</li>
<li id="images-content-2" class="images-contents">
<img src="images/3.jpg" />
</li>
<li id="images-content-3" class="images-contents">
<img src="images/1.jpg" />
</li>
</ul>
<div id="images-nav">
</div>
<div id="images-nav-num">
<ul id="images-nav-num-ul">
<li id="images-nav-num-li-1">1</li>
<li id="images-nav-num-li-2">2</li>
<li id="images-nav-num-li-3">3</li>
</ul>
</div>
</div>CSS:#images{
height:300px;
width:958px;
border:1px solid;
position:relative;
overflow:hidden;
}
#images-nav{
height:30px;
width:958px;
position:absolute;
bottom:0;
background:black;
z-index:200;
}
#images-nav-num{
position:absolute;
bottom:6px;
left:10;
z-index:200;
}
#images-nav-num ul{
list-style:none;
z-index:200;
}
#images-nav-num ul li{
display:block;
float:left;
margin-top:px;
width:20px;
height:20px;
line-height:20px;
text-align:center;
margin-right:3px;
cursor:pointer;
color:black;
font-weight:bold;
background:#E1E2E6;
}
.images-contents{
position:absolute;
left:0;
top:0;
z-index:1;
}
#images-nav-num-ul li.hongse{
background:#CF4046;
color:white;
}
#images-nav-num-ul li.quhong{
background:#E1E2E6;
color:black;
}JQUERY:(这里的$符号换成了sss 因为用到了其他的框架)sss('#images-nav-num-ul li:first').addClass("hongse")
sss('#images-ul li:not(:first)').css('display','none')
sss("#images-ul li:not(:first)").css("display","none");
var B=sss("#images-ul li:last");
var C=sss("#images-ul li:first");
var nb=sss("#images-nav-num-ul li:last");
var nc=sss("#images-nav-num-ul li:first");
nc.addClass("in");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.fadeOut();
nb.removeClass().css({
'background':'#E1E2E6',
'color':'black'
})
nc.css({
'background':'#CF4046',
'color':'white'
}).addClass('in')
}else{
sss("#images-ul li:visible").addClass("in");
sss("#images-ul li.in").next().fadeIn(500);
sss("#images-ul li.in").fadeOut().removeClass("in")};
var hhh=sss("#images-nav-num-ul li.in");
sss("#images-nav-num-ul li.in").next().removeClass().css({
'background':'#CF4046',
'color':'white'
}).addClass('in')
hhh.removeClass().css({
'background':'#E1E2E6',
'color':'black'
})
},5000)谢谢各位大哥大姐!!!
重新写一个 图片变化的效果
然后复制图片变化效果代码 把里面的selector换成文字的selector另外搞点有意义的变量名 加点注释
还有.css 全部用 .addclass吧
任意图片自动滚动切换