【jQuery Demo】图片切换效果整理

简介:

图片的切换效果有很多,比较常见的有水平滚动、垂直滚动、淡入淡出等。我们接下来一一实现这些效果。

 

1.水平滚动

1) 我们先来实现HTML页面,代码很简单:

复制代码
<div id="container">
    <ul class="slider">
        <li><img src="../imgs/Girls/04.png"/></li>
        <li><img src="../imgs/Girls/05.jpg"/></li>
        <li><img src="../imgs/Girls/14.jpg"/></li>
        <li><img src="../imgs/Girls/17.jpg"/></li>
        <li><img src="../imgs/Girls/20.jpg"/></li>
    </ul>
    <ul class="thumb">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
复制代码

2)然后我们设置下CSS:

复制代码
/**   CSS Reset  **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp { font-family: couriernew, courier, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
/*   container  */
#container { width: 320px; height: 456px; overflow: hidden; position: relative; margin: 20px auto; }
.slider { position: absolute; }
.slider img { width: 320px; display: block; }
.thumb { position: absolute; bottom: 5px; right: 5px; }
.thumb li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-size: 12px; font-family: Arial; margin: 3px 1px; border: 1px solid #FF7300; background: #fff; cursor: pointer; }
.thumb li:hover,.thumb li.selected { color: #fff; line-height: 16px; width: 16px; height: 16px; font-size: 16px; background: #EF7300; font-weight: bold; }
复制代码

目前的显示效果如下:

3)接下来,我们需要点击实现图片的切换,下面是实现水平滚动效果的jQuery插件:

复制代码
;(function ($) {
   $.fn.extend({
       scrollHorizontal:function () {
           var imgCount = $(".slider li").length;
           var imgWidth = $(".slider li").eq(0).width();
           $(".thumb li").eq(0).addClass("selected");
           for (var i=0;i<imgCount;i++){
               $(".slider li").eq(i).css({
                   "left":i*imgWidth+"px",
                   "position":"absolute"
               });
           }
           // 初始化
          $(".thumb li").click(function () {
              var theIndex = $(this).index();
              var nowIndex = $(".selected").index();
              var leftWidth = imgWidth*(nowIndex-theIndex);
              $(".thumb li").removeClass("selected");
              $(".thumb li").eq(theIndex).addClass("selected");
              $(".slider li").animate({left:"+="+leftWidth });
          });
       }
   });
})(jQuery);
复制代码

4)最后,我们在HTML页面调用这个插件:

<script>
    $(document).ready(function () {
        $("#container").scrollHorizontal();
    })
</script>

5)这样效果就出来了:

 

2.垂直滚动

上面实现了水平滚动,那垂直滚动就简单了。通过获取图片的高度,然后控制 top 的值就可以了。新建的jQuery插件如下:

复制代码
;(function ($) {
   $.fn.extend({
       scrollVertical:function () {
           var imgCount = $(".slider li").length;
           var imgHeight = $(".slider li").eq(0).height();
           $(".thumb li").eq(0).addClass("selected");
           for (var i=0;i<imgCount;i++){
               $(".slider li").eq(i).css({
                   "top":i*imgHeight+"px",
                   "position":"absolute"
               });
           }
           // 初始化
           $(".thumb li").click(function () {
               var theIndex = $(this).index();
               var nowIndex = $(".selected").index();
               var topHeight = imgHeight*(nowIndex-theIndex);
               $(".thumb li").removeClass("selected");
               $(".thumb li").eq(theIndex).addClass("selected");
               $(".slider li").animate({top:"+="+topHeight });
           });
       }
   });
})(jQuery);
复制代码

然后调用这个插件就可以了:

<script>
    $(document).ready(function () {
        $("#container").scrollVertical();
    })
</script>

效果如下:

 

3.淡入淡出

同样淡入淡出也就很好实现了:

复制代码
;(function ($) {
   $.fn.extend({
       fadeInOut:function () {
           var imgCount = $(".slider li").length;
           var imgHeight = $(".slider li").eq(0).height();
           $(".thumb li").eq(0).addClass("selected");
           for (var i=1;i<imgCount;i++){
               $(".slider li").eq(i).css({
                   "display":"none"
               });
           }
           $(".thumb li").click(function () {
               var theIndex = $(this).index();
               var nowIndex = $(".selected").index();
               $(".thumb li").removeClass("selected");
               $(".thumb li").eq(theIndex).addClass("selected");
               $(".slider li").eq(nowIndex).fadeOut();
               $(".slider li").eq(theIndex).fadeIn();
           });
       }
   });
})(jQuery);
复制代码

效果如下:






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/6639011.html,如需转载请自行联系原作者
目录
相关文章
|
17天前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
129 67
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
5月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
94 1
|
4月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
5月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
5月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
62 0
|
11月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
93 0
jQuery点击图片来回切换功能
|
11月前
|
JavaScript 前端开发 数据处理
jQuery数据结构渲染(1):图片数组的渲染
jQuery数据结构渲染(1):图片数组的渲染
64 1