首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现自适应banner焦点图

Posted in Javascript onFebruary 16, 2017

效果如下：

jquery实现自适应banner焦点图

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq自适应banner焦点图</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
 <style>
  @charset "UTF-8";
  /*通用css*/
  body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {
   margin: 0;
   padding: 0;
   -webkit-text-size-adjust: none;
  }
  h1, h2, h3, h4, h5, h6 {
   font-size: 12px;
   font-weight: normal;
  }
  body > div {
   margin: 0 auto;
  }
  div {
   text-align: left;
  }
  a img {
   border: 0;
  }
  body {
   color: #333;
   text-align: center;
   font: 12px "宋体";
  }
  ul, ol, li {
   list-style-type: none;
   vertical-align: 0;
  }
  a {
   outline-style: none;
   color: #535353;
   text-decoration: none;
  }
   a:hover {
    color: #D40000;
    text-decoration: none;
   }
  /*通用CSS结束，应用特效时，以上样式可删除*/
  /* 效果CSS开始 */
  .lit {
   position: absolute;
   z-index: 999;
   margin-top: 10px;
  }
   .lit p {
    margin-bottom: 2px;
   }
   .lit a:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
   }
  .wrapper {
   width: 986px;
   margin: 0 auto;
   position: relative;
   height: 390px;
  }
  #banner {
   width: 100%;
   height: 390px;
   background: none;
   overflow: hidden;
   position: relative;
  }
  #banner_img {
   display: block;
   position: relative;
  }
   #banner_img li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-position: center;
    background-size: cover;
    display: none;
   }
    /*设置背景图片-------开始*/
    /*#banner_img li.item1 {
     background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg);
     display: block;
    }
    #banner_img li.item2 {
     background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg);
    }
    #banner_img li.item3 {
     background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg);
    }
    #banner_img li.item4 {
     background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg);
    }
    #banner_img li.item6 {
     background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg);
    }*/
   /*设置背景图片--------结束*/
   #banner_img .ad_img {
    position: absolute;
    right: 10px;
    top: 80px;
    width: 506px;
    height: 404px;
   }
   #banner_img .ad_txt {
    position: absolute;
    left: 10px;
    top: 170px;
    color: #fff;
    text-shadow: 1px 1px rgba(51, 51, 51, 0.3);
   }
    #banner_img .ad_txt h2 {
     font: bold 36px/60px Microsoft YaHei;
    }
    #banner_img .ad_txt a {
     display: block;
     width: 100px;
     height: 25px;
     line-height: 25px;
     text-align: center;
     margin-top: 10px;
     background: #fff;
     color: #666;
    }
  #banner_ctr {
   position: absolute;
   width: 960px;
   height: 122px;
   margin-left: -90px;
   left: 35%;
   bottom: -75px;
   z-index: 1;
  }
   #banner_ctr ul {
    width: 100%;
   }
   #banner_ctr li {
    float: left;
    display: inline-block;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   }
  .styclsa {
   line-height: 27px;
   background: url(http://smzdqiang.com/data/attachment/forum/201609/20/161609g5xjijj1x5lgiq4j.png) no-repeat;
   height: 27px;
   color: #ffffff;
   font-size: 12.48px;
   padding: 0px 0px 0 0px;
   width: 119px;
   margin: 0 auto;
   overflow: hidden;
   font-family: "宋体";
   zoom: 1;
  }

  .astysa {
   color: #ffffff;
   font-size: 12.48px;
   text-align: center;
  }

  #drag_ctr {
   position: absolute;
   top: -5px;
   cursor: pointer;
   left: 0px;
   width: 119px;
   height: 32px;
   bottom: 120px;
   background: url(http://smzdqiang.com/data/attachment/forum/201609/20/161611aooapbzu0da7oand.png) no-repeat;
   padding: 0px 0px 0 0px;
   margin: 0 auto;
   overflow: hidden;
   color: #fff;
   filter: alpha(opacity=50);
   color: #ffffff;
  }
  /* 效果CSS结束 */
 </style>
 <script>
  $(function () {
   var curIndex = 0;
   var time = 800;
   var slideTime = 6000;
   var adTxt = $("#banner_img>li>div>.ad_txt");
   var adImg = $("#banner_img>li>div>.ad_img");
   var int = setInterval("autoSlide()", slideTime);
   $("#banner_ctr>ul>li[class!='first-item'][class!='last-item']").mouseover(function () {
    var ct = $(this).index("#banner_ctr>ul>li[class!='first-item'][class!='last-item']");
    if (ct == 1 || ct == 0) {
     ct = 0;
    }
    if (ct == 2 || ct == 3) {
     ct = 1;
    }
    if (ct == 5 || ct == 4) {
     ct = 2;
    }
    if (ct == 6 || ct == 7) {
     ct = 3;
    }
    if (ct == 8 || ct == 9) {
     ct = 4;
    }
    if (ct < 0) {
     ct = 0;
    }
    show(ct);
    window.clearInterval(int);
    int = setInterval("autoSlide(1)", slideTime);
   });
   function autoSlide(ct) {
    curIndex + 1 >= 5 ? curIndex = -1 : 0;
    show(curIndex + 1);
   }
   function show(index) {
    $.easing.def = "easeOutQuad";
    $("#drag_ctr").stop(false, true).animate({ left: index * 120 + 0 }, time);
    $("#banner_img>li").eq(curIndex).stop(false, true).fadeOut(time);
    adTxt.eq(curIndex).stop(false, true).animate({ top: "340px" }, time);
    adImg.eq(curIndex).stop(false, true).animate({ right: "700px" }, time);
    setTimeout(function () {
     $("#banner_img>li").eq(index).stop(false, true).fadeIn(time);
     adTxt.eq(index).children("p").css({ paddingTop: "50px", paddingBottom: "50px" }).stop(false, true).animate({ paddingTop: "0", paddingBottom: "0" }, time);
     adTxt.eq(index).css({ top: "0", opacity: "0" }).stop(false, true).animate({ top: "170px", opacity: "1" }, time);

     adImg.eq(index).css({ right: "700px", opacity: "0" }).stop(false, true).animate({ right: "500px", opacity: "1" }, time);
    }, 200)

    curIndex = index;
   }
  });

 </script>
</head>
<body>
<!--效果html开始-->
<div style="margin: 0px auto; width:1200px; padding:0px; ">
 <div class="lit">
 <p><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
 <p><a href="http://www.smzdqiang.com/" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
 <p><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
 </div>
</div>
<div id="banner">
 <ul id="banner_img">
  <li class="item1" style="display: list-item;"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg" border="0" /></a></li>
 <li class="item2"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg" border="0" /></a></li>
 <li class="item3"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg" /></a></li>
 <li class="item4"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg" /></a></li>
 <li class="item6"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg" /></a></li>
 </ul>
 <div id="banner_ctr">
 <div id="drag_ctr">
 </div>
 <ul>
 <li style="width:0px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题1</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题2</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题3</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题4</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题5</a></li>
 </ul>
 </div>
</div>
<!--效果html结束-->
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jquery实现自适应banner焦点图

- Author -

jenn89

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JS实现很实用的对联广告代码（可自适应高度）
Sep 18 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
js 作用域和变量详解
Feb 16 #Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 #Javascript
js面向对象编程总结
Feb 16 #Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 #Javascript
JS实现DIV高度自适应窗口示例
Feb 16 #Javascript
Js apply方法详解
Feb 16 #Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 #Javascript
element-ui(1) 优先队列(1) Dijkstra(1) 数据合并(1) 迪杰斯特拉(1) 动态代理(1) pongo2(1) Carbon(1) 连接查询(1) 模板引擎(1)
You might like
曾在DC漫画界反派角色扮演的演员，谁才是你心目中的小丑之王？
2020/04/09 欧美动漫
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
下载官网python并安装的步骤详解
2019/10/12 Python
如何基于Python按行合并两个txt
2020/11/03 Python
爱尔兰电子产品购物网站：Komplett.ie
2018/04/04 全球购物
27个经典Linux面试题及答案，你知道几个？
2014/03/11 面试题
学生拾金不昧表扬信
2014/01/21 职场文书
租房协议书怎么写
2014/04/10 职场文书
六年级学生评语
2014/04/22 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers