jq实现自动轮播图效果

原创 2018年04月15日 10:55:06

自动轮播图思路:

    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');
   
}
  
});
 



jquery 实现淡入淡出图片轮播效果

1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) ...
  • u013993319
  • u013993319
  • 2016-07-13 15:23:47
  • 7476

使用jQuery实现图片自动轮播

*{margin: 0;padding: 0;} .clear:after{content: "";height: 0;clear: both;overflow: hidden;display: in...
  • zi__kang
  • zi__kang
  • 2016-08-29 19:23:18
  • 2247

HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告,简单好用,加上效果也很好看。 实现的效果: 5张图片每两秒轮播一次,右下角的数字随图片而变换,鼠标放在数字上图片停止,移走鼠标继续播放。 ...
  • as00v1
  • as00v1
  • 2016-08-05 17:05:26
  • 8600

jquery自动无缝轮播代码

jquery自动无缝轮播代码 css样式 body里的布局 jquery的代码 1. css样式*{margin:0px auto;padding:0px;} ul{list-style: none;...
  • wangbei85
  • wangbei85
  • 2016-10-16 18:12:57
  • 1131

jQuery+CSS3实现图片的无缝轮播

今天萌生了一个写博客的想法,主要是想对一段时间所学的东西进行总结,加深印象,也方便自己日后查看。。。。    在实现前要弄明白的知识点:    一、Css的一些属性       1. posit...
  • u012983064
  • u012983064
  • 2016-04-20 21:45:28
  • 1197

css+jquery实现简单轮播图效果html代码

  • 2017年04月16日 12:48
  • 2KB
  • 下载

自己写的淡入淡出轮播图基本实现(jq)

Document body { padding: 0; margin: 0; } ...
  • sqfbeijing
  • sqfbeijing
  • 2015-09-17 17:08:22
  • 1411

jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。相信很多同学都在各种类型的网站上看过花样百出的轮播效果图,不少同学也想尝试下自己做出来一个,但...
  • dreamsunday
  • dreamsunday
  • 2014-04-21 09:53:24
  • 15093

jquery图片自动轮播效果

HTML代码如下:
  • gxfdgz_szj
  • gxfdgz_szj
  • 2015-03-17 11:20:21
  • 3186

JQ 封装一个自动轮播图的方法

1                2                3                4                5                     ...
  • FireBird_one
  • FireBird_one
  • 2017-02-27 16:25:30
  • 1117
收藏助手
不良信息举报
您举报文章:jq实现自动轮播图效果
举报原因:
原因补充:

(最多只允许输入30个字)