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

前端技术 2023/09/01 JavaScript

效果如下：

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图片切换效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/1691

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案