jquery---------轮播图的实现(稍为复杂)

最新推荐文章于 2022-05-17 17:06:56 发布

一心不安

最新推荐文章于 2022-05-17 17:06:56 发布

阅读量328

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_42700595/article/details/84842623

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

/**
* 功能说明:
* 1.图片自动向左播放，但是当鼠标过轮播区时暂停播放，放开则继续；
* 2.点击左侧箭头显示上一张图；
* 3.点击右侧箭头显示下一张图；
* 4.当鼠标滑到指示点的时候，显示对应的一张图；
*
*/

--------jquery---------------------
$(function (){
var $container = $('.banner-box');//轮播展示区
var $pics = $(".pics-list");//图片
var $points = $('.points-list li');//指示点组
var $toleft = $('.toleft');//上一页
var $toright = $('.toright');//下一页
var PAGE_WIDTH = 1210; //一页的宽度
var TIME = 400; // 翻页的持续时间
var imgCount = $points.length;//指示点总数===图片总数
var curIndex = 0; //当前下标
/**
* 1.
* --图片自动向左播放
* --当鼠标过轮播区时暂停播放
* --放开则继续
*/
//滑到最后一张则从第一张开始
var move=function () {
curIndex = (curIndex < imgCount - 1) ? (++curIndex) : 0;
//调用变换处理函数
changeTo(curIndex);
};
// 定时器自动变换3秒每次
var autoChange = setInterval(move, 3000);

//当鼠标悬停在轮播区域，自动轮播暂停
$container.hover(function () {
// 清除定时器
clearInterval(autoChange)
}, function () {
autoChange = setInterval(move, 3000);
});

// 点击右侧箭头显示下一张图
$toright.click(function () {
move()
});
//点击左侧箭头显示上一张图
$toleft.click(function () {
curIndex = (curIndex > 0) ? (--curIndex) : (imgCount - 1);
changeTo(curIndex);
});
//点击指示点图标切换到对应的页
$points.mouseover(function () {
curIndex=$(this).index();
changeTo(curIndex);
});
/**
* 变换函数 changeTo(@param)
* @param num 切换目标索引
*/
function changeTo(num) {
var goLeft = (- num * PAGE_WIDTH)+"px";//偏移的值
$pics.animate({left:goLeft}, TIME);//滚动到指定图片
$points.removeClass("active").eq(num).addClass("active");//指示点锁定
}
})

------------------html-----------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link href="css/lunbotu.css" rel="stylesheet" />
       
       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
       <script type="text/javascript" src="js/jquery_lunbotu.js"></script>
   </head>
   <body>
       <div class="banner-box">
           <div class="toleft"></div>
           <div class="toright"></div>

           <ul class="pics-list">
               <li><a href="#"><img src="img/banner/1.jpg" /></a></li>
               <li><img src="img/banner/2.jpg" /></li>
               <li><img src="img/banner/3.jpg" /></li>
               <li><img src="img/banner/4.jpg" /></li>
           </ul>
           <ul class="points-list">
               <li class="active">●</li>
               <li>●</li>
               <li>●</li>
               <li>●</li>
           </ul>
       </div>
   </body>
</html>

-----------------------css---------------------------

.banner-box{
   width: 1210px;
   height: 395px;
   position: absolute;
   overflow: hidden;
}
ul li{
   list-style: none;
}
/*轮播图*/
.pics-list{
   width: 6050px;
   height: 395px;
   position: absolute;
   left: 1210;
}
.pics-list li{
   float: left;
   width: 1210px;
}
/*轮播点*/
.points-list{
   position: absolute;
   left: 33%;
   bottom: 10px;
}
.points-list li{
   float: left;
   width: 100px;
   margin: auto;
   color: #999;
   opacity: 0.9;
   font-size: 36px;
}
.points-list li:active , .points-list li:hover{
   color: #ddd;
}
/*左右箭头*/
.toleft , .toright{
   width: 72px;
   height: 72px;
   font-size: 30px;
}
.toleft{
   float: left;
   position: relative;
   background: url(../img/icon/banner_arrow.png) no-repeat;
   z-index: 10;
   top: 180px;
}
.toleft:hover{
   background: url(../img/icon/banner_arrow.png) no-repeat 0px -72px;
}
.toright{
   float: right;
   right: 0px;
   position: relative;
   background: url(../img/icon/banner_arrow.png) no-repeat 0px -144px;
   z-index: 10;
   top: 180px;
}
.toright:hover{
   background: url(../img/icon/banner_arrow.png) no-repeat 0px -216px;
}

一心不安

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery---------轮播图的实现(稍为复杂)

/** * 功能说明: * 1.图片自动向左播放，但是当鼠标过轮播区时暂停播放，放开则继续； * 2.点击左侧箭头显示上一张图； * 3.点击右侧箭头显示下一张图； * 4.当鼠标滑到指示点的时候，显示对应的一张图； * */ --------jquery---------------------$(function (){ var $container = ...
复制链接

扫一扫

专栏目录