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 ...
随机推荐
- 如何取消IDEA的自动删除行尾空格？
使用IDEA,添加注释的时候敲空格,总是会把行尾空格删除导致代码跑到注释行,很不爽~~ 取消这个不爽的功能:File--Settings--Editor--General--Other--Strip ...
- 使用Hystrix实现断路器处理
在之前的架构的基础上我们会发现,一旦级别低的服务宕了,会导致调用它的服务也挂掉,这样容易产生级联效应(雪崩效应),为了防止这种情况的出现,我引入了Hystrix来处理,先介绍ribbon使用Hystr ...
- POJ-1639 Picnic Planning 度数限制最小生成树
解法参考的论文:https://wenku.baidu.com/view/8abefb175f0e7cd1842536aa.html 觉得网上的代码好像都是用邻接矩阵来实现的,觉得可能数据量大了会比较 ...
- python使用xlrd读取excel数据
一.安装xlrd 库的安装我这里就不说了.. 二.读取 excel 前提条件:excel文件名称为 excel_data.xlsx 1.打开excelw 文件 workbook = xlrd.open ...
- python自动化测试-使用第三方python库技术实现
转载自https://www.cnblogs.com/beer/p/5418471.html
- 【Dart学习】-- Dart之异常处理
概述: Dart2的异常与Java是非常类似的.Dart2的异常是Exception或者Error(包括它们的子类)的类型,甚至可以是非Exception或者Error类,也可以抛出,但是不建议这么使 ...
- SCP-bzoj-1078
项目编号:bzoj-1078 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 斜堆有一个著名的性质:如果一个节点没有左子树,则它一定没有右子树,这也是它“斜堆”名称的由来. 此题通过给出斜堆来 ...
- git stash 保存和恢复进度
1. stash当前修改 git stash会把所有未提交的修改(包括暂存的和非暂存的)都保存起来,用于后续恢复当前工作目录. 比如下面的中间状态,通过git stash命令推送一个新的储藏,当前的工 ...
- host文件是作用
什么是HOST文件:Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Host ...
- Linux串口驱动程序(3)-打开设备
先来分析一下串口打开的过程: 1.用户调用open函数打开串口设备文件:2.在内核中通过tty子系统,把open操作层层传递到串口驱动程序中:3.在串口驱动程序中的xx_open最终实现这个操作.这里 ...