jquery聚焦轮播图片

最新推荐文章于 2021-06-10 13:59:06 发布

weixin_30872733

最新推荐文章于 2021-06-10 13:59:06 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/firstflying/p/8567677.html

版权

jquery聚焦轮播图片（原理：属性display->显示与隐藏）

最终显示效果：

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery聚焦轮播图片（原理：属性display->显示与隐藏）</title>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/carousel.js"></script>
        <link rel="stylesheet" href="css/carousel.css" />
    </head>
    <body>
        <div id="igs">
            <!--显示图片-->
            <a class="ig" href="#"><img src="img/carousel1.jpg" /></a>
            <a class="ig" href="#"><img src="img/carousel2.jpg"  /></a>
            <a class="ig" href="#"><img src="img/carousel3.jpg"  /></a>
            <a class="ig" href="#"><img src="img/carousel4.jpg"  /></a>
            <a class="ig" href="#"><img src="img/carousel5.jpg"  /></a>
            <!--左右键-->
            <div class="btn btn1"><</div>
              <div class="btn btn2">></div>
            <!--小圆点-->
            <ul id="tabs">
                <li class="tab"></li>
                <li class="tab"></li>
                <li class="tab"></li>
                <li class="tab"></li>
                <li class="tab"></li>
            </ul>
        </div>
    </body>
</html>

CSS代码：

* {
  margin: 0;
  padding: 0;
}
 
#igs {
  margin: 10px auto;
  width: 700px;
  height: 320px;
  position: relative;
}
 
.ig {
  position: absolute;
}
 
#tabs {
  position: absolute;
  list-style: none;
  background-color: rgba(255,255,255,.5);
  left: 300px;
  bottom: 10px;
  border-radius: 10px;
  padding: 5px 0 5px 5px;
}
 
.tab{
  float: left;
  text-align: center;
  line-height: 10px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  overflow: hidden;
  margin-right: 10px;
  border-radius: 100%;
  background-color: #FFCF3F;
}
 
.btn{
  position: absolute;
  color: #fff;
  top: 110px;
  width: 40px;
  height: 100px;
  background-color: rgba(255,255,255,.3);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  margin: 0 5px;
}
 
.btn2{
  position: absolute;
  right: 0px;
}
 
.btn:hover{
  background-color: rgba(0,0,0,.7);
}

.ig img{
    width:100%;
}

javaScript代码：

//定义全局变量和定时器
var i = 0 ;
var timer;
 
$(document).ready(function(){
  //用jquery方法设置第一张图片显示，其余隐藏
  $('.ig').eq(0).show().siblings('.ig').hide();
   
  //调用showTime()函数（轮播函数）
  showTime();
   
  //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
  $('.tab').hover(function(){
    //获取当前i的值，并显示，同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });
   
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
   
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
   
});
 
//创建一个showTime函数
function showTime(){
  //定时器
  timer = setInterval(function(){
    //调用一个Show()函数
    Show();
    i++;
    //当图片是最后一张的后面时，设置图片为第一张
    if(i==5){
      i=0;
    }
  },2000);
}
//创建一个Show函数
function Show(){
  //在这里可以用其他jquery的动画
  $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
   
  //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
  $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
}

转载于:https://www.cnblogs.com/firstflying/p/8567677.html

weixin_30872733

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery聚焦轮播图片

jquery聚焦轮播图片（原理：属性display->显示与隐藏）最终显示效果：HTML代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jquery聚焦轮播图片（原理：属性display...
复制链接

扫一扫