jquery实现图片轮播器

2019-11-19 16:31:25

字体：大中小

来源：转载

供稿：网友

一、轮播器

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="Jquery.js"></script>  <script src="slider.js"></script> </head> <body> <div class="wrap"> <!--快捷键 .wrap>(ul>li*4>img[src=$.jpg])+ol>li*4 -->  <ul>   <li><img src="1.jpg" alt="11" /></li>   <li><img src="2.jpg" alt="22" /></li>   <li><img src="3.jpg" alt="33" /></li>   <li><img src="4.jpg" alt="44" /></li>  </ul>  <ol>   <li class="current">1</li>   <li>2</li>   <li>3</li>   <li>4</li>  </ol>  <p class="introduce"></p> </div> </body></html>

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；   }  });

*难点

首先，要学会获取元素值；
其次，了解几种函数；
再则，变量的灵活使用，达到了解变量每时每刻的值；
最后，定时器的控制是最难的；

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

上一篇：angular+webpack2实战例子

下一篇：详解用node编写自己的cli工具