码迷,mamicode.com
首页 > Web开发 > 详细

jquery动画轮播

时间:2016-01-28 18:45:41      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

哎不多说了....最近过年特忙..所以都忘记了..现在才补起。

还是老样子

1、CSS

<style>
#banner .scroll img {width: 750px;height: 500px;}
#banner .before img{width: 32px;height: 63px;}
#banner .bannerBut ul li:hover {cursor: pointer;}

@charset "utf-8";
*{margin:0px;padding:0px;font-family:"微软雅黑";font-size:12px; text-decoration:none;list-style-type:none;}
img{border:0px;}

#banner{width:100%;height:500px;overflow:hidden;}
#banner .bannerCon{width:750px;height:500px;background:blue;margin:0px auto;position:relative;}
#banner .bannerCon .before{width:600px;height:500px;background:rgba(0,0,0,0.8);position:absolute;left:-600px;bottom:0px;z-index:333;}
#banner .bannerCon .before img{position:absolute;right:20px;top:200px;cursor:pointer;}
#banner .bannerCon .after{width:600px;height:500px;background:rgba(0,0,0,0.8);position:absolute;right:-600px;bottom:0px;z-index:333;}
#banner .bannerCon .after img{position:absolute;left:20px;top:200px;cursor:pointer;}
#banner .bannerCon .scroll{width:2000%;height:500px;position:relative;left:-750px;}
#banner .bannerCon .scroll img{width:750px;height:500px;float:left;}
#banner .bannerBut{width:200px;height:40px;position:absolute;left:275px;bottom:0px;}
#banner .bannerBut ul li{width:7px;height:7px;border-radius:7px;background:#666;margin:5px 7px;float:left;}
#banner .bannerBut ul li.hover{background:#c6171e;}

</style>

2、html

<div id="banner">
  <div class="bannerCon">
    <div class="before">
      <img src="images/1.png" />
    </div>
    <div class="after">
      <img src="images/2.png" />
    </div>
    <div class="scroll">
      <img src=‘images/9.jpg‘ />
      <img src=‘images/1.jpg‘ />
      <img src=‘images/2.jpg‘ />
      <img src=‘images/3.jpg‘ />
      <img src=‘images/4.jpg‘ />
      <img src=‘images/5.jpg‘ />
      <img src=‘images/6.jpg‘ />
      <img src=‘images/7.jpg‘ />
      <img src=‘images/8.jpg‘ />
      <img src=‘images/9.jpg‘ />
      <img src=‘images/1.jpg‘ />
    </div>
    <div class="bannerBut">
      <ul>
        <li style="display:none"></li>
        <li class="hover"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li style="display:none"></li>
      </ul>
    </div>
  </div>
</div>

3 、js

$(function(){
  var _index1=1;
  var img =$(".scroll");
  var timers = setInterval(time,2000);
  /* 自动循环 */
  function time(){
    _index1++;
    if(_index1 > 9) {
      _index1 = 1;
      $(‘.scroll‘).css(‘left‘,‘0px‘);
      animated();
    }else{
      animated();
    }
  }
  /*移入停止 移出继续动画*/
  $(‘#banner .scroll img‘).mouseover(function(){
    clearInterval(timers);
  }).mouseout(function(){
    timers = setInterval(time,2000);
  });
  /* 下标移入时切换 */
  $(‘.bannerBut ul li‘).mouseover(function() {
    $(this).addClass(‘hover‘).siblings(‘li‘).removeClass(‘hover‘);
    var _index1=$(this).index();
    $(‘.bannerCon .scroll‘).stop().animate({left:-_index1*750},500);
  });
  /* 动画 */
  function animated() {
    $(‘.bannerBut ul li‘).eq(_index1).addClass(‘hover‘).siblings(‘li‘).removeClass(‘hover‘);
    $(‘.scroll‘).animate({left:-_index1*750},500);
  }
  /* right */
  $(‘.after img‘).click(function() {
    if(!$(img).is(":animated")) {
      _index1++;
      if(_index1 > 9) {
        _index1 = 1;
        $(‘.scroll‘).css(‘left‘,‘0px‘);
        animated();
      }else{
        animated();
      }
    }
  });
  /* left */
  $(‘.before img‘).click(function() {
    if(!$(img).is(":animated")) {
      _index1--;
      if(_index1 < 1) {
        _index1 = 9;
        $(‘.scroll‘).css(‘left‘,‘-7500px‘);
        animated();
      }else {
        animated();
      }
    }
  });
});

 这次写的匆忙有什么不好的请提出来.有什么兼容性问题的请麻烦说说 我好修改 谢谢了各位..

jquery动画轮播

标签:

原文地址:http://www.cnblogs.com/ice-ice/p/5167067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!