jquery实现左右轮播切换效果

2024-07-29 11:46:52

本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码，供大家参考，具体内容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="css/banner.css" rel="external nofollow" >
</head>
<body>
 <div id="banner">
  <!-- 图片区域 -->
  <ul class="banner-img"
   data-load="bannerImgs">
   <!--
   <li>
    <a href="${product-details.html?lid=28}" rel="external nofollow" >
    <img src="${img/index/banner1.png}">
    </a>
   </li>
   -->
   <li style="left:50%;">
   <img src="img/index/banner1.png">
   </li>
  </ul>
  <!--左右方向按钮-->
  <a href="javascript:;" class="ck-slide ck-left" data-move="left"></a>
  <a href="javascript:;" class="ck-slide ck-right" data-move="right"></a>
  <!--导航小圆点-->
  <ul class="indicators" data-load="bannerInds">
  <!-- <li></li> -->
  </ul>
 </div> 

 <script src="js/jquery.min.js"></script>
 <script src="js/banner.js"></script>
</body>
</html>

css：

/*banner部分*/
#banner{
 width:960px;
 height:384px;
 overflow:hidden;
 position:relative;
}
#banner ul.banner-img{
 position:absolute; left:0;
}
#banner ul.banner-img>li{float:left;width:960px;}
#banner ul.banner-img img{
 width:960px;
 height:384px;
}
#banner a.ck-slide{
 position:absolute;
 top:150px;
 width:35px;
 height:70px;
 border-radius:3px;
 background:#000;
 opacity:0.15;
 transition:all .3s linear;
}
#banner a.ck-left{
 left:40px;
 background: #000 url(../img/index/arrow-left.png) no-repeat center center;
}
#banner a.ck-right{
 right:0px;
 background:#000 url(../img/index/arrow-right.png) no-repeat center center;
}
#banner a.ck-slide:hover{
 opacity:0.3;
}
#banner ul.indicators{
 position:absolute;
 bottom:10px;
 left:50%;
 margin-left:-34px;
 list-style: none;
}
#banner ul.indicators li{
 width:12px;
 height:12px;
 background:#fff;
 border-radius:50%;
 float:left;
 margin-right:5px;
 transition:all .2s linear;
}
#banner ul.indicators li:hover,#banner ul.indicators li.hover{
 cursor:pointer;
 background-color:#0AA1ED;
}

js：

$(()=>{
 $.ajax({
  type:"get",
  url:"php/xz.php",
  dataType:"json"
 }).then(data=>{
  console.log(data);
  var html="";
  const LIWIDTH=960;
  for(var item of data){
   html+=`<li>
    <a href="${item.href}" rel="external nofollow" title="${item.title}">
    <img src="${item.img}">
    </a>
   </li>`;
  }
  html+=`<li>
    <a href="${data[0].href}" rel="external nofollow" title="${data[0].title}">
    <img src="${data[0].img}">
    </a>
   </li>`;
  console.log(html);
  var $ulImg=$(".banner-img");
  $ulImg.html(html).css("width",LIWIDTH*(data.length+1)); 

  var $ids=$(".indicators"); 

  $ids.html("<li></li>".repeat(data.length)).children().first().addClass("hover"); 

  const WAIT=2000,DURA=1000;
  var moved=0,timer=null;
  function move(dir=1){
   moved+=dir;
   console.log("moved="+moved); 

   $ulImg.animate({
    left:-LIWIDTH*moved
   },DURA,()=>{
    if(moved%data.length==0){
     moved=0;
     $ulImg.css("left",0);
    }
    $ids.children(`li:eq(${moved})`).addClass("hover").siblings().removeClass("hover");
   })
  } 

  var timer=setInterval(move,WAIT); 

  $('#banner').hover(
   ()=>{ //这个是什么？
    clearInterval(timer),
    timer=null;
   },
   ()=>{
    timer=setInterval(move,WAIT);
   }
  ); 

  $("[data-move=right]").click(()=>{
   //防止动画叠加
   /*clearInterval(timer);
   timer=null;
   move();
   timer=setInterval(move,WAIT);*/
   if(!$ulImg.is(":animated"))
    move();
  }); 

  $("[data-move=left]").click(()=>{
   if(!$ulImg.is(":animated")){
    if(moved==0){
     $ulImg.css("left",-LIWIDTH*data.length);
     moved=data.length;
    }
    move(-1);
   }
  }); 

  $ids.on("mouseover","li",function(){
   var $li=$(this);
   var i=$li.index();
   moved=i;
   $ulImg.stop(true).animate({
    left:-LIWIDTH*moved
   },DURA,()=>{
    $ids.children(":eq("+i+")")
     .addClass("hover")
     .siblings().removeClass("hover");
   })
  });
 })
})

php：

<?php 

 header("Content-type:application/json");
 require_once("init.php"); 

 $sql="SELECT img,title,href FROM xz_index_carousel";
 $result=mysqli_query($conn,$sql);
 echo json_encode(mysqli_fetch_all($result,1));
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery实现经典的网页3D轮播图封装功能【附源码下载】

本文实例讲述了jQuery实现的网页3D轮播图封装功能.分享给大家供大家参考,具体如下: 网页伪3D轮播图,其实就是轮播图旋转木马效果.其实在jquery插件库也有很多旋转木马的插件,但是博主封装的这个新的插件比起以上的都适应性更好.其适应性好表现在:调用灵活性高用法更简单,css样式都封装好了基本不用写,在body里面写ul>li>img标签即可,可设置参数多,甚至不同图片的大小都可以自适应轮播,各个浏览器兼容性好(包括IE,虽然我没测过IE8以下浏览器,不过IE8以上都没问题),好了,以下
jquery带有索引按钮且自动轮播切换特效代码分享

本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr
jQuery实现的3D版图片轮播示例【滑动轮播】

本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好描述啊!!) 贴代码比较方便... <div class="banner"> <div class="banner_li left"> <img src="2.jpg" /> </div> <di
jQuery图片轮播滚动切换代码分享

本文实例讲述了jQuery图片轮播滚动切换特效.分享给大家供大家参考.具体如下: jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码,实现过程很简单. 运行效果图:-------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" type="text/css" h
酷炫jQuery全屏3D焦点图动画效果

这又是一款很不错的jQuery焦点图动画,它的特点是整个焦点图基本是全屏显示的,非常大气,而且图片的倾斜也给整个焦点图3D立体的视觉效果,而且焦点图的图片切换非常流畅,相当实用. HTML代码: <div class="wrapper"> </div> <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"&
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. 下载源码 Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入jquery库文件
jQuery插件slicebox实现3D动画图片轮播切换特效

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&
基于jquery的图片轮播 tab切换组件

目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn
基于Jquery和html5实现炫酷的3D焦点图动画

这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便.如果你需要在网站中展示产品图片,那么这款焦点图插件非常适合你. 在线演示源码下载 HTML代码 <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#"><img src=&quo
jQuery插件实现带圆点的焦点图片轮播切换

这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <

jquery实现左右轮播切换效果

相关推荐

随机推荐