bob体育官方平台
jquery达成图片轮播器,jquery实现图片
  图片轮播器               1 2 3 4    

/*清除列表前默认黑点*/*{ 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;/* 达到透明显示的作用;或者用“opacity:0.5 ; filter: alpha;” */ color: #fff; position: absolute; bottom: 0; left: 0;}

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

jquery实现图片轮播器,jquery实现图片

一、轮播器

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

*难点

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

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

一、轮播器 1、HTML框架 !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" title图片轮播器/title link rel="styleshee...

本文实例为大家分享了JavaScript实现图片轮播组件的使用方法,供大家参考,具体内容如下

*重要函数

效果:

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

自动循环播放图片,下方有按钮可以切换到对应图片。添加一个动画来实现图片切换。鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片。鼠标移开图片区域时,从当前位置继续轮播。提供一个接口,可以设置轮播方向,是否循环,间隔时间。点击查看demo

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

 $.addClass.removeClass(); //数字样式 的 增和删;

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

对HTML、CSS的要求:

*注意点

*必须是两个盒子嵌套,最里面的盒子需要有一个ul,图片需要被包含在li里。*可以更改类名,同时将css文件中的相应类名替换即可。配置组件时传入正确的DOM元素即可。*不限制图片宽度和数量,在css文件中更改数值即可。

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

/*需要更改的值*/.carousel img{ width: 600px; height: 400px;}.carousel,.carousel-box { width: 600px; /*单张图片宽度*/ height: 400px; /*单张图片高度*/}.carousel ul{ width: 3600px; /*单张图片宽度x图片数量*/}

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

原理:

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

将所有图片横向排列,最外层容器和包裹容器设置overflow:hidden。最外层容器用于按钮和箭头的定位。利用包裹容器的scrollLeft属性控制显示哪张图片。

3、去relative属性

思路:

if .css;//去relative属性 oul.css;//当去完relative之后,要还原ul的“left”值为0; _now2=0;

想要实现这些功能,应该有以下一些方法:

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

1.图片切换函数。接受一个参数,表示滚动方向。调用缓动函数切换图片。调用切换按钮图标函数点亮相应的按钮。

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

4.初始化函数。用于绑定事件,创建按钮和箭头,初始化最初位置。

*难点

9.停止函数。用于停止轮播。

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

还有一些公用方法

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

$():选择DOM元素。

addClass:给元素添加类名。

removeClass:移除元素的类名。

$.add:给一个DOM节点绑定事件。

getCSS:获取元素相应属性的值。

$.delegateTag("selector","tagName","type",fun):事件代理。

实现:

假设有6张图片,每张图片宽度为600px。按照功能的独立性来完成:

1.缓动函数 liner缓动函数的作用是一点一点的改变目标元素的属性值,直到达到目标值。使用它的元素可能是水平轮播的图片,也可能是垂直轮播的图片,也可能是一个想从页面左端到达页面右端的小盒子。所以它应该接收四个参数(目标元素,要改变的属性值,目标值,移动次数)。

liner=function{ var speed=/num, i=0; { ele[prop]+=speed; i++; if  { setTimeout; } })(); },

2.点亮按钮函数 light点亮按钮本质上就是给按钮添加一个active类,熄灭按钮就是给按钮移除active类。

那么如何知道当前按钮是哪一个呢?

返回顶部