完美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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
浅谈document.write()输出样式
May 07 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 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 HTML代码串截取代码
2008/12/29 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
phalcon框架使用指南
2016/02/23 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python中的全局变量如何理解
2020/06/04 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
2014年三八妇女节活动方案
2014/02/28 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2016年感恩节寄语
2015/12/07 职场文书
七年级话题作文之执着
2019/11/19 职场文书
python装饰器代码解析
2022/03/23 Python