您好,登錄后才能下訂單哦!
======================================
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">
<h3>標題一</h3>
<p>描述文本</p>
</div>
</li>
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h3>標題二</h3>
<p>描述文本</p>
</div>
</li>
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h3>標題三</h3>
<p>描述文本</p>
</div>
</li>
<li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
<div class="picslidedetail">
<h3>標題四</h3>
<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);
//鼠標懸停在觸發(fā)器上時停止自動翻
$("#picslide").hover(function(){
clearInterval(timer);
},
function(){
timer = setInterval(function(){
todo = (curr + 1) % 5;
$("#picslideNav .trigger").eq(todo).click();
},5000);
}
);
})();
});
</script>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。