JQuery实现简单的焦点图效果(点击切换/自动播放)

2013-08-18 06:27:02 -0400

此代码仅供参考

代码说明

可能实现这样的效果不需要jQ就行，不过觉得jquery不光能实现焦点图，它能实现一些纯JS无法超越的效果，所以还是要选择jQuery。

html代码

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<style>
.focusWrap *{margin:0;padding:0;}
li,ul{ list-style:none;}
img{ border:none;}
.focusWrap{ width:100%; height:270px; position:relative; overflow:hidden;}
.focusBox{height:270px;position:absolute; left:0;top:0;}
.itemBox{ width:100%; height:270px; float:left; overflow:hidden; text-align:center; font-size:24px;}
.itemBox img{width:100%;height:270px;}
.focusTab{ position:absolute; bottom:0px; text-align:right; right:1px; height:20px; width:100%;}
.focusTab li{ display:inline-block; width:20px; height:20px; margin-right:4px; background:#F60; color:#fff; text-align:center; cursor:pointer;}
.focusTab li.active{ font-weight:bold; border:solid 1px #F60; color:#F60; background:#fff; height:18px; width:18px;}
</style>
<div class="focusWrap">
    <div class="focusBox">
            <div class="itemBox"><img src="http://www.webdm.cn/images/wall2.jpg"></div>
            <div class="itemBox"><img src="http://www.webdm.cn/images/wall1.jpg"></div>
            <div class="itemBox"><img src="http://www.webdm.cn/images/wall3.jpg"></div>
            <div class="itemBox"><img src="http://www.webdm.cn/images/wall6.jpg"></div>
            <div class="itemBox"><img src="http://www.webdm.cn/images/wall5.jpg"></div>
    </div>
    <div class="focusTab">
        <ul><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
    </div>
</div>
<script>
$(function(){
    var curIndex=0;
 var maxIndex=5;
    //图片点击切换函数;
 function tabChange(index) {
  
   $(".focusTab  li").removeClass("active").eq(index).addClass("active");
   $(".itemBox").hide().eq(index).show();
   }; 
   //重置索引；
 function resetIndex(){
   curIndex=0; 
    }
 
 //自动播放；
 function autoPlay(){
  timeInterval=setInterval (function(){
  curIndex+=1;
  if(curIndex>maxIndex-1)
  {
      resetIndex();
     };
  tabChange(curIndex);
    },1000);
//图片自动播放的间隔时间
 }
  autoPlay();
 
 //鼠标进入焦点时停自动播放，鼠标离开时继续自动播放；
 $(".focusTab li, .itemBox").mouseover(function(ev){
  stopAutoPlay()             
 }).mouseout(function(ev){
    autoPlay();
 });
 
 //停止自动播放；
 function stopAutoPlay(){
  if(timeInterval)
  {
    clearInterval(timeInterval); 
  }
 }
 
 //遍历focusTab li，调用图片点击切换函数，实现切换效果;
 $(".focusTab li").each(function(index){
  $(this).click(function(){
   tabChange(index); 
   curIndex=index;
     });       
 });
 
 
})
</script>

jquery-1.9.0.min.js (90.89 KiB) | Meta

代码演示

1
2
3
4
5

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N