首页>>Jquery文字>>响应式全屏焦点图(2024-02-28)

响应式全屏焦点图

 响应式全屏，支持手动和自动滚动，文字可以自定义

响应式全屏焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="carousel">  
  2.             <div class="carousel-item active"  
  3.                 style="background-image: url('../demo1.jpg'); background-size: 100% auto;">  
  4.                 <div class="carousel-text">Picture 1</div>  
  5.             </div>  
  6.             <div class="carousel-item" style="background-image: url('../freejs.jpg'); background-size: 100% auto;">  
  7.                 <div class="carousel-text">Picture 2</div>  
  8.             </div>  
  9.             <div class="carousel-item" style="background-image: url('../demo2.jpg'); background-size: 100% auto;">  
  10.                 <div class="carousel-text">Picture 3</div>  
  11.             </div>  
  12.             <div class="carousel-item" style="background-image: url('../freejs.jpg'); background-size: 100% auto;">  
  13.                 <div class="carousel-text">Picture 4</div>  
  14.             </div>  
  15.             <div class="carousel-nav">  
  16.                 <button class="active"></button>  
  17.                 <button></button>  
  18.                 <button></button>  
  19.                 <button></button>  
  20.             </div>  
  21.         </div>  

 

JavaScript Code
  1. $(document).ready(function() {  
  2.   // 获取轮播项和指示点  
  3.   var items = $('.carousel-item');  
  4.   var points = $('.carousel-nav button');  
  5.   
  6.   // 定义轮播函数  
  7.   function carousel() {  
  8.     // 获取当前轮播项  
  9.     var activeItem = $('.carousel-item.active');  
  10.     // 获取下一轮播项  
  11.     var nextItem = activeItem.next();  
  12.   
  13.     // 如果下一轮播项不存在，则从头开始轮播  
  14.     if (!nextItem.length) {  
  15.       nextItem = items.first();  
  16.     }  
  17.   
  18.     // 切换轮播项和指示点样式  
  19.     activeItem.removeClass('active');  
  20.     nextItem.addClass('active');  
  21.     points.eq(nextItem.index()).addClass('active').siblings().removeClass('active');  
  22.   }  
  23.   
  24.   // 定义定时器，每隔5秒切换一次轮播项  
  25.   var timer = setInterval(carousel, 2000);  
  26.   
  27.   // 当鼠标悬停在轮播容器上时，清除定时器  
  28.   $('.carousel').hover(function() {  
  29.     clearInterval(timer);  
  30.   }, function() {  
  31.     timer = setInterval(carousel, 3000);  
  32.   });  
  33.   
  34.   // 当点击指示点时，跳转至相应的轮播项  
  35.   points.click(function() {  
  36.     var index = $(this).index();  
  37.     var activeItem = $('.carousel-item.active');  
  38.     var nextItem = items.eq(index);  
  39.   
  40.     // 如果当前轮播项和下一个轮播项相同，则不执行任何操作  
  41.     if (activeItem.index() == nextItem.index()) {  
  42.       return;  
  43.     }  
  44.   
  45.     // 切换轮播项和指示点样式  
  46.     activeItem.removeClass('active');  
  47.     nextItem.addClass('active');  
  48.     points.eq(nextItem.index()).addClass('active').siblings().removeClass('active');  
  49.   });  
  50. });  

 


原文地址:http://www.freejs.net/article_jquerywenzi_942.html