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 ...
随机推荐
- Java优化性能
尽量在合适的场合使用单例使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面:第一,控制资源的使用,通过线程同步来控制资源的并 ...
- 我的浏览器标签同步方案：坚果云+Floccus
前言 floccus github地址: https://github.com/marcelklehr/floccus Floccus插件是一款浏览器书签收藏同步插件,支持Chrome和Firefox ...
- Delphi如何获取一个字符串再另一个字符串中最后一次出现的位置
uses StrUtils; function ReversePos(SubStr, S: String): Integer; var i : Integer; begin i := Po ...
- windows更改文件打开方式
- mysql类型转换函数convert与cast的用法,及SQL server的区别
首先,convert函数 字符集转换 : CONVERT(xxx USING gb2312) 类型转换和SQL Server一样,不过类型参数上有不同: CAST(xxx AS 类型) ...
- c++ 兰姆达表达式
#include<iostream> using namespace std; int main() { int a = 1; int b = 2; aut ...
- 【NOI2011】兔农（循环节）
我居然没看题解瞎搞出来了? 题解: 不难想到找到每次减1的位置,然后减去它对最终答案的贡献. 假设有一个地方是\(x,1(mod~k)\) 那么减了1后就变成了\(x,0\). 然后可以推到\(x,0 ...
- AJAX(包括跨域)post请求封装
function ajaxPost(dataUrl, parameter, callback, bef_callback, com_callback, err_callback) { $.ajax({ ...
- BZOJ 3328: PYXFIB 解题报告
BZOJ 3328: PYXFIB 题意 给定\(n,p,k(1\le n\le 10^{18},1\le k\le 20000,1\le p\le 10^9,p \ is \ prime,k|(p- ...
- 暴力字符串hash——cf1200E
#include<bits/stdc++.h> using namespace std; #define ll long long #define N 1000005 #define mo ...