怎样用jquery做图片轮播？我没基础请高人指点要详细最好有代码演示，就做下面的效果，并且可链接网址_安全

这种简单的幻灯片是使用索引匹配的。一个思路如下：

写一个函数，这个函数可以实现的切换；

function flipSlide(int){
    //横向滑动
    $('#slideContent sc_wrap:first')animate({'left' : '-'+ int960 +'px'});

    //纵向滑动
    $('#slideContent sc_wrap:first')animate({'top' : '-'+ int200 +'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 );
})

自动播放需要写一个自动播放函数，然后调用，比如：

这样，一个简单的幻灯片就写好了。

如果你希望它更智能，那么你就需要多下点功夫了。其实，道理都是一样的，只不过做成什么样的效果更好看而已。这个效果和滑动门tab是一样的原理。

修改已有的代码要谨慎，主要是要注意路径的问题，还有就是样式的问题，我也经常改轮播代码，我都是现在要插入的代码里面先从头到尾看一遍，确定这个轮播的样式跟原来的样式不会有冲突，如果有则修改或删除，然后就看轮播的部分，大体框架怎么拉的，还有就是它调用的js和css文件是在哪个路径下面，已经轮播的路径，修改轮播的宽高度，全部修改好了之后，先把轮播的框架拉过去，再添加link调用文件，再把js、css、文件放到正确路径下，还有也放到正确路径下，这样就ok了，如果这时候原来的网页发生了变形，不要慌，仔细看看样式文件，看看是否依然存在冲突。
建议在原网页中将轮播部分用注释符号在轮播的开头和结尾做个标记，以免后期修改很难找到，或漏找等问题。如：

=轮播部分=

网页轮播图主要包含三部分：

1、轮播；2、css和html代码部分；3、轮播js代码部分

下面的可以参考：

<!DOCTYPE html>

<head>

<title>Document</title>

swiper-container{

width: 790px;

height: 340px;

}

</style>

</head>

<body>

</div>

</div>

var mySwiper = new Swiper ('swiper-container', {

// 滚动方向 horizontal/vertical

direction: 'horizontal',

// 自动播放

autoplay:2000,

// 是否循环播放

loop: true,

// 如果需要分页器（小圆点）

// 是否需要分页器

pagination: 'swiper-pagination',

// 点击分页器是否切换到对应的是 true 否 false

paginationClickable:true,

// 如果需要前进后退按钮

nextButton: 'swiper-button-next',

prevButton: 'swiper-button-prev',

// 用户 *** 作swiper之后，是否禁止autoplay。默认为true：停止。

// 如果设置为false，用户 *** 作swiper之后自动切换不会停止，每次都会重新启动autoplay。

// *** 作包括触碰，拖动，点击pagination等。

autoplayDisableOnInteraction:false,

})

</script>

</body>

</html>

效果图如下：

另外新手建议还是直接选用已有的，现在网上很多的！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/10491547.html

怎样用jquery做图片轮播？我没基础请高人指点要详细最好有代码演示，就做下面的效果，并且可链接网址

发表评论

评论列表（0条）