完美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 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JavaScript小技巧整理
Dec 30 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
在PHP中使用curl_init函数的说明
2010/11/02 PHP
解析PHP提交后跳转
2013/06/23 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
自动最大化窗口的Javascript代码
2013/05/22 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Express的路由详解
2015/12/10 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
bootstrap table实例详解
2017/01/06 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python解决八皇后问题示例
2018/04/22 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
党支部三会一课计划
2014/09/24 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
归途列车观后感
2015/06/17 职场文书