首页
所有分类
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代码
Nov 09 Javascript
JavaScript面象对象设计
Apr 28 Javascript
JsDom 编程小结
Aug 09 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 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
网页解析(1) 查找算法(1) 二维数组(2) translation(2) 分块(1) 嵌套(1) decorator(1) 装饰器(1) 安卓(1) 循环(3)
You might like
php实现jQuery扩展函数
2009/10/30 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
php实现的生成排列算法示例
2019/07/25 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
《梅花魂》教学反思
2014/04/30 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
房产转让协议书（2014版）
2014/09/30 职场文书