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类的封装及实现代码
Dec 02 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php 在线打包_支持子目录
2008/06/28 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php二维码生成以及下载实现
2017/09/28 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JS判断数组那点事
2017/10/10 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
vue 组件简介
2020/07/31 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python向excel中写入数据的方法
2019/05/05 Python
Python字典对象实现原理详解
2019/07/01 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python 常见的排序算法实现汇总
2020/08/21 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
树转促学习心得体会
2014/09/10 职场文书
2015年禁毒工作总结
2015/04/30 职场文书