基于JS實(shí)現(xiàn)仿百度百家主頁的輪播圖效果
更新時間：2017年03月06日 09:11:42 作者：u010785025
本文給大家分享基于html和js實(shí)現(xiàn)的仿百度百家主頁的輪播圖效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下
HTML
<div class="ShowEntry">
<!-- <div id="widget_content_player" class="Player" alog-group="log-player">-->
<!--------- 右擊箭頭--------->
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="widget_content_player_prev" class="prev carousel-btn-prev">
<span class="icon-wrap"><img src="image/箭頭左.png"></span>
</a>
<div id="widget_content_player_wrapper" class="player">
<!---------- 一張大圖和涂上的文字 ------->
<div id="widget_content_player_imgView" class="imgview">
<!---------- 一張大圖 ------->
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="http://d.hiphotos.baidu.com/news/q%3D100/sign=da32af9f01fa513d57aa68de0d6c554c/c75c10385343fbf2f9ac9c60b97eca8064388ff4.jpg" hadcut="1" class="active" style="width: 100%; height: 100%; opacity: 1;">
</a>
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="image/95eef01f3a292df570506750b5315c6035a873e0.jpg" style="width: 100%; height: 100%; opacity: 1;">
</a>
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="image/0824ab18972bd407e8f01db872899e510fb30944.jpg.png" style="width: 100%; height: 100%; opacity: 1;">
</a>
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="image/9825bc315c6034a8cfd58fc7c213495409237644.jpg" style="width: 100%; height: 100%; opacity: 1;">
</a>
<!--<div class="readnum"><span class="tit">閱讀數(shù)</span><span class="num" data-read="16913">16913</span></div>-->
<!---------- 圖片下方的解釋文字，由js控制 哪張圖對應(yīng)哪個鏈接 ------->
<div class="box">
<i class="mark"></i>
<a target="_blank" class="title">李嘉誠400億澳洲并購：千億現(xiàn)金急尋出路</a>
<a target="_blank" class="title" style="display:none">美女</a>
<a target="_blank" class="title" style="display:none">自行車</a>
<a target="_blank" class="title" style="display:none">足球</a>
</div>
</div>
<!---------- 右下方四個點(diǎn) ------->
<div class="circles">
<a class="circle" target="_blank" style="background:red"></a>
<a class="circle" target="_blank"></a>
<a class="circle " target="_blank"></a>
<a class="circle " target="_blank" ></a>
</div>
</div>
<!--------- 右擊箭頭--------->
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="widget_content_player_next" class="next carousel-btn-next">
<span class="icon-wrap"><img src="image/右箭頭.png"</span>
</a>
<!-- </div>-->
</div>
CSS
.ShowEntry{
height:inherit;
width:70%;
background:#00F;
margin-right:10px;
float:left;
position:relative;
}
.ShowEntry .carousel-btn-prev, .ShowEntry .carousel-btn-next {
position: absolute;
top: 130px;
width: 50px;
height: 50px;
z-index: 89;
}
.addBgi{
background-image:url(../image/%E5%9C%86.png);
background-repeat: no-repeat;
}
.ShowEntry .carousel-btn-prev {
left: 15px;
background-position: -10px -95px\9;
/*background-image:url(../image/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png)*/
}
.ShowEntry .carousel-btn-next {
right: 15px;
background-position: -160px -95px\9;
}
.ShowEntry .icon-wrap {
position: relative;
display: block;
margin: 10% 0 0 10%;
width: 80%;
height: 80%;
/* z-index:99;*/
}
.player {
position: relative;
}
.player .imgview {
/*width: 670px;*/
height: 300px;
position: relative;
overflow: hidden;
background: #ccc;
}
.circles{
position: absolute;
bottom: 20px;
right: 0;
width: 80px;
height: 8px;
}
/*.player .circles .active*/
.active {
background: red;
opacity: 1;/*��ȫ����*/
}
.player .circles .circle {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background:#000;
margin-left: 2px;
opacity: .7;
}
.box{
height:80px;
width:100%;
position:absolute;
bottom:0;
}
.box .title {
font-size: 18px;
line-height: 70px;
color: #fff;
font-family: "���ź�","Hiragino Sans GB";
display: block;
text-align:center;
}
.box .title:hover {
text-decoration: none;
color: #e05a5a;
}
javascript
var index=0;
//周期：2秒 auto_play后不能加括號
var circulate=setInterval(auto_play,2000);//函數(shù)后面不能加括號
//自動播放
function auto_play(){
//alert(index);
if(index>=3)
{index=0;}
else {index=index+1;}
changePic(index);
/*$(".imgview img").css("display","none");*/
//$(".imgview img").attr("src",imgs[index]);
//alert(index);
}
//切換圖片
function changePic(index){
//alert(index);
$(".imgview a").css("display","none");
$(".box a").css("display","none");
$(".circles a").css("background","#000");
//var src=$(".imgview a:eq("+index+")").attr("target");
//alert(src);
$(".imgview a:eq("+index+")").css("display","inline");
$(".box a:eq("+index+")").css("display","block");
$(".circles a:eq("+index+")").css("background","red");
//alert(src);
}
//鼠標(biāo)進(jìn)入播放區(qū)域 暫停播放
$(".imgview").mouseenter(function(){
//alert("hi!");
clearInterval(circulate);
})
//鼠標(biāo)移出播放區(qū)域 開始播放
$(".imgview").mouseleave(function(){
//alert("hi!");
circulate=setInterval(auto_play,2000);
})
//鼠標(biāo)移入序號圓點(diǎn) 切換到序號所對應(yīng)圖
$(".circle").mouseenter(function(){
//如何確定當(dāng)前circle的序號？
var num=$(this).index();
//alert(num);
clearInterval(circulate);
changePic(num);
circulate=setInterval(auto_play,2000);
});
//點(diǎn)擊左邊箭頭 切換到上一張
$(".carousel-btn-prev").click(function(){
clearInterval(circulate);
//alert(index);
//1.現(xiàn)在處在第幾張 ：index;
if(index==0)index=3;
else index=index-1;
changePic(index);
circulate=setInterval(auto_play,2000);
});
//點(diǎn)擊右邊箭頭 切換到下一張
$(".carousel-btn-next").click(function(){
clearInterval(circulate);
//alert(index);
//1.現(xiàn)在處在第幾張 ：index;
if(index==3)index=0;
else index=index+1;
changePic(index);
circulate=setInterval(auto_play,2000);
});
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)仿百度百家主頁的輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
javascript利用初始化數(shù)據(jù)裝配模版的實(shí)現(xiàn)代碼
實(shí)現(xiàn)一個通用方法，使用初始化數(shù)據(jù)來裝配模版。需要的朋友可以參考下。2010-11-11
關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測試
彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣，接下來介紹下scrollLeft,scrollTop的瀏覽器兼容性，感興趣的你可以參考下哈2013-03-03
超詳細(xì)JavaScript深淺拷貝的實(shí)現(xiàn)教程
淺拷貝是指，一個新的對象對原始對象的屬性值進(jìn)行精確地拷貝；深拷貝是指，對于簡單數(shù)據(jù)類型直接拷貝他的值，對于引用數(shù)據(jù)類型，在堆內(nèi)存中開辟一塊內(nèi)存用于存放復(fù)制的對象，并把原有的對象類型數(shù)據(jù)拷貝過來。本文將實(shí)現(xiàn)JavaScript深淺拷貝，需要的可以參考一下2022-09-09
使用JS前端技術(shù)實(shí)現(xiàn)靜態(tài)圖片局部流動效果
本文使用前端開發(fā)技術(shù)，結(jié)合?SVG?和?CSS?來實(shí)現(xiàn)類似的液化流動效果，包含的知識點(diǎn)主要包括：mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動畫及input[type=file]?本地圖片資源加載，需要的朋友可以參考下2022-08-08
關(guān)于字符串和對象互轉(zhuǎn)以及JSON.parse()的坑
這篇文章主要介紹了關(guān)于字符串和對象互轉(zhuǎn)以及JSON.parse()的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
接上一文，我們已經(jīng)實(shí)現(xiàn)了圖片的自動淡入淡出播放。接下來需要加入控制器。2010-10-10
這篇文章主要介紹了如何阻止移動端瀏覽器點(diǎn)擊圖片瀏覽,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
Javascript中使用A標(biāo)簽獲取當(dāng)前目錄的絕對路徑方法
這篇文章主要介紹了Javascript中使用A標(biāo)簽獲取當(dāng)前目錄的絕對路徑方法,本文講解的方法比較特別,需要的朋友可以參考下2015-03-03
JavaScript中的console.trace()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.trace()函數(shù)詳細(xì)介紹,console.trace()函數(shù)用來打印函數(shù)調(diào)用的棧信息,需要的朋友可以參考下2014-12-12
關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案
在處理一些極端情況下的復(fù)雜數(shù)值計算時,我們可能會遇到這樣的情況,就是運(yùn)算結(jié)果丟失精度,下面這篇文章主要給大家介紹了關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案的相關(guān)資料,需要的朋友可以參考下2024-01-01