jquery轮播图实现简单代码(如何用jquery做轮播图)

admin 2023年12月14日 18:12 160 0

大家好，感谢邀请，今天来为大家分享一下jquery轮播图实现简单代码的问题，以及和如何用jquery做轮播图的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

一、jquery图片轮播思路

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

工具原料：编辑器、浏览器、jQuery

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。

<title>jquery轮播效果图</title>

<scripttype="text/javascript"src="scripts/jquery-1.9.1.js"></script>

.slider,.slider-panelimg,.slider-extra{

.slider-panel,.slider-nav,.slider-pre,.slider-next{

.slider-nav.slider-item-selected{

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

<scripttype="text/javascript">

hasStarted=false,//是否已经开始轮播

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(){

$('.slider-page').show();

$('.slider-page').hide();

$('.slider-item').hover(function(e){

varpreIndex=$(".slider-item").filter(".slider-item-selected").index();

$('.slider-pre').unbind('click');

$('.slider-pre').bind('click',function(){

$('.slider-next').unbind('click');

$('.slider-next').bind('click',function(){

currentIndex=(--currentIndex+length)%length;

currentIndex=++currentIndex%length;

*从preIndex页翻到currentIndex页

functionplay(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');

<liclass="slider-panel">

title="图片1"src="images/1.jpg"></a>

<liclass="slider-panel">

<ahref="#"><imgtitle="图片2"src="images/1.jpg"></a>

<liclass="slider-panel">

<ahref="#"><imgtitle="图片3"src="images/1.jpg"></a>

<liclass="slider-panel">

<ahref="#"><imgtitle="图片4"src="images/1.jpg"></a>

<divclass="slider-extra">

<liclass="slider-item">1</li>

<liclass="slider-item">2</li>

<liclass="slider-item">3</li>

<liclass="slider-item">4</li>

<divclass="slider-page">

<aclass="slider-pre"href="javascript:;;"><</a>

<aclass="slider-next"href="javascript:;;">></a>

二、如何在网页上添加轮播图片

原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。

首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，

var p= CurrentStyle(this._container).position;

p=="relative"|| p=="absolute"||(this._container.style.position="relative");

this._container.style.overflow="hidden";

this._slider.style.position="absolute";

如果没有设置Change切换参数属性，会自动根据滑动对象获取：

this.Change= this.options.Change? this.options.Change:

this._slider[bVertical?"offsetHeight":"offsetWidth"]/ this._count;

执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：

index== undefined&&(index= this.Index);

index< 0&&(index= this._count- 1)|| index>= this._count&&(index= 0);

== undefined&&(index= this.Index);

index< 0&&(index= this._count- 1)|| index>= this._count&&(index= 0);

之后就到设置使用tween缓动时需要的参数了，

包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：

this._target=-Math.abs(this.Change)*(this.Index= index);

this._b= parseInt(CurrentStyle(this._slider)[this.options.Vertical?"top":"left"]);

this._c= this._target- this._b;

还有Duration(持续时间)是自定义属性。

参数设置好后就执行Move程序开始移动了。

里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration，

未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：

if(this._c&& this._t< this.Duration){

this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));

this._timer= setTimeout(Bind(this, this.Move), this.Time);

this.Auto&&(this._timer= setTimeout(Bind(this, this.Next), this.Pause));

实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：

new SlideTrans("idContainer","idSlider", 3).Run();

Vertical: true,//是否垂直方向（方向不能改）

Pause: 2000,//停顿时间(Auto为true时有效)

onStart: function(){},//开始转换时执行

onFinish: function(){},//完成转换时执行

Tween: Tween.Quart.easeOut//tween算子

其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。

var SlideTrans= function(container, slider, count, options){

this._container=$(container);//容器对象

this._count= Math.abs(count);//切换数量

this._t= this._b= this._c= 0;//tween参数

this.Auto=!!this.options.Auto;

this.Duration= Math.abs(this.options.Duration);

this.Time= Math.abs(this.options.Time);

this.Pause= Math.abs(this.options.Pause);

this.Tween= this.options.Tween;

this.onStart= this.options.onStart;

this.onFinish= this.options.onFinish;

var bVertical=!!this.options.Vertical;

this._css= bVertical?"top":"left";//方向

var p= CurrentStyle(this._container).position;

p=="relative"|| p=="absolute"||(this._container.style.position="relative");

this._container.style.overflow="hidden";

this._slider.style.position="absolute";

this.Change= this.options.Change? this.options.Change:

this._slider[bVertical?"offsetHeight":"offsetWidth"]/ this._count;

SetOptions: function(options){

Vertical: true,//是否垂直方向（方向不能改）

Pause: 2000,//停顿时间(Auto为true时有效)

onStart: function(){},//开始转换时执行

onFinish: function(){},//完成转换时执行

Tween: Tween.Quart.easeOut//tween算子

Extend(this.options, options||{});

index== undefined&&(index= this.Index);

index< 0&&(index= this._count- 1)|| index>= this._count&&(index= 0);

this._target=-Math.abs(this.Change)*(this.Index= index);

this._b= parseInt(CurrentStyle(this._slider)[this.options.Vertical?"top":"left"]);

this._c= this._target- this._b;

//未到达目标继续移动否则进行下一次滑动

if(this._c&& this._t< this.Duration){

this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));

this._timer= setTimeout(Bind(this, this.Move), this.Time);

this.Auto&&(this._timer= setTimeout(Bind(this, this.Next), this.Pause));

this._slider.style[this._css]= i+"px";

clearTimeout(this._timer); this.MoveTo(this._target);

三、用jquery实现图片轮播怎么写呢求指教

height:700px;/*其实就是图片的高度*/

overflow:hidden;/*此处需要将溢出框架的图片部分隐藏*/

position:relative;/*此处需注意relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/

float:left;/*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/

.slideShow.showNav{/*用绝对定位给数字按钮进行布局*/

<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">

varslideShow=$(".slideShow"),//获取最外层框架的名称

showNumber=slideShow.find(".showNavspan"),//获取按钮

oneWidth=slideShow.find("ulli").eq(0).width();//获取每个图片的宽度

vartimer=null;//定时器返回值，主要用于关闭定时器

variNow=0;//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

showNumber.on("click",function(){//为每个按钮绑定一个点击事件

$(this).addClass("active").siblings().removeClass("active");//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉

varindex=$(this).index();//获取哪个按钮被点击，也就是找到被点击按钮的索引值

ul.animate({"left":-oneWidth*iNow,//注意此处用到left属性，所以ul的样式里面需要设置position:relative;让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定

timer=setInterval(function(){//打开定时器

iNow++;//让图片的索引值次序加1，这样就可以实现顺序轮播图片

if(iNow>showNumber.length-1){//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始

showNumber.eq(iNow).trigger("click");//模拟触发数字按钮的click

slideShow.hover(function(){clearInterval(timer);},autoplay);另外注意setInterval的用法比较关键。

<spanclass="active">1</span>

OK，本文到此结束，希望对大家有所帮助。