正文
jquery插件图片轮播,jquery广告图片轮播切换效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎样用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是一样的原理。
相关问答
Q1: 如何编写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。另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器。
Q2: 用JQuery实现一行多图轮播，是单击一下一张图片轮播，不是一下一行图片轮播，给个例子，跪求
!doctype html
html
head
meta charset="UTF-8"
titleDocument/title
style
*{padding: 0;margin: 0; }
ul li{list-style-type: none}
.gameTab{ width: 1100px; height: 150px; overflow: hidden; margin: 50px auto;position: relative;}
.gameTab ul{ width: 7680px; overflow: hidden; }
.gameTab ulli{ width: 220px; height:150px; float: left;text-align: center;}
.gameTab ulli:hover{opacity: 0.5}
.prev,.next{position: absolute;top: 50%;transform:translate(0,-50%);padding: 5px;background: red;z-index: 99;text-decoration: none;color: #fff;
}
.prev{left: 0;}
.next{right: 0;}
/style
/head
body
div
a href="javascript:;"前一张/a
ul
li style="background: #CB2929"1111/li
li style="background: #23C048"2222/li
li style="background: #00ABEA"3333/li
li style="background: #FF9800"4444/li
li style="background: #F96B36"5555/li
li style="background: #ADADAD"6666/li
/ul
a href="javascript:;"下一张/a
/div
script src=""/script
script
$(function () {
//下一张
function moveLeft(){
$(".gameTab ul").animate({marginLeft:"-220px"},300, function () {
$(".gameTab ul").children().first().appendTo($(".gameTab ul"));
$(".gameTab ul").css('marginLeft','0px');
});
}
$('.next').click(moveLeft);
//前一张
$('.prev').click(function () {
$(".gameTab ul").children().last().prependTo($(".gameTab ul"));//把ul的最后一个子元素添加到开头第一个
$(".gameTab ul").css('marginLeft','-220px'); //初始化把ul的marginleft左移220
$(".gameTab ul").animate({marginLeft:"0px"},300);
})
// 自动轮播
var timer = setInterval(moveLeft,3000)
//hover时停掉定时器
$('.gameTab').mouseenter(function(){
clearTimeout(timer)
})
$('.gameTab').mouseleave(function(){
timer=setInterval(moveLeft,3000)
})
})
/script
/body
/html
Q3: jquery图片自动轮播怎么设置？求高手
!DOCTYPE HTML
html
head
titleyugi/title
meta charset=UTF-8 /
style type="text/css"
#pic {
width: 410px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
}
#pic #po {
width: 370px;
overflow: hidden;
height: 170px;
left: 20px;;
top: 10;
position: relative;
}
#pic #pol {
width: 2370px;
height: 165px;
position: absolute;
}
#pic #num {
width: 120px;
height: 25px;
position: absolute;
z-index: 2;
left: 247px;
top: 140px;
}
#pic #num span {
width: 10px;
margin-left: 10px;
cursor: pointer;
font-size: 12px;
height: 20px;
float: left;
color: #000000;
text-align: center;
}
#pic #num span.cut {
background: #000000;
color: #FFFFFF;
}
img {
width: 370px;
height: 165px;
float: left
}
/style
script type="text/javascript" src="jquery-1.8.0.min.js"/script
script type="text/javascript"
jQuery (function ($)
{
var CRT = 0;
var w = $ ("img").width (), pol = $("#pol"), spans = $ ("#num span");
spans.hover (function ()
{
var me = $ (this);
me.addClass ("cut").siblings (".cut").removeClass ("cut");
spans.eq(CRT).clearQueue();
pol.stop ().animate (
{
left : "-" + w * (CRT = me.index ()) + "px"
}, "slow");
}, function()
{
anony();
});
var anony = function ()
{
CRT++;
CRT = CRT spans.length - 1 ? 0 : CRT;
spans.eq(CRT).clearQueue().delay(1000).queue (function()
{
spans.eq(CRT).triggerHandler ("mouseover");
anony();
});
};
anony();
});
/script
/head
body
div id="pic"
div id="po"
div id="pol"
img src="../../图片/素材/738b4710b912c8fcbb648ccdfe039245d688211e.jpg" /
img src="../../图片/素材/9f510fb30f2442a76c08f9a4d343ad4bd11302a8.jpg" /
img src="../../图片/素材/fd039245d688d43f76f37f527e1ed21b0ef43b3c.jpg" /
img src="../../图片/素材/11385343fbf2b21154e02b29c88065380dd78e8f.jpg" /
img src="../../图片/素材/a08b87d6277f9e2f7dd1b36f1d30e924b999f3f5.jpg" /
/div
div id="num"
span class="cut" 1/span
span2/span
span3/span
span4/span
span5/span
/div
/div
/div
/body
/html
Q4: jquery插件fullpage怎么使用轮播图
引入文件：
link rel="stylesheet" href="css/jquery.fullPage.css"
script src="js/jquery.min.js"/script
!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --
script src="js/jquery.easings.min.js"/script
!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --
script src="js/jquery.slimscroll.min.js"/script
script src="js/jquery.fullPage.js"/script
div id="dowebok"
div class="section"
h3第一屏/h3
/div
div class="section"
h3第二屏/h3
/div
div class="section"
h3第三屏/h3
/div
div class="section"
h3第四屏/h3
/div
/div
每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：
div class="section active"第三屏/div
同时，可以在 section 内加入 slide，如：
div id="dowebok"
div class="section"第一屏/div
div class="section"第二屏/div
div class="section"
div class="slide"第三屏的第一屏/div
div class="slide"第三屏的第二屏/div
div class="slide"第三屏的第三屏/div
div class="slide"第三屏的第四屏/div
/div
div class="section"第四屏/div
/div
调用的JavaScript代码如下：
$(function(){
$('#dowebok').fullpage();
});
配置项如下图所示：
方法，如下图所示：
回调函数，如下图所示：
7
运行效果如下图所示：
