非常棒的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 相关文章推荐
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
react的hooks的用法详解
Oct 12 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php统计数组元素个数的方法
2015/07/02 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
js简单的分页器插件代码实例
2019/09/11 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python的多重继承的理解
2017/08/06 Python
python中单下划线_的常见用法总结
2018/07/10 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
餐饮营销方案
2014/02/23 职场文书
留守儿童工作方案
2014/06/02 职场文书
安全责任协议书范本
2016/03/23 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
利用javaScript处理常用事件详解
2021/04/14 Javascript
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android