<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑入滑出轮播图03</title>
<style type="text/css">
body{
margin-top: -20px;
}
.box{
width:1400px;
height: 70px;
background-color:#9f7fd72e;
}
p{
font-size: 20px;
color:#CC99FF;
text-align: center;
line-height: 70px;
}
#banner{
position: relative;
width: 1400px;
height: 520px;
overflow: hidden;
}
img{
position: absolute;
width: 1400px;
height: 520px;
left:1400px; /*初始状态显示第一张图片*/
top:0px;
}
img:nth-child(1){
left:0; /*初始状态显示第一张图片*/
}
ul{
position: absolute;
right: 50px;
list-style:none;
opacity:0.2;
margin-top: 50px;
cursor:pointer;
}
ul li{
margin-left: 30px;
width: 200px;
height:40px;
background-color:#fff;
line-height: 50px;
text-align: center;
}
.nav{
/*margin-top: 50px;*/
}
</style>
</head>
<body>
<div class="box">
<p>滑入滑出轮播图</p>
</div>
<div id="banner">
<img src="img/banner04.jpg"/>
<img src="img/banner03.jpg"/>
<img src="img/banner05.jpg"/>
<img src="img/banner06.jpg"/>
<img src="img/banner07.jpg"/>
<img src="img/banner08.jpg"/>
<img src="img/banner09.jpg"/>
<img src="img/banner10.jpg"/>
<img src="img/banner11.jpg"/>
<img src="img/banner12.jpg"/>
<div class="nav">
<ul>
<li>共筑中国梦</li>
<li>中国新歌声</li>
<li>想明白了再结婚</li>
<li>美丽的秘密</li>
<li>斗破苍穹</li>
<li>如懿传</li>
<li>解码游戏</li>
<li>SHE·十七音乐会</li>
<li>2018苹果秋季发布会</li>
<li>口红王子</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/getStyle.js"></script>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
//这个是判断选择#id，还是.class的选择。（不是本次的重点）
function $(str){
if(str.charAt(0)=="#"){
return document.getElementById(str.substring(1));
}else if(str.charAt(0)=="."){
return document.getElementsByClassName(str.substring(1));
}else{
return document.getElementsByTagName(str);
}
}
// <---------------滑入滑出就在淡入淡出的基础上改了displayImg里面的一点代码，把css里面（img）的opacity属性改掉即可--------->
// 在这里定义myTimer和curr作用是使其成为全局变量
let myTimer=null; //定时器为空
let itemIndex=0; //从0开始(itemIndex:定义当前的序号)
let arr=["http://www.1000phone.com","http://www.baidu.com","http://www.taobao.com","http://www.jingdong.com","http://www.tmall.com"];
//显示图片(displayImg:函数名显示图片。fadeIn:参数淡入,fadeOut:参数淡出)
function displayImg(fadeIn,fadeOut){
if(fadeIn==fadeOut){ //淡入淡出相等时，返回重新一轮开始
return;
}
//ingDoms:获取img的DOM元素，相当于arr[].
let imgDoms=$("img");
//(1).滑入滑出前的准备
imgDoms[fadeIn].style.left=1400+"px";
//(2).滑入滑出效果(moveObj05:是调用封装好的(让某个dom元素花多长时间到达目的地)函数)
moveObj05(imgDoms[fadeIn],"left",0,500);
moveObj05(imgDoms[fadeOut],"left",-1400,500);
}
function displayLi(){
//改变圆点（豆豆）
let liDoms=$("li"); //liDoms:获取li的DOM元素，相当于arr[]
// 通过遍历每一个li,跟随图片改变li的颜色
for(let i=0;i<liDoms.length;i++){
liDoms[i].style.backgroundColor="white";
}
liDoms[itemIndex].style.backgroundColor="red";//轮播到（itemIndex当前项）当前li,就变为红色
}
//1.自动（轮播）播放图片
function transformImg(){
myTimer=setInterval(function(){
//(1).改变当前的图片序号(加加)，并处理边界
// itemIndex=++itemIndex>4?0:itemIndex;
//这个是简写(三目运算)，下面用if写
let fadeOut = itemIndex; //当前的(itemIndex)赋给淡出的(fadeOut)
itemIndex++;
if(itemIndex>9){
itemIndex=0
}
//(2).改变外观
//a.改变图片
displayImg(itemIndex,fadeOut); //重新调取前面显示图片的函数
//b.改变圆点（豆豆）
displayLi(); //重新调取前面改变圆点（豆豆）的函数
},3000);
}
function goUrl(){
//window.open(arr[itemIndex]);
location.href = arr[itemIndex];
}
//2.停止播放（鼠标移入）
function stopChange(){
//停止定时器
window.clearInterval(myTimer);
}
// 3.继续播放（鼠标移开）
// 4.跳转到制定图片（改变li）
function goImg(transOrd){
//(1).把transOrd赋给当前(itemIndex)图片的序号
let fadeOut=itemIndex; //(fadeOut:淡出，itemIndex：当前的)
itemIndex=transOrd;
//(2).改变外观
//a.改变图片
displayImg(itemIndex,fadeOut); //重新调取前面显示图片的函数
//b.改变圆点（豆豆）
displayLi(); //重新调取前面改变圆点（豆豆）的函数
}
window.onload=function(){
transformImg();
$("#banner").onmouseover = stopChange; //鼠标滑过图片，停止图片播放
$("#banner").onmouseout = transformImg; //鼠标移出图片，图片播放
let liDoms=$("li");
for(var i=0;i<liDoms.length;i++){
liDoms[i].setAttribute("index",i);//(setAttribute:设置指定标签属性的值)
liDoms[i].onclick=function(){
let index = parseInt(this.getAttribute("index")); //(getAttribute)获取指定标签属性的值
goImg(index);
}
}
let imgDoms = $("img");
for(let i=0;i<imgDoms.length;i++){
imgDoms[i].onclick = goUrl;
}
}
</script>
四种效果的轮播图
需积分: 49 24 浏览量
2018-10-26
15:28:52
上传
评论 1
收藏 9.25MB ZIP 举报
轮播图集合.zip （58个子文件） 
轮播图集合 
淡入淡出轮播图02.html 5KB js 
mover.js 929B move.js 8KB mover1.js 8KB getStyle.js 582B eventTools.js 1KB 轮播图（左右箭头） 
yansuan06.jpg 1021KB
jian02.png 526B yansuan01.jpg 152KB 轮播图(左右箭头).html 5KB yansuan04.jpg 303KB yansuan03.jpg 135KB right.png 972B yansuan02.jpg 223KB left.png 946B yansuan05.jpg 266KB yansuan07.jpg 200KB jian01.png 529B yansuan08.jpg 247KB Thumbs.db 147KB 无缝滚动轮播图01.html 2KB 滑入滑出轮播图03.html 5KB 淡入淡出轮播图(侧边栏选择).html 5KB img 4.jpg 142KB banner10.jpg 132KB banner09.jpg 1.02MB banner08.jpg 170KB banner05.jpg 175KB banner01.jpg 389KB banner04.jpg 138KB banner03.jpg 310KB 3.jpg 139KB banner12.jpg 160KB 6.jpg 121KB banner07.jpg 442KB 1.jpg 99KB star.jpg 10KB banner11.jpg 119KB banner02.jpg 339KB 2.jpg 116KB arrow-right.png 2KB 5.jpg 145KB banner06.jpg 154KB arrow-left.png 3KB Thumbs.db 14KB 严选轮播图（左右箭头） 轮播图(左右箭头).html 5KB js move.js 8KB getStyle.js 582B css img yansuan06.jpg 1021KB jian02.png 526B yansuan01.jpg 152KB yansuan04.jpg 303KB yansuan03.jpg 135KB yansuan02.jpg 223KB yansuan05.jpg 266KB yansuan07.jpg 200KB jian01.png 529B yansuan08.jpg 247KB资源评论
