jQ版大图滚动
<!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版大图滚动的更多相关文章
- 一个jQ版大图滚动
难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...
- 微博发布效果jq版
大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 轮播图js版&jQ版
JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...
- JQ封装切换滚动功能
/*---------控制滚动图片v1(作者:SFLYQ)-----------Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)DoIni 初始化操作(初始化元 ...
- jquery版楼层滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...
- jq 版的tab切换
ta切换是在前端中非常常见的一种效果,网上的效果很多.但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用. var tabs = function (tab, c ...
- PC版模块滚动不显示滚动条效果
以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- python脚本1_给一个半径求圆的面积和周长
#给一个半径,求圆的面积和周长,圆周率3.14 r = int(input('r=')) print('area='+str(3.14*r*r)) print('circumference='+str ...
- 【spark】持久化
Spark RDD 是惰性求值的. 如果简单地对RDD 调用行动操作,Spark 每次都会重算RDD 以及它的所有依赖.这在迭代算法中消耗格外大. 换句话来说就是 当DAG图遇到转化操作的时候是不求值 ...
- 【51nod-1596】搬货物
现在有n个货物,第i个货物的重量是 2wi .每次搬的时候要求货物重量的总和是一个2的幂.问最少要搬几次能把所有的货物搬完. 样例解释: 1,1,2作为一组. 3,3作为一组. Input 单组测试数 ...
- 条款1：将c++视作一个语言联邦
c++是一个多重泛型编程语言,其所支持的泛型有: 面向过程编程(procedual) 面向对象编程(object-oriented) 面向函数编程(functional) 泛型编程(generic) ...
- 软工作业-wc（Python实现）
GitHub地址:GitHub PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 30 40 · Esti ...
- HAWQ取代传统数仓实践（十四）——事实表技术之累积快照
一.累积快照简介 累积快照事实表用于定义业务过程开始.结束以及期间的可区分的里程碑事件.通常在此类事实表中针对过程中的关键步骤都包含日期外键,并包含每个步骤的度量,这些度量的产生一般都会滞后于数据行的 ...
- HAWQ取代传统数仓实践（九）——维度表技术之退化维度
退化维度技术减少维度的数量,简化维度数据仓库模式.简单的模式比复杂的更容易理解,也有更好的查询性能. 有时,维度表中除了业务主键外没有其它内容.例如,在本销售订单示例中,订单维度表除了订 ...
- header("Location:http://www.baidu.com");
php 中的跳转函数 header("Location:http://www.baidu.com"); 但是一定要放在文件的开头 不允许有任何输出. 否则在之前添加 ob_s ...
- MS SQL Server2000转换成MySQL
按计划今天着手进行将后台数据库从MS SQL Server2000转换成MySQL5.1.3.目的是便于发布软件的测试版本. 1. 驱动: mysql-connector-odbc-5.1.11-wi ...
- Spring中的c3p0配置
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/51162560 今天,我们就来详细谈谈Spring中的c3p0配置问题,好了,不耽搁 ...