如何编写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实现图片轮播怎么写呢求指教
*{
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做轮播图
有很多可供局搭并选择的JQ插件桐迹，比如
slider、bxslider、swipper等等，这些都是比较方便且功能强大的，例子可以参枝敏考官方的Demo
怎样用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实现图片轮播
!DOCTYPE html
html
head
meta charset="utf-8"
titleHello MUI/title
meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black"
!--标准mui.css--
link rel="stylesheet" href="../css/mui.min.css"
!--App自定义的css--
link rel="stylesheet" type="差橘text/css" href="../css/app.css"/
/head
body
header class="mui-bar mui-bar-nav"
a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"/a
h1 class="mui-title"下方悬浮标题/h1
/header
div class="mui-content"
ul class="mui-table-view mui-table-view-chevron"
li id="switch" class="mui-table-view-cell"
定时轮播
!--div class="mui-switch"
div class="mui-switch-handle"/div
/div--
/ul
div id="slider" class="mui-slider"
div class="mui-slider-group mui-slider-loop"
!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --
div class="mui-slider-item mui-slider-item-duplicate"
a href="#"
img src="../images/yuantiao.jpg"
p class="mui-slider-title"静静看这世界/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../imagesjiao.jpg"
p class="mui-slider-title"幸福就是可以一起睡觉/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../images/muwu.jpg"
p class="mui-slider-title"想要一间这样的木屋，静静的喝咖啡/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../images/cbd.jpg"
p class="mui-slider-title"Color of SIP CBD/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../images/yuantiao.jpg"
p class="mui-slider-title"静静看这世界/p
/a
/div
!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --
div class="mui-slider-item mui-slider-item-duplicate"
a href="#"
img src="../imagesjiao.jpg"
p class="mui-slider-title"幸福就是可以一起睡觉/p
/a
/div
/div
div class="mui-slider-indicator mui-text-right"
div class="mui-indicator mui-active"虚陆团/div
div class="mui-indicator"/div
div class="mui-indicator"/div
div class="mui-indicator"/div
/div
/div
/div
/body
script src="../js/悉激mui.min.js"/script
script
//alert("!!!!!");
var slider = mui("#slider");
slider.slider({
interval: 5000
});
/script
html
可以参照一下，里面有详尽的解析，便于你更好的理解！
jquery怎么写响应式轮播图
你这个问题问的好大。
1、响应式布局：
media选择器。根据宽度通过样式控制页面布局
直接使用样式百分比来控制。
通过js监控页面宽度，然后通过js手动去控制页面布局，显示元素或者隐藏元素，设置某些元素宽高之类的。
2、鼠标滚动：常用 mousewheel 事件，滚动睁卖事件
3、动画效果 ：可以选择css3的动画，或者js自己写动画
综上所握早仿述：你需要通过 2的事件来控制1，不过1的样式中要加入动画样式（3）。大段纤功告成
chm里都是方式方法。也有现成效果