jquery图片轮播,三种方式
2016-01-20 15:09
651 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://7xptn0.com1.z0.glb.clouddn.com/tuchjquery-1.9.1.min.js"></script>
</head>
<body>
<style>
*{margin:0;padding:0;list-style: none;}
/*轮播1*/
.tclb1{width:1000px;height:600px;margin:50px auto;position:relative;}
.tclb1 img{position:absolute;width:1000px;z-index: 99;height:600px;opacity: 0;}
.tclb1 ul{;height: 20px;position: absolute;z-index: 888;bottom:5px;left:50%;}
.tclb1 ul li{width:15px;height:15px;float:left;font-size: 12px;color:white;line-height: 15px;text-align: center;border-radius: 25px; border:1px solid gray;margin-left:5px;}
.tclb1 ul li.on{color:black;box-shadow: 0px 0px 10px green inset;}
/*轮播1*/
/*轮播2*/
.tclb{width:1000px;height:600px;margin:50px auto;position:relative;overflow: hidden;}
.tclb2{height:600px;position: relative;z-index: 88;}
.tclb2 a{display: block;float: left;}
.tclb2 img{position:relative;width:1000px;height:600px;}
.tclb ul{;height: 20px;position: absolute;z-index: 888;bottom:5px;left:50%;}
.tclb ul li{width:15px;height:15px;float:left;font-size: 12px;color:white;line-height: 15px;text-align: center;border-radius: 25px; border:1px solid gray;margin-left:5px;}
.tclb ul li.on{color:black;box-shadow: 0px 0px 10px green inset;}
/*轮播2*/
/*轮播3*/
.tclb3{width:1000px;height:600px;margin:50px auto;position:relative;overflow: hidden;}
.tclb3 a{display: block;}
.tclb3 img{position:absolute;width:0px;z-index: 99;height:600px;}
.tclb3 img:nth-child(1){width:1000px;}
.tclb3 ul{;height: 20px;position: absolute;z-index: 888;bottom:5px;left:50%;}
.tclb3 ul li{width:15px;height:15px;float:left;font-size: 12px;color:white;line-height: 15px;text-align: center;border-radius: 25px; border:1px solid gray;margin-left:5px;}
.tclb3 ul li.on{color:black;box-shadow: 0px 0px 10px green inset;}
/*轮播3*/
</style>
<script>
/*轮播1*/
(function(){
$(function(){
var set;
var imgnum=$(".tclb1 img").length;
function createBtn(imgnum){
var ul=$("<ul></ul>");
for(var i=0;i<imgnum;i++){
this.add=function(){
ul.append("<li>"+(i+1)+"</li>");
}
add();
}
$(".tclb1").append(ul);
}
function init(){
createBtn(imgnum);
$(".tclb1 ul li:first").addClass("on");
$(".tclb1 img:first").css("opacity","1");
lunbo();
}
function picChange(last,next){
$(".tclb1 img:eq("+last+")").animate({
"opacity":"0"
},1000);
$(".tclb1 img:eq("+next+")").animate({
"opacity":"1"
},1000);
$(".tclb1 ul li:eq("+last+")").removeClass("on");
$(".tclb1 ul li:eq("+next+")").addClass("on");
}
function lunbo(){
if(set){
clearInterval(set);
}
set=setInterval(function(){
var currentindex=$(".tclb1 ul li.on").index();
if(currentindex==imgnum-1){
picChange(currentindex,0);
}else{
picChange(currentindex,currentindex+1);
}
},3000);
}
$(".tclb1").on({"mousemove":function(){
if(set){
clearInterval(set);
}
},"mouseout":function(){
lunbo();
}});
init();
$(".tclb1 ul li").click(function(){
picChange($(".tclb1 ul li.on").index(),$(this).index());
});
})
})();
<!--轮播1 start-->
/*轮播2 start*/
($(function(){
var set;
var time1=2000;
var time2=5000;
var imgnum=$(".tclb2 img").length;
var imgwidth=parseInt($(".tclb2 img").width());
function init(){
createBtn();
$(".tclb ul li:first").addClass("on");
$(".tclb2").css("width",imgwidth*imgnum);
}
function createBtn(){
var ul=$("<ul></ul>");
for(var i=0;i<imgnum;i++){
this.add=function(){
ul.append("<li>"+(i+1)+"</li>");
}
add();
}
$(".tclb").append(ul);
}
function picChange(nextindex){
var currentleft=parseInt($(".tclb2").css("left"));
var left=0-imgwidth*nextindex;
$(".tclb ul li").removeClass("on");
$(".tclb ul li:eq("+nextindex+")").addClass("on");
$(".tclb2").animate({"left":left},time1);
}
function lunbo(){
if(set){
clearInterval(set);
}
set=setInterval(function(){
var currentindex=$(".tclb ul li.on").index();
if(currentindex==imgnum-1){
picChange(0);
}
else{
picChange(currentindex+1);
}
},time2)
}
init();
$(".tclb ul li").on({"click":function(){
if(set){
clearInterval(set);
}
var index=$(this).index();
picChange(index);
}});
$(".tclb2 img").on({"mousemove":function(){
if(set){
clearInterval(set);
}
},"mouseout":function(){
lunbo();
}});
lunbo();
}))();
/*轮播2 end*/
</script>
<script>
(function(){
/*轮播3 start*/
$(function(){
var set;
var time1=2000;
var time2=5000;
var imgnum=$(".tclb3 img").length;
function init(){
createBtn();
$(".tclb3 ul li:first").addClass("on");
}
function createBtn(){
var ul=$("<ul></ul>");
for(var i=0;i<imgnum;i++){
this.add=function(){
ul.append("<li>"+(i+1)+"</li>");
}
add();
}
$(".tclb3").append(ul);
}
function picChange(preindex,nextindex){
$(".tclb3 a:eq("+preindex+")").animate({"height":"0"},time1);
$(".tclb3 a:eq("+nextindex+")").animate({"height":"600px"},time1);
$(".tclb3 ul li:eq("+preindex+")").removeClass("on");
$(".tclb3 ul li:eq("+nextindex+")").addClass("on");
}
function lunbo(){
if(set){
clearInterval(set);
}
set=setInterval(function(){
var currentindex=$(".tclb3 ul li.on").index();
if(currentindex==imgnum-1){
picChange(currentindex,0);
}
else{
picChange(currentindex,currentindex+1);
}
},time2)
}
init();
lunbo();
$(".tclb3 ul li").on({"click":function(){
if(set){
clearInterval(set);
}
var index=$(this).index();
var currentindex=$(".tclb3 ul li.on").index();
picChange(currentindex,index);
}});
$(".tclb3 img").on({"mousemove":function(){
if(set){
clearInterval(set);
}
},"mouseout":function(){
lunbo();
}});
})
/*轮播3 end*/
})();
</script>
<div class="tclb1">
<a><img src="images/1.jpg"/></a>
<a><img src="images/2.jpg"/></a>
<a><img src="images/3.jpg"/></a>
<a><img src="images/4.jpg"/></a>
<a><img src="images/5.jpg"/></a>
</div>
<!--轮播1 end-->
<!--轮播2 start-->
<div class="tclb">
<div class="tclb2">
<a><img src="images/1.jpg"/></a>
<a><img src="images/2.jpg"/></a>
<a><img src="images/3.jpg"/></a>
<a><img src="images/4.jpg"/></a>
<a><img src="images/5.jpg"/></a>
</div>
</div>
<!--轮播2 end-->
<!--轮播3 start-->
<div class="tclb3">
<a><img src="images/1.jpg"/></a>
<a><img src="images/2.jpg"/></a>
<a><img src="images/3.jpg"/></a>
<a><img src="images/4.jpg"/></a>
<a><img src="images/5.jpg"/></a>
</div>
<!--轮播3 end-->
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://7xptn0.com1.z0.glb.clouddn.com/tuchjquery-1.9.1.min.js"></script>
</head>
<body>
<style>
*{margin:0;padding:0;list-style: none;}
/*轮播1*/
.tclb1{width:1000px;height:600px;margin:50px auto;position:relative;}
.tclb1 img{position:absolute;width:1000px;z-index: 99;height:600px;opacity: 0;}
.tclb1 ul{;height: 20px;position: absolute;z-index: 888;bottom:5px;left:50%;}
.tclb1 ul li{width:15px;height:15px;float:left;font-size: 12px;color:white;line-height: 15px;text-align: center;border-radius: 25px; border:1px solid gray;margin-left:5px;}
.tclb1 ul li.on{color:black;box-shadow: 0px 0px 10px green inset;}
/*轮播1*/
/*轮播2*/
.tclb{width:1000px;height:600px;margin:50px auto;position:relative;overflow: hidden;}
.tclb2{height:600px;position: relative;z-index: 88;}
.tclb2 a{display: block;float: left;}
.tclb2 img{position:relative;width:1000px;height:600px;}
.tclb ul{;height: 20px;position: absolute;z-index: 888;bottom:5px;left:50%;}
.tclb ul li{width:15px;height:15px;float:left;font-size: 12px;color:white;line-height: 15px;text-align: center;border-radius: 25px; border:1px solid gray;margin-left:5px;}
.tclb ul li.on{color:black;box-shadow: 0px 0px 10px green inset;}
/*轮播2*/
/*轮播3*/
.tclb3{width:1000px;height:600px;margin:50px auto;position:relative;overflow: hidden;}
.tclb3 a{display: block;}
.tclb3 img{position:absolute;width:0px;z-index: 99;height:600px;}
.tclb3 img:nth-child(1){width:1000px;}
.tclb3 ul{;height: 20px;position: absolute;z-index: 888;bottom:5px;left:50%;}
.tclb3 ul li{width:15px;height:15px;float:left;font-size: 12px;color:white;line-height: 15px;text-align: center;border-radius: 25px; border:1px solid gray;margin-left:5px;}
.tclb3 ul li.on{color:black;box-shadow: 0px 0px 10px green inset;}
/*轮播3*/
</style>
<script>
/*轮播1*/
(function(){
$(function(){
var set;
var imgnum=$(".tclb1 img").length;
function createBtn(imgnum){
var ul=$("<ul></ul>");
for(var i=0;i<imgnum;i++){
this.add=function(){
ul.append("<li>"+(i+1)+"</li>");
}
add();
}
$(".tclb1").append(ul);
}
function init(){
createBtn(imgnum);
$(".tclb1 ul li:first").addClass("on");
$(".tclb1 img:first").css("opacity","1");
lunbo();
}
function picChange(last,next){
$(".tclb1 img:eq("+last+")").animate({
"opacity":"0"
},1000);
$(".tclb1 img:eq("+next+")").animate({
"opacity":"1"
},1000);
$(".tclb1 ul li:eq("+last+")").removeClass("on");
$(".tclb1 ul li:eq("+next+")").addClass("on");
}
function lunbo(){
if(set){
clearInterval(set);
}
set=setInterval(function(){
var currentindex=$(".tclb1 ul li.on").index();
if(currentindex==imgnum-1){
picChange(currentindex,0);
}else{
picChange(currentindex,currentindex+1);
}
},3000);
}
$(".tclb1").on({"mousemove":function(){
if(set){
clearInterval(set);
}
},"mouseout":function(){
lunbo();
}});
init();
$(".tclb1 ul li").click(function(){
picChange($(".tclb1 ul li.on").index(),$(this).index());
});
})
})();
<!--轮播1 start-->
/*轮播2 start*/
($(function(){
var set;
var time1=2000;
var time2=5000;
var imgnum=$(".tclb2 img").length;
var imgwidth=parseInt($(".tclb2 img").width());
function init(){
createBtn();
$(".tclb ul li:first").addClass("on");
$(".tclb2").css("width",imgwidth*imgnum);
}
function createBtn(){
var ul=$("<ul></ul>");
for(var i=0;i<imgnum;i++){
this.add=function(){
ul.append("<li>"+(i+1)+"</li>");
}
add();
}
$(".tclb").append(ul);
}
function picChange(nextindex){
var currentleft=parseInt($(".tclb2").css("left"));
var left=0-imgwidth*nextindex;
$(".tclb ul li").removeClass("on");
$(".tclb ul li:eq("+nextindex+")").addClass("on");
$(".tclb2").animate({"left":left},time1);
}
function lunbo(){
if(set){
clearInterval(set);
}
set=setInterval(function(){
var currentindex=$(".tclb ul li.on").index();
if(currentindex==imgnum-1){
picChange(0);
}
else{
picChange(currentindex+1);
}
},time2)
}
init();
$(".tclb ul li").on({"click":function(){
if(set){
clearInterval(set);
}
var index=$(this).index();
picChange(index);
}});
$(".tclb2 img").on({"mousemove":function(){
if(set){
clearInterval(set);
}
},"mouseout":function(){
lunbo();
}});
lunbo();
}))();
/*轮播2 end*/
</script>
<script>
(function(){
/*轮播3 start*/
$(function(){
var set;
var time1=2000;
var time2=5000;
var imgnum=$(".tclb3 img").length;
function init(){
createBtn();
$(".tclb3 ul li:first").addClass("on");
}
function createBtn(){
var ul=$("<ul></ul>");
for(var i=0;i<imgnum;i++){
this.add=function(){
ul.append("<li>"+(i+1)+"</li>");
}
add();
}
$(".tclb3").append(ul);
}
function picChange(preindex,nextindex){
$(".tclb3 a:eq("+preindex+")").animate({"height":"0"},time1);
$(".tclb3 a:eq("+nextindex+")").animate({"height":"600px"},time1);
$(".tclb3 ul li:eq("+preindex+")").removeClass("on");
$(".tclb3 ul li:eq("+nextindex+")").addClass("on");
}
function lunbo(){
if(set){
clearInterval(set);
}
set=setInterval(function(){
var currentindex=$(".tclb3 ul li.on").index();
if(currentindex==imgnum-1){
picChange(currentindex,0);
}
else{
picChange(currentindex,currentindex+1);
}
},time2)
}
init();
lunbo();
$(".tclb3 ul li").on({"click":function(){
if(set){
clearInterval(set);
}
var index=$(this).index();
var currentindex=$(".tclb3 ul li.on").index();
picChange(currentindex,index);
}});
$(".tclb3 img").on({"mousemove":function(){
if(set){
clearInterval(set);
}
},"mouseout":function(){
lunbo();
}});
})
/*轮播3 end*/
})();
</script>
<div class="tclb1">
<a><img src="images/1.jpg"/></a>
<a><img src="images/2.jpg"/></a>
<a><img src="images/3.jpg"/></a>
<a><img src="images/4.jpg"/></a>
<a><img src="images/5.jpg"/></a>
</div>
<!--轮播1 end-->
<!--轮播2 start-->
<div class="tclb">
<div class="tclb2">
<a><img src="images/1.jpg"/></a>
<a><img src="images/2.jpg"/></a>
<a><img src="images/3.jpg"/></a>
<a><img src="images/4.jpg"/></a>
<a><img src="images/5.jpg"/></a>
</div>
</div>
<!--轮播2 end-->
<!--轮播3 start-->
<div class="tclb3">
<a><img src="images/1.jpg"/></a>
<a><img src="images/2.jpg"/></a>
<a><img src="images/3.jpg"/></a>
<a><img src="images/4.jpg"/></a>
<a><img src="images/5.jpg"/></a>
</div>
<!--轮播3 end-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- GUI - Web前端开发框架
- 如何优雅地处理前端异常？
- WEB前端开发都应知道的jquery小技巧及jquery三个简写
- 前端开发过程中浏览器版本的两种判定方法
- Bootstrap每天必学之前端开发框架
- 直接拿来用的15个jQuery代码片段
- 10个很棒的jQuery代码片段
- 前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）
- 前端开发必须知道的JS之闭包及应用
- 18个非常棒的jQuery代码片段
- 深入解析 ES6 系列（二）
- [前端百科]UI设计师与前端工程师的区别
- 关于APP，原生和H5开发技术的争论
- 编程狂人第三十三期，程序员必读的技术周刊
- 招聘正在进行时，315晚会使用的高科技产品，难道你们不知道嘛<(￣︶￣)↗[GO!]
- 前端开发-学习资料库
- 前端开发文档（参考手册,开源书籍）
- 1.html的基本概念的学习
- angular.js双向数据绑定实现动画特效
- 前端开发工程师必备技能