Posted in jQuery onMay 23, 2017
一、轮播器
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；
}
});
*难点
首先，要学会获取元素值；
其次，了解几种函数；
再则，变量的灵活使用，达到了解变量每时每刻的值；
最后，定时器的控制是最难的；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
jquery实现图片轮播器
- Author -
hanyuwebant声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@