jquery代码
$(document).ready(function () {
var slideShow = $(".top_slide_wrap"), //获取最外层框架的名称
// ul=slideShow.find(".slide_box"),
li = slideShow.find(".slide_box li"), //获取图片li元素
showNumber = slideShow.find(".num li"), //获取按钮
oneWidth = slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
var timer = null; //定时器返回值,主要用于关闭定时器
var iNow = 0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
showNumber.on("click", function () { //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
var index = $(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
iNow = index;
// ul.animate({ "left":-oneWidth*iNow,})
//注意此处用到left属性,所以ul的样式里面需要设置position: relative;
// 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定
li.eq(iNow).fadeIn().siblings().fadeOut(); //设置图片淡入淡出效果
});
function autoplay() {
timer = setInterval(function () { //打开定时器
iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片
if (iNow > showNumber.length - 1) { //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
iNow = 0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发(trigger)数字按钮的click
}, 2000); //2000为轮播的时间
}
autoplay();
slideShow.hover(function () {
clearInterval(timer);
}, autoplay); //另外注意setInterval的用法比较关键。
})
以下是HTML代码
以下是css代码
/焦点图/
.banner {
width: 700px;
height: 401px;
float: left;
margin-left: 223px;
}
.banner .top_slide_wrap {
width: 700px;
height: 401px;
overflow: hidden;
position: relative;
z-index: 1;
}
.num{
position: absolute;
bottom: 20px;
right: 290px;
z-index: 2;
}
.num li{
float: left;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background: #ccc0b3;
text-align: center;
margin: 0 4px;
font-weight: bolder;
}
.num li a{
color: #000;
}
.num li:hover,.num .active{
background: #ff3c3c;
}
.num li:hover a,.num .active a{
color: #fff;
}
.banner .slide_box li {
height: 401px;
position: relative;
}
/* 焦点图左右按钮 */
.banner .op_btns {
width: 700px;
margin-top: -730px;
position: relative;
z-index: 3;
}
.banner .op_btns .op_btn {
display: block;
width: 32px;
height: 60px;
cursor: pointer;
position: absolute;
margin-top: 80px;
}
.banner .op_btns .op_prev {
background: url(…/images/b_left.png) no-repeat center top;
left: 0;
top: 420px;
}
.banner .op_btns .op_next {
background: url(…/images/b_right.png) no-repeat center top;
right: 0;
top: 420px;
}