轮播jquery,轮播图尺寸

jquery图片轮播思路

使用jQuery做轮播图是网页特效中很常见的一个特效。

创新互联主营海盐网站建设的网络公司,主营网站建设方案,重庆APP软件开发,海盐h5微信小程序搭建,海盐网站营销推广欢迎海盐等地区企业咨询

工具原料：编辑器、浏览器、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

用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图片自动轮播怎么设置？求高手

!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图片上下轮播的问题，怎么实现自动轮播？

1、html部分

body

div id="banner"    

div id="banner_bg"/div!--标题背景--

div id="banner_info"/div!--标题--

ul

li class="on"1/li

li2/li

li3/li

li4/li

/ul

div id="banner_list"

a href="#" target="_blank"img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

a href="#" target="_blank"img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

a href="#" target="_blank"img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

a href="#" target="_blank"img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

/div

/div

/body

2、css样式部分

style type="text/css"

#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}

#banner_list img {border:0px;}

#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;

cursor:pointer; width:478px;}

#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}

#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}

#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;

margin:0; padding:0; bottom:3px; right:5px;}

#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}

#banner ul li.on { background:#900}

#banner_list a{position:absolute;} !-- 让四张图片都可以重叠在一起--

/style

3、jQuery部分

script type="text/javascript"

var t = n =0, count;

$(document).ready(function(){    

count=$("#banner_list a").length;

$("#banner_list a:not(:first-child)").hide();

$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));

$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});

$("#banner li").click(function() {

var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4

n = i;

if (i = count) return;

$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));

$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})

$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

document.getElementById("banner").style.background="";

$(this).toggleClass("on");

$(this).siblings().removeAttr("class");

});

t = setInterval("showAuto()", 4000);

$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

})

function showAuto()

{

n = n =(count -1) ?0 : ++n;

$("#banner li").eq(n).trigger('click');

}

/script

如何编写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);