jquery怎么写轮播图( 三 ) _jquery

12345以上代码保存为html文件后可直接运行。
7. 怎么用jquery做一个轮播图代码如下：
<div id="scrollPics">
<ul
class="slider" >
<li><img
src="http://www.xuexi88.com/zhishi/images/ads/1.gif"/></li>
<li><img
src="http://www.xuexi88.com/zhishi/images/ads/2.gif"/></li>
<li><img
src="http://www.xuexi88.com/zhishi/images/ads/3.gif"/></li>
<li><img
src="http://www.xuexi88.com/zhishi/images/ads/4.gif"/></li>
<li><img
src="http://www.xuexi88.com/zhishi/images/ads/5.gif"/></li>
</ul>
<ul
class="num" >
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
8. 怎样用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的索引。
【jquery怎么写轮播图】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是一样的原理。
9. 如何编写jquery插件之轮播图对于一位合格的前端开发人员来说，首页图片轮播可谓是必会的基本功。
那么我们聊一聊如何用jquery封装自己的轮播插件。首先必须要聊到的jquery为我们提供的两大扩展方法，$.fn和$.extend(),$.extend相当于为jQuery类（注意，JavaScript并没有类，我们只是以类来理解这种做法）添加静态方法，$.fn其实就是jQuery.prototype，原型，对于新手比较难解的概念，可以简单的理解为，我更改了印章，印章印出来的每个印记都会受到印章的影响，可谓釜底抽薪，JavaScript原型链相对较为复杂，JavaScript的继承特性便是基于原型实现的，在编写大规模的JavaScript代码的时候，以面向对象的方式编写才会显得有价值，我们在此不赘述。
好了，我们有了上述的知识储备，我们开始编写轮播插件。[html] view plain copy <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://www.xuexi88.com/zhishi/main.css" rel="stylesheet"><body> << >> 这是HTML代码的结构，需要一个向左，一个向右按钮和对应轮播图片数目的icon按钮，建议大家用a标签设置图片的容器，比较好操作。