html轮播框架,jquery实现图片轮播器

一、轮播器

1、HTML框架

图片轮播器

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

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；

}

});

*难点

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

其次，了解几种函数；

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

最后，定时器的控制是最难的；

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