轮播图jquery代码(jquery自动轮播图代码)

jquery图片轮播代码

$(".btn_box?li").css({backgroundPosition:"-13px?-5px"});

//如果还需设置其他参数，可用下面的格式：

$(".btn_box?li").css({backgroundPosition:"-13px?-5px",backgroundColor:"#cccccc"});

用jquery实现图片轮播怎么写呢求指教

*{??

????margin:?0;??

????padding:?0;??

}??

ul{??

????list-style:none;??

}??

.slideShow{??

????width:?620px;??

????height:?700px;?????/*其实就是图片的高度*/??

????border:?1px?#eeeeee?solid;??

????margin:?100px?auto;??

????position:?relative;??

????overflow:?hidden;????/*此处需要将溢出框架的图片部分隐藏*/??

}??

.slideShow?ul{??

????width:?2500px;??

????position:?relative;?????/*此处需注意relative?:?对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/??

}??

.slideShow?ul?li{??

????float:?left;?????/*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/??

????width:?620px;??

}??

.slideShow?.showNav{?????/*用绝对定位给数字按钮进行布局*/??

????position:?absolute;??

????right:?10px;??

????bottom:?5px;??

????text-align:center;??

????font-size:?12px;??????

????line-height:?20px;??

}??

.slideShow?.showNav?span{??

????cursor:?pointer;??

????display:?block;??

????float:?left;??

????width:?20px;??

????height:?20px;??

????background:?#ff5a28;??

????margin-left:?2px;??

????color:?#fff;??

}??

.slideShow?.showNav?.active{??

????background:?#b63e1a;??

}??

js代码规范：

script?src="../../../jQuery/js/jquery-2.1.4.js"/script?script?type="text/javascript"??

??

$(document).ready(function(){??????

??

var?slideShow=$(".slideShow"),????????????????????????????????????????????????????????????????????//获取最外层框架的名称?????

??

ul=slideShow.find("ul"),???????????????

??

showNumber=slideShow.find(".showNav?span"),??????????????????????????????????????????????//获取按钮??????????

??

oneWidth=slideShow.find("ul?li").eq(0).width();????????????????????????????????????????//获取每个图片的宽度??????????

??

var?timer=null;?????????????????????????????????????????????????????????????????????????????????????//定时器返回值，主要用于关闭定时器??????????

??

var?iNow=0;?????????????????????????????????????????????????????????????????????????????????????????//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0??????????????????

??

showNumber.on("click",function(){??????????????????????????????????????????????????????//为每个按钮绑定一个点击事件???????????????????

??

$(this).addClass("active").siblings().removeClass("active");??????????????????//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉??????????????

??

var?index=$(this).index();????????????????????????????????????????????????????????????????//获取哪个按钮被点击，也就是找到被点击按钮的索引值??????????????

??

iNow=index;??????????????

??

ul.animate({????"left":-oneWidth*iNow,???????????????????????????????//注意此处用到left属性，所以ul的样式里面需要设置position:?relative;?让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定????????????

??

???})????????

??

???});?????????????????

??

??function?autoplay(){??????

??

timer=setInterval(function(){??????????????????????????????????????????????//打开定时器?????????????

??

??iNow++;?????????????????????????????????????????????????????????????????????????//让图片的索引值次序加1，这样就可以实现顺序轮播图片?????????????

??

??if(iNowshowNumber.length-1){??????????????????????????????????????//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始??????????????????

??

iNow=0;?}??????????????

??

showNumber.eq(iNow).trigger("click");??????????????????????????????????//模拟触发数字按钮的click??????????

??

},2000);??????????????????????????????????????????????????????????????????????//2000为轮播的时间??

??

}?????

??

?autoplay();?????

??

?slideShow.hover(?function(){clearInterval(timer);},autoplay);?????另外注意setInterval的用法比较关键。??

??

})??

??

/script??

主体代码：

[html]?view?plain?copy?print?

body??

????????div?class="slideShow"??

????????????!--图片布局开始--??

????????????ul??

????????????????lia?href="#"img?src="images/view/111.jpg"//a/li??

????????????????lia?href="#"img??src="images/view/112.jpg"?//a/li??

????????????????lia?href="#"img?src="images/view/113.jpg"?//a/li??

????????????????lia?href="#"img??src="images/view/114.jpg"?//a/li??

????????????/ul??

????????????!--图片布局结束--??

??????????????

????????????!--按钮布局开始--??

????????????div?class="showNav"??

????????????????span?class="active"1/span??

????????????????span2/span??

????????????????span3/span??

????????????????span4/span??

????????????/div??

????????????!--按钮布局结束--??

????????/div??

??

/body

如何编写jquery插件之轮播图

对于一位合格的前端开发人员来说，首页图片轮播可谓是必会的基本功。那么我们聊一聊如何用jquery封装自己的轮播插件。

首先必须要聊到的jquery为我们提供的两大扩展方法，$.fn和$.extend(),$.extend相当于为jQuery类（注意，JavaScript并没有类，我们只是以类来理解这种做法）添加静态方法，

$.fn其实就是jQuery.prototype，原型，对于新手比较难解的概念，可以简单的理解为，我更改了印章，印章印出来的每个印记都会受到印章的影响，可谓釜底抽薪，JavaScript原型链相对较为复杂，JavaScript的继承特性便是基于原型实现的，在编写大规模的JavaScript代码的时候，以面向对象的方式编写才会显得有价值，我们在此不赘述。

好了，我们有了上述的知识储备，我们开始编写轮播插件。

[html] view plain copy

!DOCTYPE html

html lang="en"

head

title/title

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1"

link href="main.css" rel="stylesheet"

script src="./js/jquery-1.10.2.min.js"/script

script src="./js/jquery.slider.js"/script

script src="./js/main.js"/script

/head

body

div class="slider"

div class="slider_img"

a class="slider-active" href="#" style="background: url(./img/nav1.jpg) 50% no-repeat; background-size: cover; opacity: 1;"/a

a href="#" style="background: url(./img/nav2.jpg) 50% no-repeat; background-size: cover;"/a

a href="#" style="background: url(./img/nav3.jpg) 50% no-repeat; background-size: cover;"/a

a href="#" style="background: url(./img/nav4.jpg) 50% no-repeat; background-size: cover;"/a

a href="#" style="background: url(./img/nav5.jpg) 50% no-repeat; background-size: cover;"/a

/div

span id="left" class="arrow-icon"/span

span id="right" class="arrow-icon"/span

div class="slider_icon"

span class="active"/span

span/span

span/span

span/span

span/span

/div

/div

/body

/html

这是HTML代码的结构，需要一个向左，一个向右按钮和对应轮播图片数目的icon按钮，建议大家用a标签设置图片的容器，比较好操作。

CSS我就不贴了，之后我会将其上传。

最重要的是JavaScript代码:

[javascript] view plain copy

(function($) {

$.fn.slider = function(options) {

//this指向当前的选择器

var config = {

index: 0,

timer: null,

speed: 3000,

min: 0.3, //和css中的样式对应

max: 1

};

var opts = $.extend(config, options);

//核心方法，把当前index的图片和icon显示，把除此之外的图片和icon隐藏

var core = function() {

if (opts.index 4) {

opts.index = 0;

} else if (opts.index 0) {

opts.index = 4;

}

$(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active");

$(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min });

};

//左边

$(this).find("#left").bind("click", function() {

--opts.index;

core();

});

//右边

$(this).find("#right").bind("click", function() {

++opts.index;

core();

});

//每个icon分配事件

$(this).find(".slider_icon").on("click", "span", function() {

var index = $(this).index();

opts.index = index;

core();

});

//定时器

var start = function() {

opts.timer = setInterval(function() {

++opts.index;

core();

}, opts.speed);

}

$(this).hover(function() {

clearInterval(opts.timer);

}, function() {

start();

});

start();

}

}(jQuery));

1:core方法，其实图片轮播的本质就是把当前索引的图片显示，导航icon高亮，其余的隐藏，我做的是淡入淡出。

2：向左，向右，导航其实无非就是index的改变，jquery提供了一个index()方法，可以获得所有匹配元素中当前元素的索引，从0开始。

3：定时器，要实现图片的自动导航，无非就是每隔一定的时间，index+1。另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器。