JQuery悬停控制图片轮播——代码简单


Posted in Javascript onAugust 05, 2015

jquery实现的鼠标悬停图片自动轮播效果,当把鼠标悬停到图片时,图像就会不断循环播放,速度非常快,效果非常逼真,就和在放武侠片一样,使用了jquery实现,下面小编给大家分析jq悬停控制图片轮播,请看小面的效果图。

JQuery悬停控制图片轮播——代码简单

在线预览             源码下载

具体实现的代码如下:

<!-- 轮播广告 -->
 <div id="banner_tabs" class="flexslider">
 <ul class="slides">
  <li>
  <a title="" target="_blank" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
  <li>
  <a title="" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
  <li>
  <a title="" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
 </ul>
 <ul class="flex-direction-nav">
  <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  <li><a class="flex-next" href="javascript:;">Next</a></li>
 </ul>
 <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  <li><a>1</a></li>
  <li><a>2</a></li>
  <li><a>2</a></li>
 </ol>
 </div>
 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/slider.js"></script>
 <script type="text/javascript">
 $(function () {
  var bannerSlider = new Slider($('#banner_tabs'), {
  time: 5000,
  delay: 400,
  event: 'hover',
  auto: true,
  mode: 'fade',
  controller: $('#bannerCtrl'),
  activeControllerCls: 'active'
  });
  $('#banner_tabs .flex-prev').click(function () {
  bannerSlider.prev()
  });
  $('#banner_tabs .flex-next').click(function () {
  bannerSlider.next()
  });
 })
 </script>

css代码:

 

.flexslider {
  margin: 0px auto 20px;
  position: relative;
  width: 100%;
  height: 482px;
  overflow: hidden;
  zoom: 1;
 }
  .flexslider .slides li {
  width: 100%;
  height: 100%;
  }
 .flex-direction-nav a {
  width: 70px;
  height: 70px;
  line-height: 99em;
  overflow: hidden;
  margin: -35px 0 0;
  display: block;
  background: url(images/ad_ctr.png) no-repeat;
  position: absolute;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .3s ease;
  border-radius: 35px;
 }
 .flex-direction-nav .flex-next {
  background-position: 0 -70px;
  right: 0;
 }
 .flex-direction-nav .flex-prev {
  left: 0;
 }
 .flexslider:hover .flex-next {
  opacity: 0.8;
  filter: alpha(opacity=25);
 }
 .flexslider:hover .flex-prev {
  opacity: 0.8;
  filter: alpha(opacity=25);
 }
  .flexslider:hover .flex-next:hover,
  .flexslider:hover .flex-prev:hover {
  opacity: 1;
  filter: alpha(opacity=50);
  }
 .flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
 }
  .flex-control-nav li {
  margin: 0 2px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  }
 .flex-control-paging li a {
  background: url(images/dot.png) no-repeat 0 -16px;
  display: block;
  height: 16px;
  overflow: hidden;
  text-indent: -99em;
  width: 16px;
  cursor: pointer;
 }
  .flex-control-paging li a.flex-active,
  .flex-control-paging li.active a {
  background-position: 0 0;
  }
 .flexslider .slides a img {
  width: 100%;
  height: 482px;
  display: block;
 }

以上代码就是本文使用jq实现悬停控制图片轮播的内容,希望大家喜欢。

Javascript 相关文章推荐
JavaScript中的细节分析
Jun 30 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 #Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 #Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 #Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 #Javascript
JS模拟键盘打字效果的方法
Aug 05 #Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Python使用py2exe打包程序介绍
2014/11/20 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python如何判断IP地址合法性
2020/04/05 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
大学生自荐信范文
2015/03/05 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
设置IIS Express并发数
2022/07/07 Servers