基于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 相关文章推荐
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
Mysql的常用命令
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php微信开发之上传临时素材
2016/06/24 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
如何查找网页漏洞
2016/06/22 面试题
施工班组长岗位职责
2014/01/05 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
上班玩手机检讨书
2014/02/17 职场文书
犯错检讨书
2014/02/21 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
钱学森电影观后感
2015/06/04 职场文书
对公司的意见和建议
2015/06/04 职场文书
毕业典礼主持词
2015/06/29 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL