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是一样的原理。

如何编写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实现一行多图轮播，是单击一下一张图片轮播，不是一下一行图片轮播，给个例子，跪求

!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

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

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

运行效果如下图所示：

名称栏目：jquery插件图片轮播,jquery广告图片轮播切换效果
当前URL：http://cdiso.cn/article/dsceocp.html