非常棒的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 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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
晶体管单管来复再生式收音机
2021/03/02 无线电
一篇入门的php Class 文章
2007/04/04 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
python爬取网站数据保存使用的方法
2013/11/20 Python
Python中文字符串截取问题
2015/06/15 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
解决python线程卡死的问题
2019/02/18 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python str字符串转uuid实例
2020/03/03 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
给国外客户的邀请函
2014/01/30 职场文书
管理建议书范文
2014/05/13 职场文书
支教个人总结
2015/03/04 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
Redis可视化客户端小结
2021/06/10 Redis
微信小程序实现轮播图指示器
2022/06/25 Javascript