简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JQ简单的自动轮播图
Blogger Information
Blog 37
fans 0
comment 1
visits 28099
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JQ简单的自动轮播图
kong
Original
1310 people have browsed it

效果:

1.gif.gif


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style-type: none;
padding: 0;
margin: 0;
}
.box{
width: 560px;
height: 300px;
position: relative;
margin: 100px auto;
overflow: hidden; 
}
.ul_list{
position: relative;
width: 560px;
height: 300px;
overflow: hidden;
}
.ul_list li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
border: 1px solid #ccc;
}
.ul_list li img{
width: 560px;
height: 300px;
}

.ul_list li.show{
display: block;
}

.btn .leftBtn,.btn .rightBtn{
position: absolute;
height: 30px;
width: 30px;
top: 50%;
background: #000;
border-radius: 5px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.btn .leftBtn:hover,.btn .rightBtn:hover,.ol_list li:hover{
cursor: pointer;
}
.leftBtn{
left: 10px;
}
.rightBtn{
right: 10px;
}
.ol_list{
position: absolute;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 0;
overflow: hidden;
}
.ol_list li{
float: left;
margin-right: 10px;
width: 10px;
height: 10px;
background: #000;
border-radius: 180px;
}
.ol_list li.active{
background: red;
}

</style>
<body>
<div class="box">
<ul class="ul_list">
<li><img src="images/0.jpg" alt="">1</li>
<li><img src="images/1.jpg" alt="">2</li>
<li><img src="images/2.jpg" alt="">3</li>
<li><img src="images/3.jpg" alt="">4</li>
<li><img src="images/4.jpg" alt="">5</li>
</ul>
<div class="btn">
<div class="rightBtn"></div>
<div class="leftBtn"></div>
</div>
<ol class="ol_list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="js/jquery.min.js"></script>
<script>
   var idx = 0;
   var during = 500;
   
$(".rightBtn").on("click",function(){
rightHandle();
});
//左按钮点击事件
$(".leftBtn").on("click",function(){
$(".ul_list li").eq(idx).stop(true).fadeOut(during);
idx--;
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
if(idx < 0){
idx = $(".ul_list li").length -1;
}
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
$(".ol_list li").eq(idx).addClass('active').siblings().removeClass('active');
});
// 小圆点的点击事件，每一个都点击
$(".ol_list li").each(function(i){
$(this).on("click",function(a){
$(".ul_list li").eq(idx).stop(true).fadeOut(during);
idx = i;
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
$(this).addClass('active').siblings().removeClass('active');
})
});
//右按钮的运动函数
function rightHandle(){

    $(".ul_list li").eq(idx).stop(true).fadeOut(during);
idx++;
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
if(idx > $(".ul_list li").length -1){
idx = 0;
}
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
$(".ol_list li").eq(idx).addClass('active').siblings().removeClass('active');
    }
// 自己主动运动的过程  
var timer = setInterval(rightHandle,1000);

$(".box").mouseenter(function(event) {
/* Act on the event */
clearInterval(timer);
}).mouseleave(function(event){
/* Act on the event */
timer = setInterval(rightHandle,1000);
});



</script>
</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！