jquery的轮播图,jquery简单轮播图

jQuery轮播图实现思路

用banner隐藏超出部分的图片，imageList是inline，要显示的话就float到标签位置。

公司主营业务：成都网站制作、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出息烽免费做网站回馈大家。

function changeTo(num){ 

var goLeft = num * 800;

$(".imgList").animate({left: "-" + goLeft + "px"},500);

$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

}

//创建一个定时器，然后再调用这个定时器，让定时器去执行播放图片

var autoChange = setInterval(function () {

if(index3){

index++

}else {

index=0

}

changeTo(index)

},1000);

jQuery轮播图

需求 ：使图片能够进行轮播滚动，到最后一张图片时返回第一张(或第一张向前到最后一张)。

思路 ：在两端的图片前后添加一个虚拟镜像，当切换到镜像时，返回到所对应的真实图片。

方案 ：

1.通过浮动或绝对定位使图片水平排列。

2.页面打开后将图片的第一张与最后一张的克隆镜像分别放到最后一张的后面和第一张的前面。

3.当点击翻页按钮时，将图片整体向左（右）移动图片宽度的距离，并且对当前显示的图片位置进行判断，当移动到镜像位置时将镜像位置替换为实际图片位置。

4.当图片移动时，在图片下方的页码也随之改变，并且对每一个页码绑定点击事件，当点击页码时，跳转到对应的图片。

5.优化：当翻页动画未完成时，多次点击翻页，会使程序出错。

每次点击时进行判断，动画完成前的点击无效。

用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。另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器。