首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Jquery代码实现图片轮播效果（一）

Posted in Javascript onAugust 12, 2015

文章写的不好，还请各位高手指教，不废话了，先上张效果图吧看下：

Jquery代码实现图片轮播效果（一）

在线演示         下载源码

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。

下篇是一个纯粹的jquery轮播插件， 该插件可以定制各种效果，方便的配置以及可扩展。

下面是整体的代码：

index.html
[html] view plaincopy
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jquery轮播效果图 </title> 
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> 
<style type="text/css"> 
 * { 
 padding: 0px; 
 margin: 0px; 
 } 
 a { 
 text-decoration: none; 
 } 
 ul { 
 list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
 width: 650px; 
 height: 413px; 
 } 
 .slider { 
 text-align: center; 
 margin: 30px auto; 
 position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
 position: absolute; 
 z-index: 8; 
 } 
 .slider-panel { 
 position: absolute; 
 } 
 .slider-panel img { 
 border: none; 
 } 
 .slider-extra { 
 position: relative; 
 } 
 .slider-nav { 
 margin-left: -51px; 
 position: absolute; 
 left: 50%; 
 bottom: 4px; 
 } 
 .slider-nav li { 
 background: #3e3e3e; 
 border-radius: 50%; 
 color: #fff; 
 cursor: pointer; 
 margin: 0 2px; 
 overflow: hidden; 
 text-align: center; 
 display: inline-block; 
 height: 18px; 
 line-height: 18px; 
 width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
 background: blue; 
 } 
 .slider-page a{ 
 background: rgba(0, 0, 0, 0.2); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
 color: #fff; 
 text-align: center; 
 display: block; 
 font-family: "simsun"; 
 font-size: 22px; 
 width: 28px; 
 height: 62px; 
 line-height: 62px; 
 margin-top: -31px; 
 position: absolute; 
 top: 50%; 
 } 
 .slider-page a:HOVER { 
 background: rgba(0, 0, 0, 0.4); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
 left: 100%; 
 margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
 var length, 
  currentIndex = 0, 
  interval, 
  hasStarted = false, //是否已经开始轮播 
  t = 3000; //轮播时间间隔 
 length = $('.slider-panel').length; 
 //将除了第一张图片隐藏 
 $('.slider-panel:not(:first)').hide(); 
 //将第一个slider-item设为激活状态 
 $('.slider-item:first').addClass('slider-item-selected'); 
 //隐藏向前、向后翻按钮 
 $('.slider-page').hide(); 
 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
 $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
  stop(); 
  $('.slider-page').show(); 
 }, function() { 
  $('.slider-page').hide(); 
  start(); 
 }); 
 $('.slider-item').hover(function(e) { 
  stop(); 
  var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
  currentIndex = $(this).index(); 
  play(preIndex, currentIndex); 
 }, function() { 
  start(); 
 }); 
 $('.slider-pre').unbind('click'); 
 $('.slider-pre').bind('click', function() { 
  pre(); 
 }); 
 $('.slider-next').unbind('click'); 
 $('.slider-next').bind('click', function() { 
  next(); 
 }); 
 /** 
  * 向前翻页 
  */ 
 function pre() { 
  var preIndex = currentIndex; 
  currentIndex = (--currentIndex + length) % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 向后翻页 
  */ 
 function next() { 
  var preIndex = currentIndex; 
  currentIndex = ++currentIndex % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 从preIndex页翻到currentIndex页 
  * preIndex 整数，翻页的起始页 
  * currentIndex 整数，翻到的那页 
  */ 
 function play(preIndex, currentIndex) { 
  $('.slider-panel').eq(preIndex).fadeOut(500) 
  .parent().children().eq(currentIndex).fadeIn(1000); 
  $('.slider-item').removeClass('slider-item-selected'); 
  $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
 } 
 /** 
  * 开始轮播 
  */ 
 function start() { 
  if(!hasStarted) { 
  hasStarted = true; 
  interval = setInterval(next, t); 
  } 
 } 
 /** 
  * 停止轮播 
  */ 
 function stop() { 
  clearInterval(interval); 
  hasStarted = false; 
 } 
 //开始轮播 
 start(); 
 }); 
</script> 
</head> 
<body> 
 <div class="slider"> 
 <ul class="slider-main"> 
  <li class="slider-panel"> 
  <a href="https://3water.com" target="_blank"><img alt="关注三水点靠木" title="关注三水点靠木" src="images/1.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://3water.com" target="_blank"><img alt="关注三水点靠木" title="关注三水点靠木" src="images/2.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://3water.com" target="_blank"><img alt="关注三水点靠木" title="关注三水点靠木" src="images/3.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://3water.com" target="_blank"><img alt="关注三水点靠木" title="关注三水点靠木" src="images/4.jpg"></a> 
  </li> 
 </ul> 
 <div class="slider-extra"> 
  <ul class="slider-nav"> 
  <li class="slider-item">1</li> 
  <li class="slider-item">2</li> 
  <li class="slider-item">3</li> 
  <li class="slider-item">4</li> 
  </ul> 
  <div class="slider-page"> 
  <a class="slider-pre" href="javascript:;;"><</a> 
  <a class="slider-next" href="javascript:;;">></a> 
  </div> 
 </div> 
 </div> 
</body> 
</html>

至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。

Jquery代码实现图片轮播效果（一）

- Author -

qq791967024

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue接口请求加密实例
Aug 11 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
javascript表单验证大全
Aug 12 #Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 #Javascript
jQuery实现文件上传进度条特效
Aug 12 #Javascript
XML文件转化成NSData对象的方法
Aug 12 #Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 #Javascript
jQuery实现动态添加和删除一个div
Aug 12 #Javascript
JavaScript多线程详解
Aug 12 #Javascript
239军机(1) ICF-903L(1) 根德5570(1) YAESU(1) DE1103(2) BCLer(1) frg-100(1) YB-230(1) AN-LP1(1) 74HC4066(1)
You might like
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
总经理文秘岗位职责
2014/02/03 职场文书
竞聘书怎么写，如何写？
2014/03/31 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015年社区工作总结
2015/04/08 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
Python 内置函数速查表一览
2021/06/02 Python