jQuery可悬停控制图片轮播
2015-12-03 15:37
736 查看
![](http://static.oschina.net/uploads/space/2015/1203/150333_9ISO_2509123.png)
图片轮播相信很多人你也见过,各大网站上基本上都有,那么究竟是怎么实现的呢?不废话,直接上代码:
<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>
首先咱得先把图片放进去,css样式我这里就不写了,主要说的js控制图片自动轮播,也可以通过左右两边的按钮实现图片的轮换
不废话,上代码:
<script src="js/jquery.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>slider部分代码:
相关文章推荐
- jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
- ajax请求中传递的参数中如果含有特殊字符怎么处理?
- 向上弹出菜单jQuery插件
- jQuery根据元素值删除数组元素的方法
- Jquery_artDialog对话框弹出
- smarty框架中 点击即可编辑标题的 jquery实现代码
- jquery 弹出框插件 dialog使用介绍
- jquery给input标签赋值时出现value有值页面没显示的情况
- jQuery数字,手机号,邮箱校验
- JQuery中Ajax进行无刷新修改类别的办法
- jQuery源码学习13——Ajax
- jQuery学习随笔(一)
- [置顶] jquery的删除和增加
- jQuery实现清空table表格除首行外的所有数据
- jquery ajax POST 例子详解
- 49个jquery代码经典片段
- jquery.Ajax跨域访问数据方法
- Jquery DIV滚动至浏览器顶部位置固定
- jquery纵向抽屉式导航栏
- JSP中如何使用JQuery?