Simple carousel effect implemented by Jquery [with examples]

Home

Web Front-end

JS Tutorial

Simple carousel effect implemented by Jquery [with examples]_jquery

May 16, 2016 pm 03:04 PM

jquery Carousel

Simple carousel effect implemented by Jquery [with examples]

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/index.css"&gt;
  &lt;script src="js/jquery-1.11.3.js"&gt;&lt;/script&gt;
  &lt;script src="js/baner.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="main"&gt;
    &lt;a href=""&gt;&lt;img src="img/baner-1.jpg" alt=""&gt;&lt;/a&gt;
    &lt;a href=""&gt;&lt;img src="img/baner-2.jpg" alt=""&gt;&lt;/a&gt;
    &lt;a href=""&gt;&lt;img src="img/baner-3.jpg" alt=""&gt;&lt;/a&gt;
    &lt;a href=""&gt;&lt;img src="img/baner-4.jpg" alt=""&gt;&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

/*************初始化************/
*{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;
}

Copy after login

/**
 * 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&gt;=(count-1)){
    n=0;
  }else{
   ++n;
  }
  /*****给li执行匹配的事件*****/
  $(".main ul li").eq(n).trigger("click");
}

Copy after login

The above simple carousel effect implemented by Jquery [with examples] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn