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轮播效果就完成了,当然还有很多需要改进的地方。

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
学习Vue组件实例
Apr 28 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
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
You might like
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
学习vue.js计算属性
2016/12/03 Javascript
javascript基础知识讲解
2017/01/11 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
查摆问题整改措施
2014/10/24 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
长城导游词300字
2015/01/30 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
家庭经济困难证明
2015/06/23 职场文书
高二数学教学反思
2016/02/18 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电