jquery圖片輪播,三種方式
阿新 • • 發佈：2019-01-31
<!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>