jquery实现图片轮播器

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

一、轮播器

1、HTML框架

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>图片轮播器</title>
  <link rel="stylesheet" type="text/css" href="slider.css" rel="external nofollow" />
  <script src="/UploadFiles/2021-04-02/Jquery.js">

2、css的样式




/*清除列表前默认黑点*/
*{
 margin: 0;
 padding: 0;
}
img{
 border:0;
}
ol, ul ,li{list-style: none;} 
body{
 margin: 50px;
}
.wrap{
 width: 500px;/*一张图片的高和宽*/
 height: 350px;
 border: 1px solid red;
 position: relative;/*以这一张图的边框为基准位置*/
 overflow: hidden;/* 将超过这个长宽高的部分隐藏 */
}
.wrap ul{
 width: 2000px;/*列表的行是四张图片的宽度*/
 position: absolute;/* 防止图片溢出 */
 left: 0;
 top: 0;
}
.wrap ul li {
 float: left;/* 将四张图片紧挨着横着排列 */
 width: 500px;
}
.wrap ol{
 position: absolute;
 bottom: 10px;
 right:10px;
}
.wrap ol li{
 float: left;/* 达到 横着排列 的目的*/
 width: 16px;
 height: 16px;
 line-height: 16px;
 text-align: center;/* 字体在列元素中举重显示 */
 color: #fff;
 background: #000;
 border: 1px solid yellow;
 margin-right: 3px;/* 列与列之间的距离 */
 cursor: pointer;
}
.wrap ol li.current{
 background: #fff;
 color:#000;
}
.wrap .introduce{
 width:400px ;
 height: 30px;
 line-height: 30px;
background: rgba(0, 0, 0, 0.5);
/* 达到透明显示的作用；或者用“opacity:0.5 ;
 filter: alpha(opacity = 50);” */
 color: #fff;
 position: absolute;
 bottom: 0;
 left: 0;
}



3、JS控制




$(document).ready(function(){
 var oul = $('.wrap ul');  //获取 行；
 var ali = $('.wrap ul li'); //获取 列；
 var numLi = $('.wrap ol li');//获取数字的 列；
 var aliWidth = $('.wrap ul li').eq(0).width(); //获取单张图片的宽度；
 var _now = 0;//这个控制数字样式的计数器
 var _now2 = 0;//这个是控制图片运动距离的计数器
 var timeId; //定时器的开关
 var aimg = $('.wrap ul img');//获取wrap中img元素
 var op = $('.wrap p')  //获取wrap中p元素
 
 
 numLi.click(function() {       //鼠标点击触发的函数；
  var index = $(this).index();  //如果点击第一张图片，index=0；
  _now = index;      
  //不管_now还是_now2都要和点击时index同步；
  _now2 = index;
  var imgAlt = aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值
  op.html(imgAlt);      //并将atl值显示
 
  $(this).addClass('current').siblings().removeClass();
  //数字样式 的 增和删；
  oul.animate({'left':-aliWidth*index},500);   
  //图片的移动，行元素的左侧距离wrap的左侧-500*index
 });
 
 
 function slider(){
  if (_now==numLi.size()-1) {  //当滚动到第四张图片的时候
    ali.eq(0).css({   //通过定位的方法将第一张移到最后一张；
     'position':'relative',
     'left':oul.width()
    });
   _now=0;
  }
  else{
   _now++;        //如果没达到第四张，那就将_new+1；
  }
  _now2++;        //图片控制计数器 +1；
  numLi.eq(_now).addClass('current').siblings().removeClass();       //数字样式 的 增和删；
  var imgAlt = aimg.eq(_now).attr('alt'); //获取 _now时刻的的alt值
  op.html(imgAlt);       //并将atl值显示
  oul.animate({'left':-aliWidth*_now2},500,function(){   
  //图片的移动，行元素的左侧距离wrap的左侧-500*now2
   if (_now==0) {
    ali.eq(0).css('position','static');
    oul.css('left',0);
    _now2=0;
   }
  });
 }
 
timeId = setInterval(slider,1500);   
//每1500ms，自动切换图片
 //鼠标点击图片则停止计时器，停止“自动切换图片”；离开则继续定时器切换图片
 // $('.wrap').mouseover(function(event) {
 //  clearInterval(timeId);
 // });
 
 // $('.wrap').mouseover(function(event) {
 //  timeId = setInterval(slider,1500);
 // });
 
 $('.wrap').hover(function() {    
  clearInterval(timeId);
 
 }, function() {
  timeId = setInterval(slider,1500);
  
 });
});



*重要函数


1、获取各个标签值并显示




var imgAlt = aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值
  op.html(imgAlt);    //并将atl值显示


2、改变数字样式




 $(this).addClass('current').siblings().removeClass();
  //数字样式 的 增和删；




3、滚动图片




 oul.animate({'left':-aliWidth*index},500);   
 //图片的移动，行元素的左侧距离wrap的左侧-500*index




*注意点


1、同步


_now = index;

 //不管_now还是_now2都要和点击时index同步；

 //index可能在点击鼠标之后变成3,；松开鼠标后我们希望_now变成从3变成0，但是因为setInterval之后_now加1，_now其实还是从0变成1；所以需要同步_now和index；


2、计数器


_now2的作用是防止父元素在第一张留出空白图片；数字定时器和图片运动控制定时器是不同步的




var _now = 0;//这个控制数字样式的计数器
var _now2 = 0;//这个是控制图片运动距离的计数器




3、去relative属性




if (_now==0) {
    ali.eq(0).css('position','static');//去relative属性
    oul.css('left',0);//当去完relative之后，要还原ul的“left”值为0；
    _now2=0;




4、去属性的时机


Oul.animate({css属性的设置},500,function())其中function就是在500ms执行完之后的操作；




oul.animate({'left':-aliWidth*_now2},500,function(){     
  //图片的移动，行元素的左侧距离wrap的左侧-500*now2
  //根据一组css执行属性动画   
   if (_now==0) {
    ali.eq(0).css('position','static');
    oul.css('left',0);
    _now2=0; //当_now为0的时候，_now2也应该还原回去为0；
   }
  });




*难点


首先，要学会获取元素值；

其次，了解几种函数；

再则，变量的灵活使用，达到了解变量每时每刻的值；

最后，定时器的控制是最难的；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

jquery,轮播器

标签：

jquery,轮播器

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“jquery实现图片轮播器”

暂无jquery实现图片轮播器的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

jquery实现图片轮播器

jquery,轮播器

angular+webpack2实战例子

详解用node编写自己的cli工具

评论“jquery实现图片轮播器”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接