基于JS实现仿百度百家主页的轮播图效果


Posted in Javascript onMarch 06, 2017

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实现仿百度百家主页的轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 #Javascript
Bootstrap导航简单实现代码
Mar 06 #Javascript
Bootstrap栅格系统简单实现代码
Mar 06 #Javascript
javascript DOM的详解及实例代码
Mar 06 #Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 #Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 #Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python实时获取cmd的输出
2015/12/13 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
培训班主持词
2014/03/28 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
小学重阳节活动总结
2015/03/24 职场文书
开会通知
2015/04/20 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书