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 相关文章推荐
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
javascript实现前端分页效果
Jun 24 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
JavaScript实现表单验证功能
Dec 09 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技术开发技巧分享
2010/03/23 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python图像常规操作
2017/11/11 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
文秘专业自荐信
2013/10/14 职场文书
学生实习推荐信范文
2013/11/26 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
打架检讨书2000字
2014/02/22 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
2014年化验员工作总结
2014/11/18 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python