求首页js轮播图代码

JavaScript015

求首页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库！

这是我以前写过的一个，样式你改一下就OK了

<div class="fbanner widget3924">

<div id="i_focus">

<div id="i_focus_pic">

<ul id="i_focus_piclist">

<li style="display: none">

<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner1.jpg) center 0 no-repeat">

</a>

</li>

<li style="display: list-item">

<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner4.jpg) center 0 no-repeat">

</a>

</li>

<li style="display: none">

<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner3.jpg) center 0 no-repeat">

</a>

</li>

<li style="display: none">

<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner2.jpg) center 0 no-repeat">

</a>

</li>

</ul>

<div id="i_focus_opdiv">

</div>

<ul id="i_focus_btn">

<li id="p0" class="">

<span>

</span>

</li>

<li id="p0" class="i_cur">

<span>

</span>

</li>

<li id="p0" class="">

<span>

</span>

</li>

<li id="p0" class="">

<span>

</span>

</li>

</ul>

</div>

</div>

<script type="text/javascript" src="/templates/runlinjinguan/js/flash.js"></script>

<script type="text/javascript">

$("#i_focus_btn").find("li").eq(0).addClass("i_cur")

</script>

</div>

引用的js文件

// JavaScript Document

//flash js

$(document).ready(function () {

var i_curIndex = 0

var beauBeauSlide//函数对象

var i_curID = 0//取得鼠标下方的对象ID

var pictureID = 0//索引ID

$("#i_focus_piclist li").eq(0).show()//默认

autoScroll()

$("#i_focus_btn li").hover(function (e) {

StopScrolll()

$("#i_focus_btn li").removeClass("i_cur") //所有的li去掉当前的样式加上正常的样式

$(this).addClass("i_cur")//而本身则加上当前的样式去掉正常的样式

i_curID = $(this).attr("id")//取当前元素的ID

pictureID = $("#i_focus_btn li").index(this)// i_curID.substring(i_curID.length - 1)//取最后一个字符

$("#i_focus_piclist li").eq(pictureID).fadeIn("slow")//本身显示

$("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide()//除了自身别的全部隐藏

$("#i_focus_tx li").hide()

$("#i_focus_tx li").eq(pictureID).show()

},

function () {

//当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步

i_curID = $(this).attr("id")//取当前元素的ID

pictureID = i_curID.substring(i_curID.length - 1)//取最后一个字符

i_curIndex = pictureID

autoScroll()

})

//自动滚动

function autoScroll() {

var myNubli = $("#i_focus_btn li").size()

if (myNubli >1) {

$("#i_focus_btn li:last").removeClass("i_cur")

$("#i_focus_tx li:last").hide()

$("#i_focus_btn li").eq(i_curIndex).addClass("i_cur")

$("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur")

$("#i_focus_tx li").eq(i_curIndex).show()

$("#i_focus_tx li").eq(i_curIndex - 1).hide()

$("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow")

$("#i_focus_piclist li").eq(i_curIndex - 1).hide()

i_curIndex++

i_curIndex = i_curIndex >= myNubli ? 0 : i_curIndex

beauBeauSlide = setTimeout(autoScroll, 5000)

}

}

function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动

{

clearTimeout(beauBeauSlide)

}

})

//第二个渐隐幻灯开始

var defaultOpts = {

interval: 3000,

fadeInTime: 800,

fadeOutTime: 500

}

var _titles = $("ul.slide-txt li")

var _titles_bg = $("ul.op li")

var _bodies = $("ul.slide-pic li")

var _count = _titles.length

var _current = 0

var _intervalID = null

var stop = function () {

window.clearInterval(_intervalID)

}

var slide = function (opts) {

if (opts) {

_current = opts.current || 0

} else {

_current = (_current >= (_count - 1)) ? 0 : (++_current)

}

_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,

function () {

_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime)

_bodies.removeClass("cur").eq(_current).addClass("cur")

})

_titles.removeClass("cur").eq(_current).addClass("cur")

_titles_bg.removeClass("cur").eq(_current).addClass("cur")

}//endof slide

var go = function () {

stop()

_intervalID = window.setInterval(function () {

slide()

},

defaultOpts.interval)

}//endof go

var itemMouseOver = function (target, items) {

stop()

var i = $.inArray(target, items)

slide({

current: i

})

}//endof itemMouseOver

_titles.hover(function () {

if ($(this).attr('class') != 'cur') {

itemMouseOver(this, _titles)

} else {

stop()

}

},

go)

//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg)}, go)

_bodies.hover(stop, go)

go()

var slideX = {

_this: $('.catalog .imgbox'),

_btnLeft: $('.catalog .left'),

_btnRight: $('.catalog .right'),

init: function () {

slideX._btnLeft.click(slideX.slideLeft)

slideX._btnRight.click(slideX.slideRight)

},

slideLeft: function () {

slideX._btnLeft.unbind('click', slideX.slideLeft)

for (i = 0i <2i++) {

slideX._this.find('li:last').prependTo(slideX._this)

}

slideX._this.css('marginLeft', -224)

slideX._this.animate({

'marginLeft': 0

},

500,

function () {

slideX._btnLeft.bind('click', slideX.slideLeft)

})

return false

},

slideRight: function () {

slideX._btnRight.unbind('click', slideX.slideRight)

slideX._this.animate({

'marginLeft': -224

},

500,

function () {

slideX._this.css('marginLeft', '0')

for (i = 0i <2i++) {

slideX._this.find('li:first').appendTo(slideX._this)

}

slideX._btnRight.bind('click', slideX.slideRight)

})

return false

}

}

$(document).ready(function () {

slideX.init()

})

$(document).ready(function () {

var newTime = new Date()

var newTime = newTime.getTime()

var $imgTmp = $('#topromotion').find('img:first')

var osrc = $imgTmp.attr('src')

$imgTmp.attr('src', osrc + '?' + newTime)

})

希望对你有帮助！