html轮播属性,javascript基础知识之html5轮播图实例讲解（44）

本文实例为大家分享了html5轮播图的具体代码，供大家参考，具体内容如下

1.轮播图的布局：

/*去除默认样式*/

*{

margin: 0;

padding: 0;

}

/*设置div*/

#outer{

width: 520px;

height: 333px;

/*设置居中*/

margin: 50px auto;

/*

* 设置背景颜色

*/

background-color: greenyellow;

/*设置上下内边距*/

padding: 10px 0;

/*为父元素开启相对定位*/

position: relative;

/*隐藏溢出的内容*/

overflow: hidden;

}

/*设置ul*/

#imgList{

/*去除项目符号*/

list-style: none;

/*设置ul的宽度*/

width: 2600px;

/*开启绝对定位*/

position: absolute;

/*

* 通过修改ul的left值，可以切换图片

* 1 0px

* 2 -520px

* 3 -1040px

* 4 -1560px

* ....

*/

left: 0px;

}

/*设置li*/

li{

/*设置元素浮动*/

float: left;

/*设置外边距*/

margin: 0 10px;

}

/*设置导航按钮*/

#nav{

/*开启绝对定位*/

position: absolute;

/*定位*/

bottom: 20px;

/*

* #outer 宽度 520px

*

* #nav 宽度 125px

*

* 520 - 125 = 395/2 = 197.5

*/

left: 197px;

}

#nav a{

/*设置a浮动*/

float: left;

/*设置宽和高*/

width: 15px;

height: 15px;

/*设置背景颜色*/

background-color: red;

/*设置外边距*/

margin: 0 5px;

/*设置透明*/

opacity: 0.5;

filter: alpha(opacity=50);

}

• 
• 
• 
• 
• 

2.轮播图的逻辑：

/*去除默认样式*/

*{

margin: 0;

padding: 0;

}

/*设置div*/

#outer{

width: 520px;

height: 333px;

/*设置居中*/

margin: 50px auto;

/*

* 设置背景颜色

*/

background-color: greenyellow;

/*设置上下内边距*/

padding: 10px 0;

/*为父元素开启相对定位*/

position: relative;

/*隐藏溢出的内容*/

overflow: hidden;

}

/*设置ul*/

#imgList{

/*去除项目符号*/

list-style: none;

/*设置ul的宽度*/

width: 2600px;

/*开启绝对定位*/

position: absolute;

/*

* 通过修改ul的left值，可以切换图片

* 1 0px

* 2 -520px

* 3 -1040px

* 4 -1560px

* ....

*/

left: 0px;

}

/*设置li*/

li{

/*设置元素浮动*/

float: left;

/*设置外边距*/

margin: 0 10px;

}

/*设置导航按钮*/

#nav{

/*开启绝对定位*/

position: absolute;

/*定位*/

bottom: 20px;

/*

* #outer 宽度 520px

*

* #nav 宽度 125px

*

* 520 - 125 = 395/2 = 197.5

*/

left: 197px;

}

#nav a{

/*设置a浮动*/

float: left;

/*设置宽和高*/

width: 15px;

height: 15px;

/*设置背景颜色*/

background-color: red;

/*设置外边距*/

margin: 0 5px;

/*设置透明*/

opacity: 0.5;

filter: alpha(opacity=50);

}

#nav a:hover{

background-color: black;

}

window.onload = function(){

//获取id为imgList的ul

var imgList = document.getElementById("imgList");

//获取所有的图片标签

var imgs = document.getElementsByTagName("img");

//设置ul的宽度

imgList.style.width = 520 * imgs.length + "px";

//设置导航按钮居中

//获取id为outer的div

var outer = document.getElementById("outer");

//获取id为nav的div

var nav = document.getElementById("nav");

nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";

//创建一个变量，来保存当前显示图片的索引

var index = 0;

//获取所有的超链接

var links = document.getElementsByTagName("a");

//设置对应的超链接变成选中状态

links[index].style.backgroundColor = "black";

//开启自动切换图片

autoChange();

/*

* 点击超链接切换到对应的图片

* 点击第一个超链接，切换到第一个图片

* 点击第二个超链接，切换到第二个图片

*/

//为所有的超链接绑定单击响应函数

for(var i=0 ; i

//在超链接中添加一个属性

links[i].num = i;

links[i].onclick = function(){

//当切换图片时，为了不受自动切换的影响需要将其关闭

clearInterval(autoTimer);

//获取到当前点击的超链接的索引

//更新当前图片的索引

index = this.num;

//切换到对应的图片

/*

* 切换图片，就是修改imgList的left属性值

* 0 0*-520

* 1 1*-520

* 4 4*-520

*/

//imgList.style.left = -520*index + "px";

//设置过渡效果

move(imgList , "left" , -520*index , 20 , function(){

//图片切换完毕，打开自动切换

autoChange();

});

setA();

};

}

//定义一个变量，保存自动切换图片的定时器

var autoTimer;

/*

* 定义一个函数，专门用来自动切换图片

*/

function autoChange(){

//开启一个定时器，来负责图片的切换

autoTimer = setInterval(function(){

//索引自增

index++;

//判断index值是否合法

index = index % imgs.length;

//切换图片

move(imgList , "left" , -520*index , 20 , function(){

//动画执行完毕，切换导航点

setA();

});

},3000);

}

/*

* 函数专门用来设置超链接的选中状态的

*/

function setA(){

/*

* 因为最后一张图片和第一张是一样的，所以当显示的图片是最后一张时，应该是第一个的超链接变颜色

*/

if(index >= imgs.length - 1){

index = 0;

//已经切换到最后一张，瞬间将其切换到第一张

imgList.style.left = 0;

}

/*遍历超链接*/

for(var i=0 ; i

//将所有的超链接的背景颜色都设置为红色

links[i].style.backgroundColor = "";

}

//将当前选中的超链接设置为黑色

links[index].style.backgroundColor = "black";

}

};

• 
• 
• 
• 
• 
• 

外部js代码：

/*

* 定义一个move()函数来执行一些简单的动画效果

* 参数：

* obj 要执行动画的对象

* attr 执行动画时要修改的属性

* target 执行动画的目标位置

* speed 动画执行的速度

* callback 回调函数，当动画执行完毕以后，该回调函数会执行

*/

function move(obj, attr, target, speed, callback) {

//关闭之前的定时器

/*

* 一般都会将定时器的标识作为执行动画对象的属性保存，这样可以确保只有当前对象能访问到定时器

*/

clearInterval(obj.timer);

//判断向左移还是向右移

//0 --> 800 向右移

//起始位置 < 目标位置 则向右移动，速度为正

//800 --> 0 向左移

//起始位置 > 目标位置 则向左移动，速度为负

//获取元素的起始位置

var current = parseInt(getStyle(obj, attr));

if(current > target) {

//起始位置 > 目标位置 则向左移动，速度为负

speed = -speed;

}

//开启一个定时器，控制box1移动

obj.timer = setInterval(function() {

//获取box1的当前的left值

var oldValue = parseInt(getStyle(obj, attr));

//通过旧值来计算新值

var newValue = oldValue + speed;

//判断newValue是否大于800

/*

* 如果从0 向 800，执行动画，则值越来越大

* 如果从800向0执行动画，则值越来小

*/

if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {

newValue = target;

}

//将box1的left值修改为新值

obj.style[attr] = newValue + "px";

//当box1移动到800px的位置时，停止移动

if(newValue == target) {

clearInterval(obj.timer);

//调用回调函数

callback && callback();

}

}, 30);

}

/*

* 用来获取任意元素的当前样式

* 参数：

* obj 要获取样式的元素

* name 要获取的样式的名字

*

* 在读取元素的样式时，如果元素没有设置样式，

* 则火狐、Chrome等浏览器会自动计算元素的样式值

* 而IE浏览器，有时用不会自动计算，而是返回默认值，比如宽度会返回auto

*

*/

function getStyle(obj, name) {

//判断浏览器中是否含有getComputedStyle这个方法

if(window.getComputedStyle) {

//支持正常的浏览器

return getComputedStyle(obj, null)[name];

} else {

//只支持IE

return obj.currentStyle[name];

}

}

/*

* 定义一个专门用来向元素中添加class的函数

* 参数：

* obj 要添加class属性的对象

* cn 要添加的class的属性值

*/

function addClass(obj, cn) {

//如果元素中有该class则不添加，没有才添加

if(!hasClass(obj, cn)) {

obj.className += " " + cn;

}

}

/*

* 创建一个函数检查一个元素中是否含有指定的class

* 如果有，则返回true。否则返回false

*/

function hasClass(obj, cn) {

//创建正则表达式

var reg = new RegExp("\\b" + cn + "\\b");

//返回检查结果

return reg.test(obj.className);

}

/*

* 用来从指定元素中删除class值的方法

*/

function removeClass(obj, cn) {

//要删除一个class，就是将这个class替换为一个空串

//创建正则表达式

var reg = new RegExp("\\b" + cn + "\\b", "g");

//判断obj中是否含有这个class

if(reg.test(obj.className)) {

//将内容替换为空串

obj.className = obj.className.replace(reg, "");

}

}

/*

* 用来切换元素的class的方法

* 如果元素中含有该class，则删除

* 如果元素中没有该class，则添加

*

*/

function toggleClass(obj, cn) {

//检查obj中是否含有cn

if(hasClass(obj, cn)) {

//有该class，则删除

removeClass(obj, cn);

} else {

//没有该class，则添加

addClass(obj, cn);

}

}

注：图片自己找

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