作者:Utopia | 来源:互联网 | 2022-06-23 03:13
这篇文章主要介绍了原生JavaScript实现精美的淘宝轮播图效果,结合完整实例形式详细分析了javascript实现淘宝轮播图功能的相关HTML布局、css及js核心功能代码,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了原生Javascript实现的淘宝轮播图效果。分享给大家供大家参考,具体如下:
轮播图是我们学习原生js的必经之路
它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固,
话不多说,直接上图
HTML代码如下:
CSS样式如下:
/*
第一步:设置外部框的样式
第二步: 设置图片框的样式
第三步: 设置箭头的样式
第四步: 设置小圆点的样式
*/
#container {
margin: 50px auto;
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 3640px;
}
#list img {
float: left;
width: 520px;
height: 280px;
}
#buttons {
height: 10px;
width: 100px;
position: absolute;
left: 0;/*设置水平垂直居中*/
right: 0;/*设置水平垂直居中*/
margin: 0 auto;/*设置水平垂直居中*/
bottom: 20px;
z-index: 2;
}
#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #cccccc;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons .on {
background: orangered;
}
.arrow {
width: 40px;
height: 40px;
display: none;
position: absolute;
top: 0; /*设置水平垂直居中*/
bottom: 0; /*设置水平垂直居中*/
margin: auto 0; /*设置水平垂直居中*/
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
z-index: 2;
}
.arrow:hover{
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
Javascript代码如下
/**
* Created by zhm on 17.1.15.
*/
/*
*知识点:
* this使用
* DOM事件
* 定时器
*
* 思路:
* (1)设置它左右移动
* 问题:传入数字为NAN??
* 解决:在页面中增加属性style:left:0
* (2)平滑移动(移动时间固定,每次移动的距离不一样)
* 问题:连续点击出现晃动?---设置标志位
* 出现空白页??--- 第一张图片前加上最后一张,最后一张图片前加上第一张
* 在类list的标签中增加属性style:left:-520px;
* 设置无限滚动判断
*
* (3)设置小圆点
* 首先将所有的类置为空,当前类置为on
* 绑定小圆点和图片
* 绑定小圆点和左右箭头
* 设置定时器,鼠标划上去停止,移开自动轮播
*
* */
//1.获取元素
var cOntainer= document.getElementById("container");
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var buttOns= document.getElementById('buttons').getElementsByTagName('span');
var timer = null;
var timer2 = null;
var flag = true;
var index =0;
//2.设置函数
function moveImg(dis) {
var time = 400;//运动的总时间
var eachTime = 10;//每次小移动的时间
var eachDis = dis/(time/eachTime);//每次小移动的距离
var newWeizhi = parseInt(list.style.left) + dis;//新位置
flag = false;
function eachMove(){
if(dis > 0 && parseInt(list.style.left)newWeizhi){
list.style.left = parseInt(list.style.left) + eachDis + 'px';
}else {
flag = true;
clearInterval(timer);
list.style.left = newWeizhi + 'px';
//无限滚动判断
if (newWeizhi == 0) {
list.style.left = -2600 + 'px';
}
if (newWeizhi == -3120) {
list.style.left = -520 + 'px';
}
}
}
timer = setInterval(eachMove, 10);
}
//3.设置点击切换图片
next.Onclick= function () {
if(!flag) return;
moveImg(-520);
//绑定箭头和小圆点
if (index == 4) {
index = 0;
} else {
index++;
}
buttonsShow();
};
prev.Onclick= function () {
if(!flag) return;
moveImg(520);
//绑定箭头和小圆点
if (index == 0) {
index = 4;
} else {
index--;
}
buttonsShow();
};
//4.设置小圆点的绑定
function buttonsShow() {
//将之前的小圆点的样式清除
for (var i = 0; i
源码下载:完整实例代码点击此处本站下载。
更多关于Javascript相关内容感兴趣的读者可查看本站专题:《Javascript切换特效与技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》
希望本文所述对大家Javascript程序设计有所帮助。