基于JS实现仿百度百家主页的轮播图效果
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">阅读数</span><span class="num" data-read="16913">16913</span></div>--> <!---------- 图片下方的解释文字,由js控制 哪张图对应哪个链接 -------> <div class="box"> <i class="mark"></i> <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title">李嘉诚400亿澳洲并购:千亿现金急寻出路</a> <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none">美女</a> <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none">自行车</a> <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none">足球</a> </div> </div> <!---------- 右下方四个点 -------> <div class="circles"> <a href="http://guoshiliangbo.baijia.baidu.com/article/756806" class="circle" target="_blank" style="background:red"></a> <a href="http://yemacaijing.baijia.baidu.com/article/755797" class="circle" target="_blank"></a> <a href="http://mbcaijing.baijia.baidu.com/article/755645" class="circle " target="_blank"></a> <a href="http://junstapo.baijia.baidu.com/article/755717" 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);//函数后面不能加括号 //自动播放 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); } //鼠标进入播放区域 暂停播放 $(".imgview").mouseenter(function(){ //alert("hi!"); clearInterval(circulate); }) //鼠标移出播放区域 开始播放 $(".imgview").mouseleave(function(){ //alert("hi!"); circulate=setInterval(auto_play,2000); }) //鼠标移入序号圆点 切换到序号所对应图 $(".circle").mouseenter(function(){ //如何确定当前circle的序号? var num=$(this).index(); //alert(num); clearInterval(circulate); changePic(num); circulate=setInterval(auto_play,2000); }); //点击左边箭头 切换到上一张 $(".carousel-btn-prev").click(function(){ clearInterval(circulate); //alert(index); //1.现在处在第几张 :index; if(index==0)index=3; else index=index-1; changePic(index); circulate=setInterval(auto_play,2000); }); //点击右边箭头 切换到下一张 $(".carousel-btn-next").click(function(){ clearInterval(circulate); //alert(index); //1.现在处在第几张 :index; if(index==3)index=0; else index=index+1; changePic(index); circulate=setInterval(auto_play,2000); });
以上所述是小编给大家介绍的基于JS实现仿百度百家主页的轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
赞 (0)