[代码收集]JQuery实现简单的焦点图效果(点击切换/自动播放) - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-01-22 23:18:10 -0500

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

请勿抄袭本页面

代码说明

可能实现这样的效果不需要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>

16639792.9.0.min.js (90.89 KiB) | Meta

代码演示

1
2
3
4
5

[代码仅供参考，转载请注明出处]

----Comments(1)----
小孩 (@luchaorong) | @ at 2014-02-03 06:06:
卟错卟错，那个1234是显示圆圆滴边框就好了

Subscribe | Register | Login | N