首页
所有分类
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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
用Javascript 和 CSS 实现脚注（Footnote）效果
Sep 09 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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
appdata(1) protocol(1) minio(1) 黑屏(2) mysqldump(1) Windows server 2003(1) XPathParser(1) sentinel(1) sock(2) ACID(1)
You might like
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
es6的数字处理的方法（5个）
2017/03/16 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
js 实现 list转换成tree的方法示例（数组到树）
2019/08/18 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python tkinter实现屏保程序
2019/07/30 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
提高python代码运行效率的一些建议
2020/09/29 Python
悦木之源美国官网：Origins美国
2016/08/01 全球购物
英国最大的纸工艺品商店：CraftStash
2018/12/01 全球购物
爱国主义演讲稿
2014/05/07 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
被告答辩状范文
2015/05/22 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android