点击在新窗口中浏览此图片

网上也有不少类似代码,因为不太符合期望,所以自己写了个简单的。

主要期望:
1 自动切换
2 点击后重新计算自动切换行为

主要是弥补点击后可能刚好到了切换,自动到下一张的毛病。

简化的HTML代码:

<div id="cover_images">
    <div class="cover_show" cover="0"><a href="#"><img xx /></a></div>
    <div class="cover_hide" cover="1"><a href="#"><img xx /></a></div>
    <div class="cover_hide" cover="2"><a href="#"><img xx /></a></div>
    <p class="cover_btns">
      <a class="btn_cur" href="javascript:;" cover="0" onclick="show_cover(0);return false;"></a>
      <a class="btn_gray" href="javascript:;" cover="1" onclick="show_cover(1);return false;"></a>
      <a class="btn_gray" href="javascript:;" cover="2" onclick="show_cover(2);return false;"></a>
    </p>
</div>


简单的,用cover属性记录对应关系,用css类来处理显示和隐藏的问题
脚本代码:
<script>
cur_index = 0;
total_index = 3;
time_interval = 4000;
myInterval = setInterval(show_next, time_interval);
function show_cover(index){
  $.each($("#cover_images div"), function(i,val){
    if ($(val).attr('cover') == index ) {
      $(val).attr('class','cover_show');
    }else{
      $(val).attr('class','cover_hide');
    }
  });
  $.each($("p.cover_btns a"), function(i,val){
    if ($(val).attr('cover') == index ) {
      $(val).attr('class','btn_cur');
    }else{
      $(val).attr('class','btn_gray');
    }
  });
  cur_index = index;
  clearInterval(myInterval);
  myInterval = setInterval(show_next, time_interval);
}
function show_next(){
  cur_index ++;
  if (cur_index >= total_index) { cur_index = 0};
  show_cover(cur_index);
}
</script>


提供一个参考吧,没有切换效果
附带样式参考:
a.btn_cur{width: 23px;height: 29px;background: url('dot_c.png');display: inline-block;}
a.btn_gray{width: 23px;height: 29px;background: url('dot_g.png');display: inline-block;}
div.cover_show{display: block;}
div.cover_hide{display: none;}
p.cover_btns{text-align: center;display: block;}



原创内容如转载请注明:来自 阿权的书房
收藏本文到网摘
天津电动葫芦 Homepage
2013/11/06 12:23
切换效果不错的哦
分页: 1/1 第一页 1 最后页
发表评论
AD
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML 打开UBB 打开表情 隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写
 

阅读推荐

服务器相关推荐

开发相关推荐

应用软件推荐