现在先把代码拷贝到这里以后再逐一简化修改
实现滚动效果脚本代码如下
代码如下:
var all=
;
var no=
;
var s_width=
;
$(document)
ready(function(){
all=$(
slide
)
length;
s_width=$(
slide
)
eq(
)
width();
$("#slides")
css(
width
all*s_width);
var contiar=$(
control_links
);
for(var i=
;i<all;i++){
contiar
append("<li></li>");
}
$(
control_links li
)
bind(
click mouseenter
function(){
var index=$(this)
index();
no=index;
var no_= no%all;
$("#slides")
animate({left:(
*no_*s_width)+
px
}
);
$(this)
css(
background
color
#fff
);
$(this)
siblings()
css(
background
color
#
);
});
setInterval(function(){
var no_= no%all;
$("#slides")
animate({left:(
*no_*s_width)+
px
}
);
var curr= $(
control_links li
)
eq(no_);
curr
css(
background
color
#fff
)
curr
siblings()
css(
background
color
#
);
no++;
}
);
});
css 代码如下
代码如下:
img{
border:none;
}
#daohangpic {
width:
px;
margin:
auto;
padding:
px;
overflow:hidden;
}
#daohangpic img {
height:
px;
width:
px;
}
#contiar {
position:relative;
width:
px;
height:
px;
overflow:hidden;
margin:
auto;
}
#slides {
position:absolute;
border:none;
}
slide {
float:left;
width:
px;
height:
px;
overflow:hidden;
border:none;
}
control_links{
position:absolute;
bottom:
px;
right:
px;
z
index:
;
}
control_links
control_links li {
list
style: none;
}
control_links li {
float:left;
width:
px;
height:
px;
margin
right:
px;
text
align: center;
background:#
;
border:
px solid #
;
cursor: pointer;
opacity:
;
}
caption {
position:absolute;
height:
px;
width:
%;
background
color:#
;
bottom:
px;
padding
left:
px;
padding
top:
px;
overflow:hidden;
z
index:
;
background:url(hdpng
png) no
repeat scroll
px;
}
caption h
{
color: #FFF;
font
size:
px;
font
weight: bold;
line
height:
px;
}
caption p{
display: block;
color: #
;
font
size:
px;
line
height:
px;
}
要实现滚动的区域定义如下
代码如下:
<div id="daohangpic">
<div id="contiar">
<div id="slides">
<div class="slide"> <a href="格莱美获奖名单揭晓
众大腕颁奖礼现场飙歌" target="_blank"><img src="
jpg" alt="Slide
"> </a>
<div class="caption" >
<h
>格莱美获奖名单揭</h
>
<p>格莱美获奖名单揭晓
众大腕颁奖礼现场飙歌</p>
</div>
</div>
<div class="slide" > <a href="海内外人气明星齐聚
鸟叔林志玲大跳骑马舞" target="_blank"><img src="
jpg" alt="Slide
"></a>
<div class="caption" >
<h
>格莱美获奖名单揭</h
>
<p>格莱美获奖名单揭晓
众大腕颁奖礼现场飙歌</p>
</div>
</div>
<div class="slide" > <a href="令狐沖
东方不败
任盈盈三段虐恋催人泪下" target="_blank"><img src="
jpg" alt="Slide
"></a>
<div class="caption" >
<h
>格莱美获奖名单揭</h
>
<p>格莱美获奖名单揭晓
众大腕颁奖礼现场飙歌</p>
下 </div>
</div>
<div class="slide" > <a href="陈键锋恋上剩女陈紫函
人仙之恋如何收场？" target="_blank"><img src="
jpg" alt="Slide
"></a>
<div class="caption" >
<h
>格莱美获奖名单揭</h
>
<p>格莱美获奖名单揭晓
众大腕颁奖礼现场飙歌</p>
场？ </div>
</div>
<div class="slide" > <a href="感悟生命之美
沐浴信仰之光" target="_blank"><img src="
jpg" alt="Slide
"></a>
<div class="caption" >
<h
>格莱美获奖名单揭</h
>
<p>格莱美获奖名单揭晓
众大腕颁奖礼现场飙歌</p>
</div>
</div>
</div>
<ul class="control_links">
</ul>
</div>
<div id="back_img"> </div>
</div>
