======================================
html部分
======================================
<div id="picslide">
<ul id="picslidelist">
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h2>标题一</h2>
<p>描述文本</p>
</div>
</li>
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h2>标题二</h2>
<p>描述文本</p>
</div>
</li>
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h2>标题三</h2>
<p>描述文本</p>
</div>
</li>
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h2>标题四</h2>
<p>描述文本</p>
</div>
</li>
</ul>
<div id="picslideNav">
<ul class="clearfix">
<li class="picslideprev">上一个</li>
<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
<li class="picslidenext">下一个</li>
</ul>
</div>
<div id="picslidebg"></div>
</div>
======================================
js部分
======================================
<script type="text/javascript">
//首页焦点图
$(function(){
(function(){
var curr = 0;
$("#picslideNav .trigger").each(function(i){
$(this).click(function(){
curr = i;
$("#picslidelist li").eq(i).fadeIn("slow").siblings("li").hide();
$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
return false;
});
});
var pg = function(flag){
//flag:true表示前翻, false表示后翻
if (flag) {
if (curr == 0) {
todo = 4;
} else {
todo = (curr - 1) % 5;
}
} else {
todo = (curr + 1) % 5;
}
$("#picslideNav .trigger").eq(todo).click();
};
//前翻
$(".picslideprev").click(function(){
pg(true);
return false;
});
//后翻
$(".picslidenext").click(function(){
pg(false);
return false;
});
//自动翻
var timer = setInterval(function(){
todo = (curr + 1) % 5;
$("#picslideNav .trigger").eq(todo).click();
},5000);
//鼠标悬停在触发器上时停止自动翻
$("#picslide").hover(function(){
clearInterval(timer);
},
function(){
timer = setInterval(function(){
todo = (curr + 1) % 5;
$("#picslideNav .trigger").eq(todo).click();
},5000);
}
);
})();
});
</script>
转载于:https://blog.51cto.com/uedteam/1033547