<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>jQ版大图滚动</title>

<style>

*{margin: 0; padding: 0; list-style: none; -webkit-user-select: none;}

/*-webkit-user-select: none;取消频繁点击下，文字和图片选中态，每个浏览器有不同的写法，这里只举例了谷歌*/

.btn_mod,.img_mod{width: 400px; margin: 20px auto 0; overflow: hidden;}

.img_mod,.img_mod img{height: 400px;}

.img_mod{position: relative;}

.img_mod .scroll{position: absolute; left: 0; top: 0;}

.img_mod .scroll img{float: left; width: 400px; height: 400px;}

.btn_mod{padding-left: 10px;}

.btn_mod li,.btn_mod div{float: left; width: 60px; height: 30px; line-height: 30px; text-align: center; color: #666; background: #ccc; cursor: pointer; font-size: 14px; margin-right: 6px;}

.btn_mod .active{background: #999;}

</style>

</head>

<body>

<div class="btn_mod">

<div class="prev">上一页</div>

<ul class="btn_list">

<li class="active">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<div class="next">下一页</div>

</div>

<div class="img_mod">

<div class="scroll" style="width: 9999px;">

<img src="img/img01.jpg"/>

<img src="img/img02.jpg"/>

<img src="img/img03.jpg"/>

<img src="img/img04.jpg"/>

<img src="img/img01.jpg"/>

</div>

</div>

</body>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

var btns = $(".btn_list li");//数字按钮

var prevBtn = $(".prev");//上一页按钮

var nextBtn = $(".next");//下一页按钮

var scroll = $(".scroll");//滚动对象

var imgs = $(".scroll img");//图片

var width = $(".img_mod img:eq(0)").width();//图片宽度

var index = 0;//初始下标

var imgLength = imgs.length - 1;//最后一张图的下标

var lock = false;//锁，防止频繁操作发生错乱

//下一张按钮的点击事件

nextBtn.click(function(){

clearInterval(timer);

aa();

if (lock) {

return;

}

lock = true;

var left = parseInt(scroll.position().left);

//在原本最后一张图和结尾重复的第一张图之间时

if (left <= -(imgLength-1)*width && left > -imgLength*width) {

index = 0;

scroll.animate({

left : -imgLength*width

})

} else if(left <= -imgLength*width){//滚到结尾重复的第一张图时

//由于结尾重复的第一张图已经出现过，所以从第二张图开始继续新一轮滚动

index = 1;

scroll.css("left", 0);

scroll.animate({

left : -width

})

} else{

index++;

//边界值判断

index = index > imgLength ? imgLength - 1:index;

scroll.animate({

left : -index*width

})

}

//数字选中态

btns.eq(index).addClass("active").siblings().removeClass("active");

setTimeout(function(){

lock = false;

},500);

});

//上一张按钮的点击事件

prevBtn.click(function(){

clearInterval(timer);

aa();

if (lock) {

return;

}

lock = true;

var left = parseInt(scroll.position().left);

//在第一张图和第二张之间

if (left > -width && left <= 0) {

//index等于原本最后一张图的坐标

index = imgLength - 1;

//从重复的第一张滚到原本最后一张

scroll.css("left", -imgLength*width);

scroll.animate({

left : -index*width

});

} else{

index--;

//边界值判断

index = index < 0 ? 0:index;

scroll.animate({

left : -index*width

})

}

//数字选中态

btns.eq(index).addClass("active").siblings().removeClass("active");

setTimeout(function(){

lock = false;

},500);

});

//数字的点击事件

btns.click(function(){

clearInterval(timer);

aa();

index = $(this).index();

btns.eq(index).addClass("active").siblings().removeClass("active");

scroll.animate({

left : -index*width

})

});

var timer;

function aa(){

//自动轮播

timer = setInterval(function(){

index++;

if (index == imgLength) {

index = 0;

}

scroll.animate({

left : -index*width

})

btns.eq(index).addClass("active").siblings().removeClass("active");

},2000);

}

aa();

</script>

</html>

jQ版大图滚动的更多相关文章

  1. 一个jQ版大图滚动

    难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...

  2. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  3. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  4. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  5. JQ封装切换滚动功能

    /*---------控制滚动图片v1(作者:SFLYQ)-----------Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)DoIni 初始化操作(初始化元 ...

  6. jquery版楼层滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...

  7. jq 版的tab切换

    ta切换是在前端中非常常见的一种效果,网上的效果很多.但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用. var tabs = function (tab, c ...

  8. PC版模块滚动不显示滚动条效果

    以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...

  9. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 分分享知识-快乐自己： @Component注解的使用

    @controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层 @service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理 @repositor ...

  2. 在js中，ajax放在for中，ajax获取得到的变量有误

    先看代码 for(var i=0;i<tds.length;i++){ mui.ajax(url+'api/client/gifts/isSigned', {data :{ sqId:" ...

  3. LCS 的 NlogN作法

    这个算法其实是因为LIS有NlogN的作法,把LCS转化为了LIS来做. 对于序列A{},B{},我们可以记录下来B中的每个元素在A中出现的位置,按顺序保存在一个新序列当中, 如果有多个位置按倒序写, ...

  4. CSS如何设置字体的类型、大小、颜色

    设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. < ...

  5. fastjson缺陷--map转换json时出现$ref的情况

    DisableCircularReferenceDetect来禁止循环引用检测: JSON.toJSONString(..., SerializerFeature.DisableCircularRef ...

  6. LeetCode OJ：Pascal's Triangle（帕斯卡三角）

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...

  7. SpringMVC札集(02)——SpringMVC入门完整详细示例(下)

    自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...

  8. Android 进阶16：IntentService 使用及源码解析

    It's time to start living the life you've only imagined. 读完本文你将了解: IntentService 简介 IntentService 源码 ...

  9. 【Java】Java学习笔记

    教程 计算机所有的数据信息都是由二进制的0,1组成的,B(Byte)就是字节,1B＝8bit(位),2的10次幂是1024,我们所说的硬盘容量是40GB.80GB.160GB,这里的B指是的Byte也 ...

  10. 剑指Offer面试题：12.链表的倒数第K个结点

    一 题目:链表的倒数第K个结点 题目:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾结点是倒数第1个结点.例如一个链表有6个结点,从头结点开始它们的值依 ...