网页轮播图无缝衔接的代码怎么写

<title>无缝轮播图</title><style>{margin: 0;padding:0; }ul{list-style: none;}banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;}img{position: absolute;top: 0;left: 0}img li{float: left;}num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}num li{width: 10px;height: 10px;background:rgba(0,0,0,05);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}btn{display: none;}btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,06);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}btn prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}btn next{position: absolute;right: 0;top: 50%;margin-top: -50px;}num active{background-color: #fff;}</style><script src=">轮播图怎么做？轮播图可以起到展现主打产品、以及促销活动、装饰首页的效果。

首先打开ps软件。

新建一个空白图层、尺寸：1920x400像素。

可以找一些素材、拼凑一张轮播图、比如：做化妆产品可以找一些化妆品、化妆的人作为素材，自己做也可以。

可以先给一个底色、让画面显得好看一点。

接着在添加一些装饰线条、或是圆形形状、用来写文字或做装饰。

装饰好后再加上主打产品，产品位置可以居中一点让画面有紧凑感。

最后加一些产品信息、如需要打折之类的可以加上一些促销语句、比如：买多少优惠、、送赠品的文字。

一、原理
在轮播图数组dataList中，定义一个变量currentIndex = 0表示第一张，默认渲染第一张即dataList[currentIndex]，然后获取每张的下标。点击切换时把当前的下标赋值给currentIndex即可实现切换显示。

二、定义变量

三、模板渲染

四、点击小圆点切换

在li标签里执行一个点击函数，把当前下标值传进来。点击时设置currentIndex的值为当前的下标值。

五、左右按钮切换

定义两个变量作为参数prevIndex和nextIndex，利用计算属性算出当前的上一张或者下一张的下标（加1和减1 *** 作）。

六、定时器切换
定义一个定时器，每X秒执行一次nextIndex()函数即可。

鼠标经过清除定时器就不说了，使用clearInterval(thistimer)就可以了。

七、css样式

光是html的话很难实现轮播，轮播一般都是html+js才能完成。

给你一个最简单的html+js轮播例子：

html代码：

<div class="side" id = "lunbo">    
        <ul">    
            <li><img src="/images/1jpg"></li>    
            <li><img src="/images/2jpg"></li>    
            <li><img src="/images/3jpg"></li>    
        </ul>    
</div>

js代码：

var li=documentgetElementById('lunbo')getElementsByTagName("li");  
    var num=0;  
    var len=lilength;  
  
    setInterval(function(){  
        li[num]styledisplay="none";  
        num=++num==len0:num;  
        li[num]styledisplay="inline-block";  
  
},3000);//切换时间

var t = null;
function xunhuan(order){
    t = setInterval(function(){
        order++;
        if(order>3){
            order= 0;
        }
        $("ul")animate({'left':order756});
    },5000);
}
$("ul")hover(
    function(){
        clearInterval(t);
    },
    function(){
        clearInterval(t);
        xunhuan(index);
    }
)

这样就可以自动循环了

---