1、02 接下来我们需要导入脚本文件，注意先导入Jquery文件，然后导入bootstrap的脚本文件，顺序一定不能颠倒，如下图所示 03 然后在body标签里定义轮播图的容器，容器的大小需要和图片的大小一样，否则会出现轮播图错位，效果如下图所示；我自己写的BS轮播加手势滑动，引入了一个插件，直接看代码吧引入插件JS代码$documentreadyfunction手势右滑 回到上一个画面$#39#myCarousel#39bind#39swiperight swiperightup swiperightdown#39，function；可以参考下面的daima 3个div的统一class = #39div#39var index =03秒轮播一次 var timer = setIntervalfunction index = index == 2 ？ 0 index + 1某个div显示，其他的隐藏 quotdivquothide；图片轮播的话，有两种方式1 通过js控制图片的显隐来实现轮播实现简单通过定时器切换图片这种方式我博客里有关键代码，可以百度以下内容查看使用javascript，jquery实现的图片轮播功能xyytIT2 通过定位方式，使图片；如图所示3这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果4这里是事件，这里定义了四个时间段的状态，兼容了ie的5如图所示这里是效果图，会根据时间轮播显示下一张图片 了；自己加五张图片，然后lt！doctype html lt！声明当前页面的编码集charset=gbk，gb2312中文编码，utf8国际编码 lt！当前页面的三要素 腾讯课堂专业的在线教育平台 lt！css，js margin；* $#39lieq0#39mouseenterfunction $thiscss#39background#39，#39red#39 $#39lieq0#39mouseoutfunction $thiscss#39background#39，#39#39 * $#39li#39hoverfunction * css#39backgrou。

2、if$index === 0 当前为第一张轮播图 quotbanquoteq$quotbanquotlength1addClassquotactivesiblingsquotbanquotremoveClassquotactivequot这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法。

3、需要一个固定宽高的div，然后将图片放进div里面，设置定时器，每次根据图片下标都向左或向右移动一个图片宽度的距离，轮播到最后一个的时候将下标变成第一个图片的下标，就可以实现了；1轮播图片2css和html代码部分3轮播js代码部分 下面的可以参考lt！DOCTYPE html Document；动画效果，图片从右侧飞入 quot#div_pic ul liquoteqindexanimateleftquot0quot，500 * 下面是可配置轮播动画代码 fnslide=functionoptions var defaults= affect1， 1上下滚动。

4、3简单的代码示例如下lt！DOCTYPE html jquery轮播效果图 * padding 0px margin 0px a textdecoration ul liststyle outside slider， sl；轮播控制器JavaScript，这段js引入需要jQuery的支持，所以先引入它 functionwin，doc，undefined var zturn=functionturn thisturn=turn thiszturn=$quot#quot+turnid thisX=0 thiszturnitem=quotztu；setInterval 方法会不停地调用函数，直到 clearInterval 被调用或窗口被关闭由 setInterval 返回的 ID 值可用作 clearInterval 方法的参数语法 setIntervalcode，milliseccode 要调用的函数或要执行的代码串；移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件处理touch事件能跟踪到屏幕滑动的每根手指以下是四种。