如何编写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。另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器。
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做图片轮播？我没基础请高人指点要详细最好有代码演示，就做下面的效果，并且可链接网址
这种简单的幻灯片是使用索引匹配的。一个思路如下：
写一个函数，这个函数可以实现图片的切换；
function flipSlide(int){
//横向滑动
$('#slideContent .sc_wrap:first').animate({'left' : '-'+ int*960 +'px'});
//纵向滑动
$('#slideContent .sc_wrap:first').animate({'top' : '-'+ int*200 +'px'});
}
然后，大致有3种切换方法，分别是：左右控制（上一个下一个），指示控制（1，2，3，4）和自动播放；
左右控制比较简单，点击按钮+1-1即可。
var startInt = 0;//默认显示第一个
//上翻
$('#prev').click(function(){
//上一个，就是当前元素的上一个元素,要做判断的不会有-1的索引。
startInt = startInt-1;
//调用切换函数
flipSlide(startInt );
})
指示控制更简单，直接适应其index索引即可。
$('#slideNav ul li').click(function(){
//获取当前的索引
var thisId = $(this).index();
//执行播放函数
flipSlide(thisId );
})
自动播放需要写一个自动播放函数，然后调用，比如：
function autoPlay(){
if(startInt = 幻灯片个数){
startInt = 0;
}else{
startInt = startInt + 1;
}
//执行播放函数
flipSlide(thisId );
}
//定时播放,3秒切换
setInterval(autoPlay,3000);
这样，一个简单的幻灯片就写好了。
如果你希望它更智能，那么你就需要多下点功夫了。其实，道理都是一样的，只不过做成什么样的效果更好看而已。这个效果和滑动门tab是一样的原理。
用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
1、实现的总体思路：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
!DOCTYPE html
html
head
meta charset="UTF-8"
titlejquery轮播效果图 /title
script type="text/javascript" src="scripts/jquery-1.9.1.js"/script
style type="text/css"
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
/style
script type="text/javascript"
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
/script
/head
body
div class="slider"
ul class="slider-main"
li class="slider-panel"
a href="
title="图片1" src="images/1.jpg"/a
/li
li class="slider-panel"
a href="#"img title="图片2" src="images/1.jpg"/a
/li
li class="slider-panel"
a href="#"img title="图片3" src="images/1.jpg"/a
/li
li class="slider-panel"
a href="#"img title="图片4" src="images/1.jpg"/a
/li
/ul
div class="slider-extra"
ul class="slider-nav"
li class="slider-item"1/li
li class="slider-item"2/li
li class="slider-item"3/li
li class="slider-item"4/li
/ul
div class="slider-page"
a class="slider-pre" href="javascript:;;"/a
a class="slider-next" href="javascript:;;"/a
/div
/div
/div
/body
/html