jq实现自动轮播图效果

自动轮播图思路:

    1、设置定时器和自动切换函数,设置底部button的索引值。

    2、点击左右箭头时,定时器清除,手动切换图片。当离开时,自动播放

    3、点击底部button的时候,定时器清除,手动切换图片。当离开时,自动播放

<div id="container">
            <a class="item" href="#"><img src="images/banner1.png"/></a>
            <a class="item" href="#"><img src="images/banner2.jpg"/></a>
            <a class="item" href="#"><img src="images/banner3.jpg"/></a>
            <a class="item" href="#"><img src="images/banner4.jpg"/></a>
            <a class="item" href="#"><img src="images/banner5.jpg"/></a>
       
            <div class="btn prev"><</div>
            <div class="btn next">></div>
       
            <ul id="tabs">
              <li class="tab active"></li>
              <li class="tab"></li>
              <li class="tab"></li>
              <li class="tab"></li>
              <li class="tab"></li>
            </ul>
</div>
#container{
	width:1226px;
	height:460px;
	position:relative;
	overflow:hidden;
	border-radius:10px;
}
.item{
	position:absolute;
}

#tabs{
	position:absolute;
	right:30px;
	bottom:20px;
}
.tab{
	float:left;
	margin-right:10px;
	width:6px;
	height:6px;
	border:3px solid rgba(184,178,182,.8);
	border-radius:50%;
	background:#989196;
	cursor:pointer;
}
.active{
	background:#fff;
	border-color:#999497;
}
.btn{
	position:absolute;
	top:50%;
	margin-top:-35px;
	width:40px;
	height:70px;
	color:#d6d3d5;
	font-size:36px;
	line-height:70px;
	text-align:center;
	cursor:pointer;
}
.btn:hover{
	background:rgba(127,120,125,0.8);
}
.prev{
	position:absolute;
	left:235px;
	border-radius:0 5px 5px 0;	
}
.next{
	position:absolute;
	right:0;
	border-radius:5px 0 0 5px;
}
$(document).ready(function(){
   var i = 0 ;
   var timer;

  //用jquery方法设置第一张图片显示,其余隐藏
  $('.item').eq(0).show().siblings('.item').hide();
   
  //调用showTime()函数(轮播函数)
  showTime();
   
  //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
  $('.tab').hover(function(){
    //获取当前i的值,并显示,同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });
   
  //鼠标点击左侧的箭头
  $('.prev').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
   
  //鼠标点击右侧的箭头
  $('.next').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });

   
//创建一个showTime函数
function showTime(){
  //定时器
  timer = setInterval(function(){
    //调用一个Show()函数
    Show();
    i++;
    //当图片是最后一张的后面时,设置图片为第一张
    if(i==5){
      i=0;
    }
  },2000);
}
 
 
//创建一个Show函数
function Show(){
  //在这里可以用其他jquery的动画
  $('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300);
   
  //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
  $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
   
}
  
});
 



阅读更多
上一篇AMD、CMD、CommonJS和ES6对比
下一篇jq中的extend()方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭