轮播动画效果（代码）：来自尚硅谷视频素材：
/*
* 可以用来获取任意的样式
*/
function getStyle(obj, name) {
return window.getComputedStyle && getComputedStyle(obj, null)[name] || obj.currentStyle[name];
}
/*
* 提取出一个函数，可以处理一些简单的动画效果
* 参数：
* obj: 要执行动画的元素
* attr: 执行动画是要修改的属性
* target: 执行动画的目标位置
* speed: 执行动画的速度
* callback: 回调函数，这个函数将会在动画执行完毕之后被调用
*/
function move(obj, attr, target, speed, callback) {
//开启定时器前，关闭上一个
/*
* 这里我们的timer是一个全局变量，所有的动画执行时，都会共享同一个timer
* 这样将会导致我们执行box2的动画时，会使box1的动画也立即终止
* 所以我们定时器的标识不能作为全局变量保存，而应该保存到要执行动画的对象上
*/
clearInterval(obj.timer);
//获取当前值，动画执行的起始位置
var current = parseInt(getStyle(obj, attr));
//起始位置 大于 目标位置 speed为负
//起始位置 小于 目标位置 speed为正
if(current > target) {
//此时speed应该是负数
speed = -speed;
}
//开启一个定时器，用来移动box1
obj.timer = setInterval(function() {
//获取box1的left属性值
var oldValue = parseInt(getStyle(obj, attr));
//修改值
var newValue = oldValue + speed;
//如果newValue大于800
//如果向右移动，则newValue > target speed为正
//如果向左移动，则newValue < target speed为负
if(speed > 0 && newValue > target || speed < 0 && newValue < target) {
newValue = target
}
//将其赋值给box1
obj.style[attr] = newValue + "px";
//当运行800px时，停止执行动画
if(newValue == target) {
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数，专门用来为一个元素添加class属性值
* 参数
* obj 要添加class属性的元素
* cn 要添加的class的值
*
*/
function addClass(obj, cn) {
//判断obj中是否含有cn这个class
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 判断一个对象中是否含有指定的class属性
* 参数：
* obj：要检查的对象
* cn：要检查class值
* 如果对象中具有该class则返回true，否则返回false
*/
function hasClass(obj, cn) {
//检查obj中是否与b2这个class
//var reg = /\bb2\b/;
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中的class
*/
function removeClass(obj, cn) {
//创建一个正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
//将class属性中符合正则表达式的内容，替换为空串
obj.className = obj.className.replace(reg, "");
}
/*
* 切换一个元素的class属性值
* 如果有，则删除
* 如果没有，则添加
*/
function toggleClass(obj, cn) {
//判断obj中是否有cn
if(hasClass(obj, cn)) {
//如果有，则删除
removeClass(obj, cn);
} else {
//如果没有，则添加
addClass(obj, cn);
}
}
轮播图html文件及，js文件，及css；综合到html文件中；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0 ;
padding: 0;
}/* 整体居中 */
#outer{
width: 520px;
height: 333px;
margin: 50px auto;
background-color: aquamarine;
padding: 20px 0;
position: relative;
overflow: hidden;
}/* 播放幕的样式 */
#imgList{
list-style: none;
float: left;
position: absolute;
}/* 图片所在div的大小(js代码根据图片数量自动调整)及样式 */
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 25px;
left: 197.5px;
}/* 导航超链接的样式(js代码根据数量自动居中) */
#navDiv a{
width: 15px;
height: 15px;
float: left;
margin:0 5px;
background-color: #FF0000;
opacity: 0.5;
}
#navDiv a:hover{
background-color: #000000;
}
</style>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
window.onload=function(){
//获取imglist
var imgList=document.getElementById("imgList");
//获取所有的照片元素
var imgArr=document.getElementsByTagName("img");
//设置imglist的宽度
imgList.style.width=520*imgArr.length+"px";//设置大div的动态宽度
//获取navDiv对象
var navDiv=document.getElementById("navDiv");
//获取outer对象
var outer=document.getElementById("outer");
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";//设置导航方块动态居中
//默认显示索引
var index=0;
//获取所有的a对象（导航效果）
var allA=document.getElementsByTagName("a");
//设置默认选中效果
allA[index].style.backgroundColor="black";
//点击超链接切换到制定图片
for(var i=0;i<allA.length;i++){
allA[i].index=i;
allA[i].onclick=function(){
//点击事件会关闭自动播放定时器（前提是定时器要有名字（var））
clearInterval(timer);//点击事件触发动画效果（左右回滚）
index=this.index;
// imgList.style.left=index*-520+"px";
move(imgList,"left",-520*index,10,function(){
autoChange();//鼠标点击事件动画效果执行完毕后，重新开启定时器的方法；
});//添加动画函数，动画对象，
//偏移对象，偏移量，偏移速度，自定义函数
setA();
/* for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="red";
}//循环清除原有的黑，增加新来的黑，提出为一个函数方便以后调用
allA[index].style.backgroundColor="black"; */
}
}
function setA(){
for(var i=0;i<allA.length;i++){
//判断当前索引的图片是否为最后一张图片
if(index>=imgArr.length-1){
index=0;//判断当走到最后一张图片的时候，让下标从0重新开始在走一遍（重点）
imgList.style.left=0; //并且重新走需要向左跑，回到开头，我们把向左跑的偏移量设置为0，（重点）
//就会实现一瞬间从头开始，肉眼看不出来（重点）
}
allA[i].style.backgroundColor="";//此处不能设置为红色，引内内联样式优先级高，
//会覆盖外联样式（hover，背景颜色），
//应设置为空，这样外联样式就会生效
}//循环清除原有的黑，增加新来的黑
allA[index].style.backgroundColor="black";
}
//创建定时器（有命名才能用命名关闭定时器）
var timer;
//调用自动切换函数（使其页面加载完成后直接自动运行）
autoChange();
//创建函数自动切换图片
function autoChange(){
//开启定时器，定时切换图片
timer =setInterval(function(){//给定时器编辑内容
//索引自增
index++;
if(index==imgArr.length){
index=0;
}
move(imgList,"left",-520*index,20,function(){
setA();
});
},2000);
}
};
</script>
<title></title>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="img/1.jpg" ></li>
<li><img src="img/2.jpg" ></li>
<li><img src="img/3.jpg" ></li>
<li><img src="img/4.jpg" ></li>
<li><img src="img/5.jpg" ></li>
<li><img src="img/1.jpg" ></li>
</ul>
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
2020年7月12日
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
