完美JQuery图片切换效果的简单实现


Posted in Javascript onJuly 21, 2016

效果如下:

完美JQuery图片切换效果的简单实现

css:

body { font-family:"Microsoft Yahei"; }
body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;}  
img{vertical-align: top;}
/***大图切换***/
.scroll_view{margin: 0px auto;overflow:hidden;position: relative;}
.photo_view li{position:absolute;width: 100%;}
.photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;}
.photo_view li em{z-index: 1;background:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000');_background:#000;}
.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;}
.photo_view li h3 a{color:#fff;}
.photo_view li h3 a:hover{color:#f60;}
.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;}
.small_photo li {float: left;padding-right: 10px;}
.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;}
.small_photo li.active img{border: solid 2px #f60;}

html:

<!-- start:大图切换 -->
<div class="scroll_view">
  <ul class="photo_view">
    <li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果1</a></h3></li>
    <li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果2</a></h3></li>
    <li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果3</a></h3></li>
    <li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果4</a></h3></li>
  </ul>
  <ul class="small_photo"></ul>
</div>
<!-- End:大图切换 -->

js:

$.fn.extend({  
  imgScroll:function(options){    
    var def={phtot_parent:$(".scroll_view"),photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:800,isauto:true,width:800,height:349},
      opt=$.extend({},def,options),
      $photo_view=opt.photo_view,
      $small_photo=opt.small_photo,
      speed=opt.speed,
      isauto=opt.isauto,
      index=0,
      _length=$photo_view.find("li").length,
      strTime=null;
    opt.phtot_parent.css({width:opt.width,height:opt.height});
    $photo_view.find("li:not(:first)").hide()//.find("img").hide();
    $photo_view.find("li").each(function(i){
      $small_photo.append('<li><img src="'+$(this).find("img").attr("src")+'" alt="" class="" /></li>');
    })
    $small_photo.find("li:first").addClass("active");
    //小图鼠标动作
    $small_photo.find("li").bind("mouseenter",function(){  
      clearInterval(strTime);
      if(index!=$(this).index()){
        index=$(this).index();  
        animate(index)
      }
    }).bind("mouseleave",function(){      
      if(isauto){
        start();  
      }
    });
    //大图悬停动作
    $photo_view.find("li").bind("mouseenter",function(){  
      clearInterval(strTime);      
    }).bind("mouseleave",function(){      
      if(isauto){
        start();  
      }
    });
    //自动播放
    if(isauto){
      start();  
    }
    //启动自动播放
    function start(){
      strTime=setInterval(function(){
        index >= _length-1 ? index=0 : index++;
        animate(index);
      },speed);
    }
    //动画效果
    function animate(_index){//console.log(_index)
      $small_photo.find("li").eq(_index).addClass('active').siblings().removeClass("active");//改变小图导航样式
      $photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的层级
      $photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0});  //装大图的opacity设置为0  
      $photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){
        $(this).removeAttr("style");//动画之后删除opacity
        $photo_view.find("li").eq(_index).show().siblings().hide();//显示大图  
      });//展示当前显示动画
    }
  }
});
<script type="text/javascript">
  $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:3000,isauto:true}); 
  })
</script>

以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JSON 数据格式介绍
Jan 13 Javascript
javascript object array方法使用详解
Dec 03 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
jQuery的ajax下载blob文件
Jul 21 #Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 #Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 #Javascript
jQuery新窗口打开外链接
Jul 21 #Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 #Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 #Javascript
Node.js如何自动审核团队的代码
Jul 20 #Javascript
You might like
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
浅析Python中的多重继承
2015/04/28 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
网络书店创业计划书
2014/02/07 职场文书
房地产项目建议书
2014/03/12 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
团队口号大全
2014/06/06 职场文书
竞赛口号大全
2014/06/16 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
用电申请报告范文
2015/05/18 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL