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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
javascript实现简单留言板案例
Feb 09 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
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php多任务程序实例解析
2014/07/19 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python遍历numpy数组的实例
2018/04/04 Python
python清除函数占用的内存方法
2018/06/25 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python实现word2Vec model过程解析
2019/12/16 Python
如何在django中添加日志功能
2020/02/06 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
营销与策划个人求职信
2013/09/22 职场文书
儿科护士实习自我鉴定
2013/10/17 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
家长给学校的建议书
2014/05/15 职场文书
大专生自荐书范文
2014/06/22 职场文书
师范生见习总结范文
2015/06/23 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技