求首页js轮播图代码

JavaScript011

求首页js轮播图代码,第1张

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>query焦点轮播图</title>

  <style type="text/css">

      *{ margin: 0padding: 0text-decoration: none}

      body { padding: 20px}

      #container { width: 600pxheight: 400pxborder: 3px solid #333overflow: hiddenposition: relative}

      #list { width: 4200pxheight: 400pxposition: absolutez-index: 1}

      #list img { float: left}

      #buttons { position: absoluteheight: 10pxwidth: 100pxz-index: 2bottom: 20pxleft: 250px}

      #buttons span { cursor: pointerfloat: leftborder: 1px solid #fffwidth: 10pxheight: 10pxborder-radius: 50%background: #333margin-right: 5px}

      #buttons .on {  background: orangered}

      .arrow { cursor: pointerdisplay: noneline-height: 39pxtext-align: centerfont-size: 36pxfont-weight: boldwidth: 40pxheight: 40px position: absolutez-index: 2top: 180pxbackground-color: RGBA(0,0,0,.3)color: #fff}

      .arrow:hover { background-color: RGBA(0,0,0,.7)}

      #container:hover .arrow { display: block}

      #prev { left: 20px}

      #next { right: 20px}

  </style>

  <script type="text/javascript" src="js/jquery.1.10.2.js"></script>

  <script type="text/javascript">

      $(function () {

          var container = $('#container')

          var list = $('#list')

          var buttons = $('#buttons span')

          var prev = $('#prev')

          var next = $('#next')

          var index = 1

          var len = 5

          var interval = 3000

          var timer

          function animate (offset) {

              var left = parseInt(list.css('left')) + offset

              if (offset>0) {

                  offset = '+=' + offset

              }

              else {

                  offset = '-=' + Math.abs(offset)

              }

              list.animate({'left': offset}, 300, function () {

                  if(left >-200){

                      list.css('left', -600 * len)

                  }

                  if(left <(-600 * len)) {

                      list.css('left', -600)

                  }

              })

          }

          function showButton() {

              buttons.eq(index-1).addClass('on').siblings().removeClass('on')

          }

          function play() {

              timer = setTimeout(function () {

                  next.trigger('click')

                  play()

              }, interval)

          }

          function stop() {

              clearTimeout(timer)

          }

          next.bind('click', function () {

              if (list.is(':animated')) {

                  return

              }

              if (index == 5) {

                  index = 1

              }

              else {

                  index += 1

              }

              animate(-600)

              showButton()

          })

          prev.bind('click', function () {

              if (list.is(':animated')) {

                  return

              }

              if (index == 1) {

                  index = 5

              }

              else {

                  index -= 1

              }

              animate(600)

              showButton()

          })

          buttons.each(function () {

               $(this).bind('click', function () {

                   if (list.is(':animated') || $(this).attr('class')=='on') {

                       return

                   }

                   var myIndex = parseInt($(this).attr('index'))

                   var offset = -600 * (myIndex - index)

                   animate(offset)

                   index = myIndex

                   showButton()

               })

          })

          container.hover(stop, play)//鼠标移入停止轮播

          play()

      })

  </script>

</head>

<body>

<div id="container">

  <div id="list" style="left: -600px">

      <img src="img/5.jpg" alt="1"/>

      <img src="img/1.jpg" alt="1"/>

      <img src="img/2.jpg" alt="2"/>

      <img src="img/3.jpg" alt="3"/>

      <img src="img/4.jpg" alt="4"/>

      <img src="img/5.jpg" alt="5"/>

      <img src="img/1.jpg" alt="5"/>

  </div>

  <div id="buttons">

      <span index="1" class="on"></span>

      <span index="2"></span>

      <span index="3"></span>

      <span index="4"></span>

      <span index="5"></span>

  </div>

  <a href="javascript:" id="prev" class="arrow">&lt</a>

  <a href="javascript:" id="next" class="arrow">&gt</a>

</div>

</body>

</html>

可以直接复制用，记得引入JQ库！

你好！这段代码是轮播图的自动切换。其中还设置了鼠标移入移出的效果。setInteval函数是个定时器，两个参数:一个是执行的函数，一个是时间间隔。就是根据给定的的时间间隔(单位是毫秒)执行函数。setInterval(autoChange,3000)就是每3秒执行一次autoChange这个函数。说下autoChange函数:有一个current_index变量，用来记录当前显示的轮播图是第几个。每次执行的时候，都会先给这个变量进行自增1个。通过循环判断所有轮播图中的元素，如果索引与变量的值相同，分别设置对应元素的样式，否则设置为另一种样式。再看hotChange函数:定义了一个timer变量，也就是上面说的定时器。找出id为button的元素，并找出它下面的li子元素。用了一个for循环来遍历这个子元素数组。在循环里面做了两件事:为子元素设置onmouseover事件和onmouseout事件。其中onmouseout事件里面就是为timer重新赋值。而onmouseover事件，则是先判断timer变量是否有值。有值的话，使用clearInterval清空，也就是停止定时器；无值的话，则通过循环，为其设置样式。无值这里的循环内逻辑与autoChange函数是相同的。希望对你有帮助！