非常棒的jQuery图片轮播效果


Posted in Javascript onApril 17, 2016

本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下

购物产品展示:图片轮播器,效果如下所示:

非常棒的jQuery图片轮播效果

思路说明:

每隔一段时间,实现图片的自动切换及选项卡选中效果

两个区域:

   最外层容器区域,如上图红色线框矩形

   选项卡区域

两个事件:

    鼠标悬浮或鼠标划入mouseover

    鼠标离开mouseleave

/**大屏广告滚动样式**/
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery个性化图片轮播效果</title>
 <link rel="stylesheet" href="styles/main.css" type="text/css" />
 <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
 <script src="js/imagesScroll.js" type="text/javascript"></script>
</head>
<body>
 <!-- 大屏广告 start -->
 <div id="jnImageroll">
  <a href="#nogo" id="JS_imgWrap">
   <img src="images/ads/1.jpg" alt="相约情人节"/>
   <img src="images/ads/2.jpg" alt="新款上线"/>
   <img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
   <img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
   <img src="images/ads/5.jpg" alt="春季新品发布"/>
  </a>
  <div>
   <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
   <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
   <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
   <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
   <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
  </div>
 </div>
 <!-- 大屏广告 end -->
</body>
</html>

#jnImageroll{
 width:550px; 
 height:321px;
 overflow: hidden;
 position: relative;
}
#jnImageroll img{
 position: absolute; 
 left: 0; 
 top: 0;
}
#jnImageroll div{
 position: absolute;
 left: 0; 
 bottom: 0;
}

#jnImageroll div a{
 width: 79px;
 background: #444444;
 float: left;
 display: inline-block;
 margin-right: 1px;
 text-align: center;
 padding: 5px 15px;
 text-decoration: none;
 color: #FFFFFF;
 font: 14px/1.5 tahoma,arial;
}
#jnImageroll div a em{
 display: block;/*将行内元素变成块级元素*/
 height: 19px;
 overflow: hidden;
}
#jnImageroll a.chos {
 background: #37A7D7;
 color: #FFFFFF;
}
/* 首页大屏广告效果 */
$(function(){
 var $imgrolls = $("#jnImageroll div a");//选项卡区域
 $imgrolls.css("opacity","0.7"); //设置选项卡透明度
 var len = $imgrolls.length;
 var index = 0;
 var adTimer = null;
 //选项卡的鼠标悬浮、离开调用函数
 $imgrolls.mouseover(function(){
  index = $imgrolls.index(this);
  showImg(index);
 }).eq(0).mouseover(); 
 
 //滑入 停止动画,滑出开始动画.
 $('#jnImageroll').hover(function(){
   if(adTimer){ 
    clearInterval(adTimer);
   }
   },function(){
   adTimer = setInterval(function(){
    showImg(index);
    index++;
    if(index==len){index=0;}
   } , 5000);
 }).trigger("mouseleave");
})
//显示不同的幻灯片
function showImg(index){
 var $rollobj = $("#jnImageroll");
 var $rolllist = $rollobj.find("div a");
 var newhref = $rolllist.eq(index).attr("href");
 $("#JS_imgWrap").attr("href",newhref)
    .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
 $rolllist.removeClass("chos").css("opacity","0.7")
    .eq(index).addClass("chos").css("opacity","1"); 
}

以上就是很有个性的jQuery图片轮播效果,希望大家喜欢。

Javascript 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
js实现橱窗展示效果
Jan 11 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 #Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
jQuery实现无限往下滚动效果代码
Apr 16 #Javascript
jQuery遍历json的方法分析
Apr 16 #Javascript
jquery对dom节点的操作【推荐】
Apr 15 #Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 #Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
You might like
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
php swoft框架实例用法
2020/12/22 PHP
js日历功能对象
2012/01/12 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python ddt实现数据驱动
2018/03/14 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
《果园机器人》教学反思
2014/04/13 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
作风建设剖析材料
2014/10/06 职场文书
科技活动周标语
2014/10/08 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
工作试用期自我评价
2015/03/10 职场文书
学校食堂管理制度
2015/08/04 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB