<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生js渐变滑动切换焦点图代码 - 网页模板</title>
<style>
ul{ margin:0; padding-left:0;}
li{ list-style:none;}
img{ border:none;}
#main{ width:280px; height:330px; overflow:hidden; position:relative; margin:20px auto 0 auto;}
#main ul{ position:absolute; left:0;}
#main ul li{ width:280px; height:330px; float:left; position:absolute; filter:alpha(opacity=0); opacity:0;}
#btn{ line-height:13px; text-align:center; background:#eeeeee; width:280px; margin:10px auto 0 auto;}
#btn a{ display:inline-block; background:url(img.gif) no-repeat; width:13px; height:13px;}
#btn a.index{ background-position:-13px 0;}
#btn a.active{ background-position:-26px 0;}
#btn a.prev{ background-position:0 0;}
#btn a.next{ background-position:-39px 0;}
</style>
<script type="text/javascript" src="miaov.js"></script>
<script>
window.onload = function(){
var oMain = document.getElementById('main');
var oUl = oMain.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('btn');
var aA = oBtn.getElementsByTagName('a');
var iNow = 1;
var iNow2 = 1;
var bBtn = true;
var num = 3;
var timer = null;
oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
aA[0].onclick = function(){
if(bBtn){
clearInterval(timer);
timer = setInterval(autoPlay,3000);
for(var i=0;i<aLi.length;i++){
aLi[i].style.position = 'relative';
aLi[i].style.filter = 'alpha(opacity=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow-1)*aLi[0].offsetWidth + 'px';
if(iNow==1){
iNow = aLi.length;
aLi[aLi.length-1].style.position = 'relative';
aLi[aLi.length-1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
}
else{
iNow--;
}
iNow2--;
toRun();
bBtn = false;
}
};
aA[aA.length-1].onclick = function(){
if(bBtn){
clearInterval(timer);
timer = setInterval(autoPlay,3000);
for(var i=0;i<aLi.length;i++){
aLi[i].style.position = 'relative';
aLi[i].style.filter = 'alpha(opacity=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow-1)*aLi[0].offsetWidth + 'px';
if(iNow==aLi.length){
iNow = 1;
aLi[0].style.position = 'relative';
aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
}
else{
iNow++;
}
iNow2++;
toRun();
bBtn = false;
}
};
for(var i=1;i<aA.length-1;i++){
aA[i].index = i;
aA[i].onclick = function(){
clearInterval(timer);
timer = setInterval(autoPlay,3000);
iNow = this.index;
iNow2 = this.index;
toShow();
};
}
function toRun(){
for(var i=1;i<aA.length-1;i++){
aA[i].className = 'index';
}
aA[iNow].className = 'active';
startMove(oUl,{left:-(iNow2-1)*aLi[0].offsetWidth},function(){
if(iNow==1){
aLi[0].style.position = 'relative';
aLi[0].style.left = 0;
oUl.style.left = 0;
iNow2 = 1;
}
else if(iNow==aLi.length){
aLi[aLi.length-1].style.position = 'relative';
aLi[aLi.length-1].style.left = 0;
oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth + 'px';
iNow2 = aLi.length;
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position = 'absolute';
aLi[i].style.filter = 'alpha(opacity=0)';
aLi[i].style.opacity = 0;
}
oUl.style.left = 0;
aLi[iNow2-1].style.zIndex = num++;
aLi[iNow2-1].style.filter = 'alpha(opacity=100)';
aLi[iNow2-1].style.opacity = 1;
bBtn = true;
});
}
function toShow(){
for(var i=1;i<aA.length-1;i++){
aA[i].className = 'index';
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0});
}
aA[iNow].className = 'active';
startMove(aLi[iNow-1],{opacity:100},function(){
aLi[iNow-1].style.zIndex = num++;
});
}
timer = setInterval(autoPlay,3000);
function autoPlay(){
if(iNow==aLi.length){
iNow = 1;
iNow2 = 1;
}
else{
iNow++;
iNow2++;
}
toShow();
}
};
</script>
</head>
<body>
<div id="main">
<ul>
<li style="z-index:2; filter:alpha(opacity=100); opacity:1;"><a href="#"><img src="1.jpg" /></a></li>
<li><a href="#"><img src="2.jpg" /></a></li>
<li><a href="#"><img src="3.jpg" /></a></li>
<li><a href="#"><img src="4.jpg" /></a></li>
</ul>
</div>
<div id="btn">
<a class="prev" href="javascript:;"></a>
<a class="active" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
原生js渐变滑动切换焦点图代码.zip
版权申诉
9 浏览量
2022-11-26
11:03:16
上传
评论
收藏 184KB ZIP 举报
原生js渐变滑动切换焦点图代码.zip （8个子文件） 
原生js渐变滑动切换焦点图代码 jiaoben4339 
2.jpg 37KB 1.jpg 48KB
img.gif 551B 3.jpg 27KB
index.html 5KB 4.jpg 29KB
miaov.js 1KB 原生js渐变滑动切换焦点图代码.jpg 57KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 汽车级带驱动保护芯片规格书
- 基于matlab实现遗传算法优化bp神经网络权值阈值的MATLAB程序.rar
- 基于matlab实现遗传算法优化BP网络(用于电力负荷预测预测）.rar
- 基于matlab实现用于speech enhancement的经典噪声估计源代码完整，可直接使用 .rar
- 基于matlab实现振动信号预处理，主要为五点三次平滑法和平均法.rar
- 基于matlab实现直流电机双闭环控制matlab程序，双闭环能增加系统的动态响应，提升控制性能.rar
- 基于matlab实现直流电机的闭环控制，通过simulink的仿真，来设置pid参数，达到成功的控制直流电机的运行 .rar
- 基于matlab实现在振动信号处理中的应用,书籍和源码 工程振动信号的预处理以及模态参数的识别程序.rar
- Sora关于视频分镜的提示词技巧.docx
- 基于java的Saas OA协同办公软件源码.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
