完美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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
BootStrap 导航条实例代码
May 18 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
js实现简单的无缝轮播效果
Sep 05 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php 前一天或后一天的日期
2008/06/28 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
实例讲解PHP表单
2020/06/10 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
关于python中remove的一些坑小结
2021/01/04 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
医院竞聘演讲稿
2014/05/16 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
工会文体活动总结
2015/05/07 职场文书
小学毕业感言100字
2015/07/30 职场文书
退伍军人感言
2015/08/01 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python