JavaScript 图片轮播 jqury图片轮播
html+css
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* reset css 样式重置 */
body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
margin: 0;
padding: 0;
}
body{font-size:16px;}
table{border-collapse: collapse;}
select,textarea,input{outline:none; border: none; background:#fff; }
textarea{ resize: none; overflow: auto}
a{ text-decoration: none;}
li{ list-style: none; vertical-align: top}
img{ border:none; vertical-align: top}
/* end reset css */
.wrap{
position: absolute;
width: 100%;
height: 300px;
}
.container{
width: 760px;
height: 300px;
position: relative;
left: 50%;
top:0;
margin-left: -380px;
}
.container, .arrow, .container ul { position: absolute}
.container ul{
bottom: 1%;
left: 35%;
width: 30%;
height: 8%;
background: rgba(0,0,255,0.4);
}
.container li{
width: 10%;
margin-right: 10%;
height: 90%;
border-radius: 50%;
background: rgba(255,255,255,1);
float: left;
}
.container li.active{
background: rgba(255,0,0,1);
}
.container .arrow{
display: none;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
line-height: 50px;
font-size:30px;
background: rgba(255,255,255,0.4);
}
.container #leftArrow{
left: 0;
}
.container #rightArrow{
right: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="imgBox">
<img src="images/3.jpg" alt="图片1"/>
</div>
<ul>
<li ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="arrow" id="leftArrow"> < </div>
<div class="arrow" id="rightArrow"> > </div>
</div>
</div>
</body>
</html>
js:
<script>
window.onload = function(){
/* JavaScript 图片轮播： 1定时器设置自动循环播放 2 鼠标停在下方小圆点(Li标签)上显示对应下标的图片 3按钮点击显示对应上一张下一张图片
1.定时器设置自动循环播放：定时改变图片的src属性和对应的小圆点(Li标签)高亮突出样式
2.鼠标停在下方小圆点(Li标签)上显示对应下标的图片，一直悬停图片则不动（注意：鼠标悬停时定时器停止播放图片）
鼠标移出的时候开始定时器循环播放图片（注意：从悬停的图片的下一张开始播放，而不是原来定时器播放图片的顺序）
3.按钮点击显示当前图片对应上一张下一张图片*/
var srcArr= [ "images/1.jpg","images/2.jpg" ,
"images/3.jpg","images/4.jpg" ,
"images/5.jpg" ];
var bgColors =[ "#358aca","#59ae47","#151837","lightblue","#ccc"];
var con = document.getElementsByClassName("wrap")[0] ;
var img = document.getElementsByClassName("container")[0].getElementsByTagName("img")[0];
var arrLi = document.getElementsByClassName("container")[0].getElementsByTagName("li");
var arrArrow = document.getElementsByClassName("container")[0].getElementsByClassName("arrow");
//Li自定义下标
for( var i = 0 ;i<arrLi.length ;i++) {
arrLi[i].index = i;
}
//初始化
var lastIndex =arrLi.length-1;
var activeIndex = 0;
playImg(activeIndex);
img.timer = null;
//自定义函数
function playImg( activeIndex ){
if( activeIndex<0){
activeIndex = srcArr.length +activeIndex;
}
else activeIndex =activeIndex%arrLi.length ;
arrLi[ lastIndex].className="";
arrLi[ activeIndex].className="active";
img.src = srcArr[ activeIndex ] ;
con.style.background =bgColors[activeIndex] ;
lastIndex =activeIndex;
}
//滚动1：开启定时器图片滚动
if( img.timer !=null){
window.clearInterval( img.timer );
}
img.timer =window.setInterval( function(){
activeIndex++ ;
playImg( activeIndex );
} ,1000);
//滚动2：鼠标在li上移入移出
for( var i = 0 ;i<arrLi.length ;i++){
arrLi[i].onmouseover = function(){
window.clearInterval( img.timer );
activeIndex=this.index ;
playImg( activeIndex ); return false;
return false ;
};
arrLi[i].onmouseout = function(){
if( img.timer !=null){
window.clearInterval( img.timer );
}
img.timer =window.setInterval( function(){
activeIndex++ ;
playImg( activeIndex );
} ,1000);
return false;
};
}
con.onmouseover = function(){
arrArrow[0].style.display="block";
arrArrow[1].style.display="block"
};
con.onmouseout = function(){
arrArrow[0].style.display="none";
arrArrow[1].style.display="none"
};
//滚动3：点击左右箭头 上一张 下一张图片
arrArrow[0].onclick = function(){
activeIndex= (--activeIndex +arrLi.length ) ;
playImg( activeIndex );
}
arrArrow[1].onclick = function(){
activeIndex++ ;
playImg( activeIndex );
}
};
</script>
jq:
<script src="../jquery-3.0.0.js"></script>
<script>
$( function(){
var srcArr= [ "images/1.jpg","images/2.jpg" ,
"images/3.jpg","images/4.jpg" ,
"images/5.jpg" ];
var bgColors =[ "#358aca","#59ae47","#151837","lightblue","#ccc"];
var con = $(".wrap").eq(0);
var img = $(".wrap .imgBox img").eq(0);
var arrLi = $(".wrap .container li");
var arrArrow = $(".wrap .container .arrow");
// 初始化：
var activeIndex =arrLi.eq(0).index();
arrLi.eq(activeIndex).addClass("active");
arrLi.eq(activeIndex).siblings().removeClass("active");
con.css("background",bgColors[activeIndex])
img.attr("src",srcArr[activeIndex]);
//jq 自定义函数
function playImg( activeIndex ){
if( activeIndex<0){
activeIndex = srcArr.length +activeIndex;
}
else activeIndex =activeIndex%arrLi.length ;
arrLi.eq(activeIndex).addClass("active");
arrLi.eq(activeIndex).siblings().removeClass("active");
img.attr("src",srcArr[activeIndex]);
con.css("background",bgColors[activeIndex])
}
//滚动1：开启定时器图片滚动
if( img.timer !=null){
window.clearInterval( img.timer );
}
img.timer =window.setInterval( function ( ){
activeIndex++;
playImg( activeIndex );
} ,1000);
//滚动2：小圆点上
arrLi.hover(
function(){activeIndex= $(this).index() ; playImg(activeIndex ) ; window.clearInterval( img.timer );
return false; },
function(){
img.timer =window.setInterval( function(){
activeIndex++;
playImg( activeIndex );
} ,1000);
return false; }
);
//hover() : mouseover + mouseout
con.hover(
function(){
arrArrow.css("display","block")
return false; },
function(){
arrArrow.css("display","none")
return false; }
);
/* con.on( {
"mouseover": function(){
window.clearInterval( img.timer );
arrArrow.css("display","block")
},
"mouseout": function(){
if( img.timer !=null){
window.clearInterval( img.timer );
}
img.timer =window.setInterval( function(){
activeIndex= (++activeIndex) ;
playImg( activeIndex );
} ,1000); arrArrow.css("display","none") }
});*/
//滚动3：
arrArrow.eq(0).click( function(){ playImg( --activeIndex +arrLi.length ) } );
arrArrow.eq(1).click( function(){ playImg( ++activeIndex ) } );
});
</script>
<script>
window.onload = function(){
/* JavaScript 图片轮播： 1定时器设置自动循环播放 2 鼠标停在下方小圆点(Li标签)上显示对应下标的图片 3按钮点击显示对应上一张下一张图片
1.定时器设置自动循环播放：定时改变图片的src属性和对应的小圆点(Li标签)高亮突出样式
2.鼠标停在下方小圆点(Li标签)上显示对应下标的图片，一直悬停图片则不动（注意：鼠标悬停时定时器停止播放图片）
鼠标移出的时候开始定时器循环播放图片（注意：从悬停的图片的下一张开始播放，而不是原来定时器播放图片的顺序）
3.按钮点击显示当前图片对应上一张下一张图片*/
var srcArr= [ "images/1.jpg","images/2.jpg" ,
"images/3.jpg","images/4.jpg" ,
"images/5.jpg" ];
var bgColors =[ "#358aca","#59ae47","#151837","lightblue","#ccc"];
var con = document.getElementsByClassName("wrap")[0] ;
var img = document.getElementsByClassName("container")[0].getElementsByTagName("img")[0];
var arrLi = document.getElementsByClassName("container")[0].getElementsByTagName("li");
var arrArrow = document.getElementsByClassName("container")[0].getElementsByClassName("arrow");
//Li自定义下标
for( var i = 0 ;i<arrLi.length ;i++) {
arrLi[i].index = i;
}
//初始化
var lastIndex =arrLi.length-1;
var activeIndex = 0;
playImg(activeIndex);
img.timer = null;
//自定义函数
function playImg( activeIndex ){
if( activeIndex<0){
activeIndex = srcArr.length +activeIndex;
}
else activeIndex =activeIndex%arrLi.length ;
arrLi[ lastIndex].className="";
arrLi[ activeIndex].className="active";
img.src = srcArr[ activeIndex ] ;
con.style.background =bgColors[activeIndex] ;
lastIndex =activeIndex;
}
//滚动1：开启定时器图片滚动
if( img.timer !=null){
window.clearInterval( img.timer );
}
img.timer =window.setInterval( function(){
activeIndex++ ;
playImg( activeIndex );
} ,1000);
//滚动2：鼠标在li上移入移出
for( var i = 0 ;i<arrLi.length ;i++){
arrLi[i].onmouseover = function(){
window.clearInterval( img.timer );
activeIndex=this.index ;
playImg( activeIndex ); return false;
return false ;
};
arrLi[i].onmouseout = function(){
if( img.timer !=null){
window.clearInterval( img.timer );
}
img.timer =window.setInterval( function(){
activeIndex++ ;
playImg( activeIndex );
} ,1000);
return false;
};
}
con.onmouseover = function(){
arrArrow[0].style.display="block";
arrArrow[1].style.display="block"
};
con.onmouseout = function(){
arrArrow[0].style.display="none";
arrArrow[1].style.display="none"
};
//滚动3：点击左右箭头 上一张 下一张图片
arrArrow[0].onclick = function(){
activeIndex= (--activeIndex +arrLi.length ) ;
playImg( activeIndex );
}
arrArrow[1].onclick = function(){
activeIndex++ ;
playImg( activeIndex );
}
};
</script>
