jQuery帶縮略圖的焦點圖代碼_帶標題的焦點圖代碼



113 451 151



特效描述:jQuery帶縮略圖 焦點圖代碼 帶標題的焦點圖,

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

2. HTML代碼

<div class="zx_slider">
    <div class="imgbox">
        <img alt="Danx" src="img/danx1.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx2.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx3.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx4.jpg" width="750" height="310" />
        <img alt="Danx" src="img/danx5.jpg" width="750" height="310" />
    </div>
    <div class="png"></div>
    <a href="http://www.dijiuzhanzhang.com/" id="hi_btn0" class="hi_btn"></a>
    <a href="http://www.dijiuzhanzhang.com/" id="hi_btn1" class="hi_btn"></a>
    <a href="http://www.dijiuzhanzhang.com/" id="hi_btn2" class="hi_btn"></a>
    <a href="http://www.dijiuzhanzhang.com/" id="hi_btn3" class="hi_btn"></a>
    <a href="http://www.dijiuzhanzhang.com/" id="hi_btn4" class="hi_btn"></a>
    <div class="btnbox">
        <a onmouseover="btn_m_over(0)"><img alt="Danx" id="btn_img0" class="thumb img_hover" src="img/danx1.jpg" /></a>
        <a onmouseover="btn_m_over(1)"><img alt="Danx" id="btn_img1" class="thumb" src="img/danx2.jpg" /></a>
        <a onmouseover="btn_m_over(2)"><img alt="Danx" id="btn_img2" class="thumb" src="img/danx3.jpg" /></a>
        <a onmouseover="btn_m_over(3)"><img alt="Danx" id="btn_img3" class="thumb" src="img/danx4.jpg" /></a>
        <a onmouseover="btn_m_over(4)"><img alt="Danx" id="btn_img4" class="thumb" src="img/danx5.jpg" /></a>
    </div>
    <div class="lbtn"></div>
    <div class="rbtn"></div>
    <div class="slider_p">
        <div id="slider_p0" class="slider_p_div">
			<h3>標題1</h3>
			<p>百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</p>
        </div>
        <div id="slider_p1" class="slider_p_div">
			<h3>標題2</h3>
			<p>2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</p>
        </div>
        <div id="slider_p2" class="slider_p_div">
			<h3>標題3</h3>
			<p>致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的</p>
        </div>
        <div id="slider_p3" class="slider_p_div">
			<h3>標題4</h3>
			<p>您到卡上黑暗圣經卡薩丁</p>
        </div>
        <div id="slider_p4" class="slider_p_div">
			<h3>標題5</h3>
			<p>打考勤卡和飯來欺騙卡號發</p>
        </div>
    </div>
</div><!--zx_slider end-->
<script type="text/javascript">
var slider_count=4;
$(".slider_p_div").hide();
$("#slider_p0").show();
$(".hi_btn").hide();
$("#hi_btn0").show();
$(".img_hover").animate({bottom:'10px'});
var slider_i=1;
var m_over=true;
function zx_slider(){
	if(m_over){
		if(slider_i<0){slider_i=slider_count;}
		//p
		$(".slider_p_div").hide();
		$("#slider_p"+slider_i).show();
		//p end
		//hi_btn
		$(".hi_btn").hide();
		$("#hi_btn"+slider_i).show();
		//hi_btn end
		//btn
		$(".btnbox img").stop(true,true);
		$(".btnbox img").removeClass("img_hover");
		$(".btnbox img").animate({bottom:'0px'},200);
		$("#btn_img"+slider_i).addClass("img_hover");
		$("#btn_img"+slider_i).animate({bottom:'10px'},200);
		//btn end
		$(".imgbox").stop();
		$(".imgbox").animate({left:'-750'*slider_i+'px'});
		if(slider_i<slider_count){
			slider_i++;	
		}else{
			slider_i=0;
		}
	}
}
$(".lbtn").click(function(){
	m_over=true;
	if(slider_i==0){slider_i=slider_count-1}else{slider_i=slider_i-2;}
	zx_slider();
	m_over=false;
});
$(".rbtn").click(function(){
	m_over=true;
	zx_slider();
	m_over=false;
});
function btn_m_over(btn_i){
	if(slider_i-1!=btn_i){
		m_over=true;
		slider_i=btn_i;
		zx_slider();
		m_over=false;
	}
}
zx_timer=setInterval("zx_slider();",5000); 
$(".zx_slider").mouseover(function(){
	m_over=false;
});
$(".zx_slider").mouseout(function(){
	m_over=true;
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 自動滾動圖片輪播 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子