您的位置：首页 > Web前端 > JQuery

轮播图~动画轮播的jquery详细代码写法

2016-09-18 20:14 253 查看

	<!----大家好，我是小张，本次将为大家讲解一下轮播图在jquery中的实现，希望对大家有所帮助。
	轮播图在网站中很常用，京东，淘宝，········等等各大网站都会用到轮播图的相关知识，而本次博客将为大家介绍使用jquery编写动态轮播图的例子。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{margin:0;padding:0;}

#box{

width:760px;

height:300px;

margin:
30px
auto;

border:
1px
solid #ccc;

position:relative;

}

.imglist{

width:
760px;

height:300px;

list-style:
none;

}

.imglist
li{

width:
100%;

height:100%;

position:relative;

overflow:
hidden;

display:none;

}

.imglist
li img{

position:absolute;

}

.imglist
li .txt{

left:-760px;

}

.imglist
li .con{

left:-25px;

display:
none;

}

.numlist{

list-style:
none;

width:
180px;

height:20px;

position:absolute;

right:20px;

bottom:
20px;

}

.numlist
li{

width:
20px;

height:20px;

float:left;

margin-right:10px;

border:1px
solid #fff;

}

.active{

background:
#fff;

}

a{

width:48px;

height:
100px;

background:
url("images/button.png");

position:absolute;

top:50%;

margin-top:-50px;

opacity:
0.5;

}

.aright{

right:0;

background-position:
-54px
0;

}

</style>

</head>

<body>

<div id="box">

<ul class="imglist">

</ul>

<ul class="numlist">

</ul>

<a
href="javascript:;"
class="aleft"></a>

<a
href="javascript:;"
class="aright"></a>

</div>

</body>

<script src="js/jquery-1.11.3.min.js"></script>

<script >

/**

* Created by xiaozhang on 16/9/14.

*/

var index=0

for(var i=0;i<5;i++){

//包含图片的li

//var $li=$("<li style='background:url(images/bg"+(i+1)+".jpg)'></li>");

var $li=$("<li></li>");

$li.css("background","url(images/bg"+(i+1)+".jpg)");

$li.appendTo($(".imglist"));

$li.append($("<img><img>"));

$li.find("img:odd").prop("src","images/text"+(i+1)+".png").addClass("txt");

$li.find("img:even").prop("src","images/con"+(i+1)+".png").addClass("con");

var $num=$("<li></li>");

//下标li

$num.appendTo($(".numlist"));

};

var imgli=$(".imglist li");//图片下面的li

var numli=$(".numlist li");//数字下面的li

imgli.eq(0).show();

change();

numli.click(function(){

index=numli.index(this);

change()

});

function change(){

numli.eq(index).addClass("active").siblings().removeClass("active");

imgli.eq(index).show().siblings().hide();

imgli.eq(index).find(".txt").stop().animate({left:0},700,function(){

imgli.eq(index).find(".con").show().stop().animate({left:0},700)

});

imgli.eq(index).siblings().find(".txt").css("left","-760px");

imgli.eq(index).siblings().find(".con").css({left:"-20px",display:"none"});

}

//点击右边

$(".aright").click(function(){

step();

});

//点击左边

$(".aleft").click(function(){

index--;

if(index<0){

index=numli.length-1;

}

change();

});

function step(){

index++;

if(index>=numli.length){

index=0

}

change();

}

//定时器

var timer=window.setInterval(step,2000);

$("#box").mouseover(function(){

window.clearInterval(timer);

}).mouseout(function(){

timer=window.setInterval(step,2000);

})

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 动画轮播图动画轮播图

相关文章推荐

新的分享

章节导航