安徽15选5开奖:jQuery简单的图片切换效果 Simple slideshow

作者:网络 来源:佚名 更新时间:2010-12-25 17:12:29 点击:

安徽25选5直播 www.by7yj.cn

 

  • Show only the first image and hide the others;
  • Place a “current” class on the list-item;
  • Only exucute the function once when it has a current status.

That’s it? Yep… it’s that simple!

jQuery code

 

$(function() {
   var imgWrapper = $('.slideshow > img');
   // only show the first image, hide the rest
   imgWrapper.hide().filter(':first').show();
   
   $('ul.recentlist li a').click(function () {
   
    // check if this item doesn't have class "current"
    // if it has class "current" it must not execute the script again
    if (this.className.indexOf('current') == -1){
     imgWrapper.hide();
     imgWrapper.filter(this.hash).fadeIn(500);
     $('ul.recentlist li a').removeClass('current');
     $(this).addClass('current');
    }
    return false;
   });
  });

 

We are making sure that when a list-item has the “current” class, the script won’t be executed again.

CSS code

 

.slideshow { 
  position: relative; 
  background: #fafafa; 
  width: 403px; 
  height: 240px; 
  border: 1px solid #e5e5e5; 
  margin-bottom: 20px; 
  }
  
  .slideshow img { 
  position: absolute; 
  top: 3px; 
  left: 3px; 
  z-index: 10; 
  background: #fff; 
  }
  
  ul.recentlist { 
  position: absolute; 
  bottom: 12px; 
  right: 4px; 
  list-style: none; 
  z-index: 20; 
  }
  
  ul.recentlist li { display: inline; }
  
  ul.recentlist li a, ul.recentlist li a:visited { 
  display: block; 
  float: left; 
  background: #e5e5e5; 
  padding: 4px 8px; 
  margin-right: 1px; 
  color: #000; 
  text-decoration: none; 
  cursor: pointer; 
  }
  
  ul.recentlist li a:hover, ul.recentlist li a:visited:hover { 
  background: #666; color: #fff; 
  }
  
  ul.recentlist li a.current { 
  background: #f00; 
  color: #fff; 
  }

 

In this example the unordered list is absolute, that way you can easily position the list-items above the images.

HTML code

 

<div class="slideshow">
   <ul class="recentlist">
    <li><a class="current" href="#slide1">1</a></li>

    <li><a href="#slide2">2</a></li>
    <li><a href="#slide3">3</a></li>
   </ul>

   <img id="slide1" src="slide-1.gif" alt="Image 1 slideshow" />
   <img id="slide2" src="slide-2.gif" alt="Image 2 slideshow" />
   <img id="slide3" src="slide-3.gif" alt="Image 3 slideshow" />
  </div
  

 

  • 紫光阁中共中央国家机关工作委员会 2019-02-20
  • 凤凰网之夜X戛纳电影节-群星闪耀版 2019-02-19
  • 办婚礼、不打烊 新招频出能否让实体书店“回暖”? 2019-02-19
  • 【视频】致敬父亲节—父爱如山 一路相伴 2019-02-19
  • 孙东生会见俄罗斯代表团 2019-02-18
  • 江西日报社社长王晖祝贺人民日报创刊70周年 2019-02-18
  • 女排小鬼当家大逆转德国队 安家杰带队三人发挥惊艳 2019-02-18
  • 第531期:大豆异黄酮对人体有5大好处 什么食物含量多? 2019-02-18
  • 烽火中国—光明日报、光明网纪念抗战胜利70周年特别策划 2019-02-17
  • 世卫将“游戏障碍”列为新疾病 哪些症状可被确诊? 2019-02-17
  • 全媒体传播:半岛都市报融合转型的关键词 2019-02-17
  • 瞩望上海合作组织青岛之约(钟声) 2019-02-16
  • 郑州市中医院院长、党委副书记刘宝琴被查 2019-02-16
  • 抗战期间陕甘宁边区的人口 2019-02-15
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-02-15
  • 475| 228| 60| 859| 491| 194| 996| 681| 175| 418|