jq-demo-轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
ul, li {list-style: none;}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
overflow: hidden;
border: 10px solid blue;
position: relative;
}
#list1 {
width: 3100px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
#list1 li, #list1 img {
width: 600px;
height: 300px;
}
#list1 li {
float: left;
}
#list2 {
width: 150px;
height: 20px;
position: absolute;
right: 30px;
bottom: 30px;
}
#list2 li {
width: 18px;
height: 18px;
border: 1px solid black;
background: yellow;
text-align: center;
line-height: 18px;
margin-left: 5px;
float: left;
cursor: pointer;
} #list2 li.active {
background: green;
} #prev, #next {
width: 50px;
height: 22px;
background: orange;
position: absolute;
top: 45%;
cursor: pointer;
}
#prev {
left: 10px;
}
#next {
right: 10px;
} </style>
<script src="js/jquery-1.12.3.js"></script>
<script>
$(function(){ //jq轮播图
var list1 = $("#list1");
var list2 = $("#list2");
var li1 = $("#list1 li");
var li2 = $("#list2 li"); //复制第一张图到最后
li1.first().clone(true).appendTo(list1); //
var size = $("#list1 li").size();
list1.width(600*size); //开启定时器
var i = 0;
var timer = setInterval(function(){
i++;
move();
}, 2000); function move(){
//上一页
if (i < 0) {
list1.css("left", -600*(size-1));
i = size-2;
}
//下一页
if (i >= size){
list1.css("left", 0);
i = 1;
} list1.stop().animate({left:-i*600}, 500); li2.eq(i).addClass("active").siblings().removeClass("active");
if (i == size-1) {
li2.eq(0).addClass("active").siblings().removeClass("active");
}
} //上一页
$("#prev").click(function(){
i--;
move();
}) //下一页
$("#next").click(function(){
i++;
move();
}) li2.mouseenter(function(){
i = $(this).index();
move();
}) $("#box").hover(function(){
clearInterval(timer);
},
function(){
timer = setInterval(function(){
i++;
move();
}, 2000);
}) })
</script>
</head>
<body>
<div id="box">
<ul id="list1">
<li><img src="data:images/b1.jpg" /></li>
<li><img src="data:images/b2.jpg" /></li>
<li><img src="data:images/b3.jpg" /></li>
<li><img src="data:images/b4.jpg" /></li>
</ul>
<ul id="list2">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="prev">上一页</div>
<div id="next">下一页</div>
</div>
</body>
</html>
clone(true) 方法 是复制一个元素及其所有事件， clone() 方法 是复制一个元素，不包含其所有事件。
jq透明度轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
ul, li {
list-style: none;
}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
border: 10px solid blue;
} #list1 {
width: 600px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
#list1 li, #list1 img {
width: 600px;
height: 300px;
}
#list1 li {
position: absolute;
left: 0;
top: 0;
} #list2 {
width: 600px;
height: 30px;
position: absolute;
left: 10%;
bottom: -60px;
}
#list2 li, #list2 img {
width: 120px;
height: 60px;
float: left;
border: 1px solid red;
margin-right: 5px;
cursor: pointer;
} #list2 li {
opacity: 0.3;
}
#list2 .active {
/*background: green;*/
opacity: 1;
} </style> <script src="js/jquery-1.12.3.js"></script>
<script>
$(function(){ var _ul1 = $("#list1");
var _ul2 = $("#list2");
var _li1 = $("#list1 li");
var _li2 = $("#list2 li"); //初始化显示第一张图
_li1.eq(0).show().siblings().hide(); //图片总数量
var size = $("#list1 li").size(); // //自动轮播
var i = 0; //记录图片下标
var timer = setInterval(function(){
i++;
move();
}, 2000); //移动的函数
function move(){ //如果i超出了图片总数量
if (i == size) {
i = 0; //即将移动到2张图
} //透明度切换到第i张图
_li1.eq(i).stop().fadeIn().siblings().stop().fadeOut(); //改变ul2的按钮状态
_li2.eq(i).removeClass().addClass("active").siblings().removeClass("active"); } //li2上面的按钮
_li2.hover(function(){
var index = $(this).index();
//console.log(index);
i = index;
move();
}) //移入box, 移出box
$("#box").hover(function(){
//移入, 关闭定时器
clearInterval(timer);
},
function(){
//移出, 重新开启定时器
timer = setInterval(function(){
i++;
move();
}, 2000);
}) })
</script> </head>
<body>
<div id="box">
<ul id="list1">
<li><img src="data:images/b1.jpg" /></li>
<li><img src="data:images/b2.jpg" /></li>
<li><img src="data:images/b3.jpg" /></li>
<li><img src="data:images/b4.jpg" /></li>
</ul>
<ul id="list2">
<li class="active"><img src="data:images/b1.jpg" /></li>
<li><img src="data:images/b2.jpg" /></li>
<li><img src="data:images/b3.jpg" /></li>
<li><img src="data:images/b4.jpg" /></li>
</ul> </div> </body>
</html>
ajax 获取数据的轮播图
lunbo.json
[
{
"id": 101,
"img": "images/b1.jpg"
},
{
"id": 102,
"img": "images/b2.jpg"
},
{
"id": 103,
"img": "images/b3.jpg"
} ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
ul, li {list-style: none;}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
overflow: hidden;
border: 10px solid blue;
position: relative;
}
#list1 {
width: 3100px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
#list1 li, #list1 img {
width: 600px;
height: 300px;
}
#list1 li {
float: left;
}
#list2 {
width: 150px;
height: 20px;
position: absolute;
right: 30px;
bottom: 30px;
}
#list2 li {
width: 18px;
height: 18px;
border: 1px solid black;
background: yellow;
text-align: center;
line-height: 18px;
margin-left: 5px;
float: left;
cursor: pointer;
} #list2 li.active {
background: green;
} #prev, #next {
width: 50px;
height: 22px;
background: orange;
position: absolute;
top: 45%;
cursor: pointer;
}
#prev {
left: 10px;
}
#next {
right: 10px;
} </style>
<script src="js/jquery-1.12.3.js"></script>
<script>
$(function(){ //通过Ajax获取数据
$.get("json/lunbo.json", function(data){
//console.log(data);
var arr = data; //遍历数组arr
for (var i=0; i<arr.length; i++) {
var obj = arr[i]; //每个图片的数据 //创建li节点
$("<li><img src="+ obj.img +" /></li>").appendTo("#list1");
if (i == 0){
$("<li class='active'>"+ (i+1) +"</li>").appendTo("#list2");
}
else {
$("<li>"+ (i+1) +"</li>").appendTo("#list2");
}
} //lunbo
lunbo(); }) //jq轮播图
function lunbo(){
var list1 = $("#list1");
var list2 = $("#list2");
var li1 = $("#list1 li");
var li2 = $("#list2 li"); //复制第一张图到最后
li1.first().clone(true).appendTo(list1); //
var size = $("#list1 li").size();
list1.width(600*size); //开启定时器
var i = 0;
var timer = setInterval(function(){
i++;
move();
}, 2000); function move(){ if (i < 0) {
list1.css("left", -600*(size-1));
i = size-2;
} if (i >= size){
list1.css("left", 0);
i = 1;
} list1.stop().animate({left:-i*600}, 500); li2.eq(i).addClass("active").siblings().removeClass("active");
if (i == size-1) {
li2.eq(0).addClass("active").siblings().removeClass("active");
}
} //上一页
$("#prev").click(function(){
i--;
move();
}) //下一页
$("#next").click(function(){
i++;
move();
}) li2.mouseenter(function(){
i = $(this).index();
move();
}) $("#box").hover(function(){
clearInterval(timer);
},
function(){
timer = setInterval(function(){
i++;
move();
}, 2000);
})
} })
</script>
</head>
<body>
<div id="box">
<ul id="list1">
<!--<li><img src="data:images/b1.jpg" /></li>
<li><img src="data:images/b2.jpg" /></li>
<li><img src="data:images/b3.jpg" /></li>
<li><img src="data:images/b4.jpg" /></li>-->
</ul>
<ul id="list2">
<!--<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>-->
</ul>
<div id="prev">上一页</div>
<div id="next">下一页</div>
</div>
</body>
</html>
jq-demo-轮播图的更多相关文章
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- JQ万能轮播图
lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jq龙禧轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- jq交叉轮播图变种【闪一下黑】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq版轮播图
html部分 <div class="banner"> <ul class="img"> <li><img src=& ...
- HTML+jq简单轮播图
.main{ width: 100%; min-width: 1100px; display: table; margin: 0 auto; text-align: ce ...
- iOS开发之 用第三方类库实现轮播图
在github上面有很多的第三方类库,大大节约了大家的开发时间 下载地址:https://github.com/gsdios/SDCycleScrollView 现已支持cocoapods导入:pod ...
随机推荐
- Codeforces 1111E DP + 树状数组 + LCA + dfs序
题意:给你一颗树,有q次询问,每次询问给你若干个点,这些点可以最多分出m组,每组要满足两个条件:1:每组至少一个点,2:组内的点不能是组内其它点的祖先,问这样的分组能有多少个? 思路:https:// ...
- mybatis group by查询返回map类型
故事的发生是这样的. . . . . . . 一天 我发现我们的页面显示了这样的汇总统计数据,看起来体验还不错哦-- 然后,我发现代码是这样滴:分开每个状态分别去查询数量. 额e,可是为嘛不使用简单便 ...
- Spring 整合 Redis(转)
转自http://blog.csdn.net/java2000_wl/article/details/8543203 pom构建: <modelVersion>4.0.0</mode ...
- 使用用Intellij Idea从Github上获取代码
1.打开File菜单,选择Setting,在Version Control下找到Github. 2.分别在Login与Password中输入自己在Github注册的用户名和密码,然后点击Test按钮: ...
- Read Committed
在Read Committed隔离级别下,一个事务可能会遇到不可重复读(Non Repeatable Read)的问题. 不可重复读是指,在一个事务内,多次读同一数据,在这个事务还没有结束时,如果另一 ...
- bzoj1072题解
[解题思路] 状压DP.f[i][j][k]表示当前DP到第i位,模d意义下余数为j,状态为k的方案数.其中状态k表示每个数字还剩多少个没取,状态数最多210. 于是有递推式转移方程:f[i+1][( ...
- lnmp mysql高负载优化
mysql负载会造成cpu占用高的问题如果没启用innodb的话 用这个配置/usr/local/mysql/share/mysql/my-large.cnf 替换/etc/my.cnf 也可参考如下 ...
- Ubuntu 16.04系统上修改Docker镜像的存储路径 (转)
转自:https://blog.csdn.net/qihongchao/article/details/80651492 dba专门挂了一个硬盘让我放项目(测试环境)因为系统空间比较小,希望把dock ...
- (3)Redis conifg
redis.windows-service.conf Redis-x64-3.2.100 # Redis configuration file example # Note on units ...
- Tomcat运行错误示例二
Tomcat运行错误示例二 当遇到这种错误时,一般是构建路径的问题,按步骤来就好.如图: 点击---->库---->Add Library---->下一步---->选择tomc ...