使用jQuery实现图片自动轮播

原创 2016年08月29日 19:23:18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
*{margin: 0;padding: 0;}
.clear:after{content: "";height: 0;clear: both;overflow: hidden;display: inline-block;}
.clear{*zoom: 1;}
.content{width: 400px;height: 210px;margin: 20px auto;overflow: hidden;position: relative;}
#div-box{width: 2400px;position: absolute;left: 0;top: 0;}
#div-box>img{width: 400px;height: 210px;float: left;}
#indictor{position: absolute;right: 0px;bottom: 5px;z-index: 1;}
#indictor>button{width: 30px;height: 20px;margin: 0 2px;background-color: #00f;color: #fff;border: none;}
#indictor .active{background-color: #f00;}



</style>
</head>
<body>
<div class="content">
<div id="div-box" class="clear">
<img src="images/1.jpg" alt=""><img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
</div>
<div id="indictor">
<button type="button" class="active">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
</div>
</div>

<script src="../lib/common.js" type="text/javascript"></script>
<script>
$(function(){
var index = 0;
function start_move(){
                $('button').eq(index).addClass('active').siblings().removeClass('active');
                $('div#div-box').css('left',-index*400 + 'px');
                index++;
                if(index == 6){index = 0;}
}
var $timer = setInterval(start_move,1000);
$('button').hover(function(e){
clearInterval($timer);
$(e.currentTarget).addClass('active').siblings().removeClass('active');
index = $(e.currentTarget).index();
$('div#div-box').css('left',-index*400 + 'px');


},function(){
$timer=setInterval(start_move,1000);
});
});
</script>
</body>

</html>


//以上内容配置好jQuery环境,再把图片路径改掉就可以正常实现该功能。当然以上内容仅供参考

版权声明:本文为博主原创文章,未经博主允许不得转载。

js实现图片自动轮播

今天有人问我这个问题,我就顺便把这个记下来,分享给大伙。 如图,就是图片自己轮播,并且图中中下方的白点也发生变化,图片到哪,白点就到哪,就直接上代码了 ...

jquery图片自动轮播效果

HTML代码如下:

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

1                2                3                4                5                     ...

jq实现图片轮播:圆形焦点+左右控制+自动轮播

html代码: 1: 2: 3: 4: 5: JQ图片轮播 6: 7:

jQuery之定时器及图片轮播实例

定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到clearInterval() 被调用或窗口...

jquery图片轮播,点击左右按钮轮播,可控制是否自动播放,是否循环轮播(自写)

图片轮播,可以点击左右按钮轮播,可以自动轮播,可控制是否循环轮播,可控制是否中间图片选中样式 html lang="zh-CN"> head> meta charset="UTF-8">...

jQuery实现简单图片的轮播(自右向左播放)

简单的轮播大概内容分为如下三点: 1.轮播图片的存储; 2.轮播的样式(注意:图片存储的总宽度,以及图片移动相对元素的定位的元素); 3.JQuery中的计时器调用动画移动图片轮播。 ...

jquery实现图片自动轮播

这是自己以前实现的功能,在此和大家一起分享,以后多写博客咯,方便与大家共享知识,也为了自己可以更好的记忆。 源代码: 前端练习 ...

jQuery实现序列号(序列点)型自动图片轮播

效果图: 完整代码如下: 序列号点击型的图片轮播 *{ margin:0;padding:0; } .container{ width:478px;he...

jQuery实现图片轮播特性。使用animate函数

图片轮播特效是一个非常常见的特性,可以使用jQuery来实现,下面使用animate()函数来实现向左轮播(向其他方向的轮播与其相似),实现的方法有两种,先看一下实现原理: 1、假设公五张图片,图片宽...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery实现图片自动轮播
举报原因:
原因补充:

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