怎样实现图片的翻页轮播？

1首先，我们进入到广告牌生成器里面
2设置广告牌大小，宽度，高度，全局链接最好不要设置，我们做的是轮播，所以没必要做全局链接
3点击右上角的轮播
4选择所要的模板，然后选择，会出现在控制面板上面
5点击控制面板上面的效果模板
6在右边设置每一张的大小，注意要和最开始设置的基本尺寸一样
7然后填入你的链接，可以先把你的上传到你的淘宝空间里面，或者其他地方的空间里面，然后获取你的链接。
8填入你每一张点击后跳转到的目标链接，如果之前设置了全局链接，这个时候就不管用了，所以刚开始不要设置全局链接。
9最后一步就是点击右上角的保存/获取然后提示你登陆，其实是没有必要的，直接点击获取就ok了，如果要保存，就可以登陆，以便以后制作方便一点嘛。
10制作好代码后，就可以将这个flash插入到你的店铺或者其他网站上面了，用代码编辑的，就选择html代码，上传flash，就直接复制flash地址就ok了

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

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

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 );
})

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

function autoPlay(){
    if(startInt >= 幻灯片个数){
        startInt = 0;
    }else{
        startInt = startInt + 1;
    }
    
    //执行播放函数
    flipSlide(thisId );
}
//定时播放,3秒切换
setInterval(autoPlay,3000);

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

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

h5代码：

<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>

css代码：

<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}
#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}
#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/25em '微软雅黑';}
#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的，每张的宽度为1024px、高度为512px那么轮播的窗口大小就应该为一张的尺寸，即为：1024×512。之后将这5张0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

---