首页
所有分类
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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
vue封装数字翻牌器
Apr 20 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
白俄罗斯购物网站(3) 保加利亚购物网站(3) JAVA面试题(401) 约旦购物网站(1) 马耳他购物网站(1) Android面试题(6) C++面试题(199) 冰岛购物网站(1) PHP面试题(54) 哈萨克斯坦购物网站(2)
You might like
当海贼王变成JOJO风
2020/03/02 日漫
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
美国最好的保健品打折网店：Swanson
2017/08/04 全球购物
美国在线家居装饰店：Belle＆June
2018/10/24 全球购物
美国办公用品折扣网站：Shoplet.com
2019/11/24 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
办公室内勤工作职责
2013/12/11 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
社区活动邀请函范文
2014/01/29 职场文书
四年级学生评语大全
2014/04/21 职场文书
车辆转让协议书
2014/09/24 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
团拜会主持词
2015/07/04 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js