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 ...
随机推荐
- AD库转换为KiCAD库的方法
AD库转换为KiCAD库的方法 参照博主另外一篇文档: AD转换为KiCAD的方法,点击此处
- MySQL 复制参数详解
log-bin 二进制日志 server-id 早起版本必须添加 1-pow(2,32)-1 推荐使用 端口号+ip最后一位 5.6后可以动态修改 server-uuid (5.6以后) 默认存在 ...
- 让APK只包含指定的ABI（转）
转自:http://blog.csdn.net/justfwd/article/details/49308199 现在很多android第三方 sdk是以aar形式提供的,甚至是远程aar,如果这个s ...
- _declspec(dllexport)和.def(转)
节选自:windows下编译和使用动态库dll http://blog.eonew.cn/archives/865 Microsoft 在 Visual C++ 的 16 位编译器版本中引入了 __e ...
- react-native run-android出现红屏错误
react-native run-android出现 unable to load script from assets 'index.android.bundle'.Make sure your b ...
- Centos7命令行安装Tomcat以及配置防火墙开放端口
[转载]Centos 7 yum安装tomcat 命令: 系统环境CentOS Linux release 7.2.1511 (Core) 一.搭建准备:1.先到tomcat官网https://tom ...
- pip install RISE报错解决
ERROR: Cannot uninstall 'tornado' ERROR: Cannot uninstall 'tornado'. It is a distutils installed pro ...
- Ansible自动化部署K8S集群
Ansible自动化部署K8S集群 1.1 Ansible介绍 Ansible是一种IT自动化工具.它可以配置系统,部署软件以及协调更高级的IT任务,例如持续部署,滚动更新.Ansible适用于管理企 ...
- C判断语句
C 判断 判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). C 语言把任何非零和非空的值假定为 true,把零或 null ...
- MyEclipse6.0中使用aptana插件，添加jquery提示功能
MyEclipse6.0中使用aptana插件,添加jquery提示功能 第一:查看当前MyEclipse集成的eclipse的版本,, 查看路径 D:/MyEclipse 6.0/eclips ...