首页
所有分类
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计算页面执行时间的函数
Dec 07 Javascript
xml和web特殊字符
Apr 28 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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
德生PL330(2) PHILIPS(3) 飞利浦(2) 德劲1103(3) 德生9700DX(1) D1835(1) Panasonic(1) ICF-SW7600GR(1) L4X25T(1) ICF-SW55(1)
You might like
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jQuery实现选项卡功能（两种方法）
2017/03/08 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python获取时间戳代码实例
2019/09/24 Python
python爬虫实现获取下一页代码
2020/03/13 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
巴西最大的体育用品商城：Netshoes巴西
2016/11/29 全球购物
Linux的主要特性
2014/10/06 面试题
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
西式婚礼主持词
2014/03/13 职场文书
委托协议书范本
2014/04/22 职场文书
法律顾问服务方案
2014/05/15 职场文书
2014年物流工作总结
2014/11/25 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
实用求职信模板范文
2019/05/13 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android