信鸽网

Jquery实现的简单轮播效果【附实例】

  作者：bea

Jquery实现的简单轮播效果【附实例】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-1.11.3.js"><

Jquery实现的简单轮播效果【附实例】




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <link rel="stylesheet" href="css/index.css">

  <script src="js/jquery-1.11.3.js"></script>

  <script src="js/baner.js"></script>

</head>

<body>

  <div class="main">

    <a href=""><img src="img/baner-1.jpg" alt=""></a>

    <a href=""><img src="img/baner-2.jpg" alt=""></a>

    <a href=""><img src="img/baner-3.jpg" alt=""></a>

    <a href=""><img src="img/baner-4.jpg" alt=""></a>

    <ul>

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

    </ul>

  </div>

</body>

</html>




/*************初始化************/

*{margin:0;padding: 0;border: none;list-style: none}

/*********轮播左右居中*************/

.main{

  width: 1024px;

  height: 320px;

  margin: 0 auto;

  position: relative;

}

.main a{

  position: absolute;

}

.main a img{

  width: 100%;

  height: 320px;



}

/***********左边小图标************/

.main ul li.selected{

  background: #f97157;

}

.main ul{

  position: absolute;

  z-index: 999;

  top: 120px;

  left: 20px;

}

.main ul li{

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: #909090;

  cursor: pointer;

  text-align: center;

}




/**

 * Created by Administrator on 16-3-12.

 */

/***********定义全局变量和定时器*************/

var t=null;



var n=0;/**动态变化**/

var count;

/************************/

$(function(){

  count=$(".main a").length;/*给动态变化的n备用*/

  /**让不是轮播中的第一个隐藏**/

  $(".main a:not(:first-child)").hide();

  /*点击当前li当前li对应的图片显示出来*/

  $(".main ul li").click(function(){

    var index=$(this).text()-1;

    n=index;

    console.log(n);

    /*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/

    $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);

    /*******聚焦，给当前li追加类，改变背景色*******/

    $(this).addClass("selected");

    /****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/

    $(this).siblings().removeClass("selected");

  });

  /***定义定时器3秒执行一次****/

  t=setInterval("autoMove()",3000);

  /****当鼠标进入时候定时器停止，移除时候定时器开启****/

  $(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});

});

/***定义自动轮播函数****/

function autoMove(){

  if(n>=(count-1)){

    n=0;

  }else{

   ++n;

  }

  /*****给li执行匹配的事件*****/

  $(".main ul li").eq(n).trigger("click");

}


以上这篇Jquery实现的简单轮播效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: