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 ...
随机推荐
- JS综合面试题1
function foo(){ getName = function () { alert(1); }; return this; } Foo.getName = function(){ alert( ...
- AMS5601的ardunio和STM32驱动开发
AMS5601的ardunio和STM32驱动开发 本文有麦粒电子撰写,并提供相应产品服务. 前言 目前ams关于磁编码芯片用的比较多的可能是ams5600,能够输出pwm信号,电压信号以及I2C通信 ...
- KiCAD绘制器件内部逻辑符号库
KiCAD绘制器件内部逻辑符号库 像比较器,运放这些器件,里面是由多个相同的part组成,有时候我们只需要用到其中一个或者某几个,又或者是为了在原理图中更清楚的表达出逻辑关系,需要单独绘制内部的逻辑符 ...
- STL_map
map<string,int> m; int main() { m[; cout<<m["]<<endl; ; }
- PHP-移除元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- php-数据库-分页类-上传类
config.ini.php <?php header("content-type:text/html;charset=utf-8"); //项目的根目录 define(&q ...
- Android中的RelativeLayout中组件的排放问题
今天想仿照新浪微博的用户中心 主要就是那个头像的问题,这个看到就想到用相对布局,现在是我想把那个名称放到头像的上面去xml中定义如下: <RelativeLayout android:layou ...
- 拆边+BFS队列骚操作——cf1209F
这个拆边+队列操作实在是太秒了 队列头结点存的是一个存点集的vector,1到这个点集经过的路径权值是一样的,所以向下一层拓展时,先依次走一遍每个点的0边,再走1边...以此类推,能保证最后走出来的路 ...
- 经典sql题练习50题
-- 1.查询"01"课程比"02"课程成绩高的学生的信息及课程分数 select a.* ,b.s_score as 01_score,c.s_score a ...
- webstorm使用说明
1.移动光标到的代码块的结尾处(开始处 [ ) ctrl+] 2.移动光标到的代码块的结尾处并选择 ctrl+shift+] 3.ctrl + b: 跳到变量申明处 4.多光标输入: ...