jquery实现图片轮播图效果

最新推荐文章于 2024-03-14 19:48:19 发布

爱德酱

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量823

点赞数

分类专栏：前端技术 css 文章标签： jquery css

前端技术同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ padding:0; margin:0; list-style:none;}
/************************样式区。原本都打算写到JS里面的。不过这玩意改的比较多。新手改CSS没啥问题我就写在这了*****************************************/
/*  修改输出屏大小  */
.banner{/*  修改输出屏大小  */ width: 100%; height: 300px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; margin-top:50px;}
.banner .img{width: 99999px; position:absolute; left:0px; top:0;}
.banner .img li{ float:left;}
/*/ 修改图片大小 /*/
.banner .img img{ width: 550px;}
/*/ 小圆圈 /*/
.banner .num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size:0px;}
.banner .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;}
.banner .num li.on{ background:#F60;}
/*/ 按钮 /*/
.banner .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋体"; display:none;}
.banner:hover .btn{ display:block;}
.banner .btn_l{ left:0;}
.banner .btn_r{ right:0;}




/*/ 第一个轮播 /*/
#ban1 .banner{width: 1000px;height:500px;margin:100px auto; border:5px solid #000; }
#ban1 .banner .img img{width: 1000px;height:500px;}




</style>
</head>
<body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/gdlb.js"></script>





<div id="ban1">
<div class="banner">
<ul class="img">
    <li><a href="#"><img src="images/1.png"></a></li>
        <li><a href="#"><img src="images/2.png"></a></li>
        <li><a href="#"><img src="images/3.png"></a></li>     
    </ul>

    <ul class="num">     
    </ul>

    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>


</div>


</div>
<div id="ban2">
<div class="banner">
<ul class="img">
    <li><a href="#"><img src="images/1.png"></a></li>
        <li><a href="#"><img src="images/2.png"></a></li>
        <li><a href="#"><img src="images/3.png"></a></li>   
        <li><a href="#"><img src="images/4.png"></a></li>    
    </ul>

    <ul class="num">     
    </ul>

    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>


</div>


</div>




</body>
</html>
以下是js文件内容：
//1个是父级名。
$(function(){
imgscrool('#ban1');
imgscrool('#ban2');
})


function imgscrool(obj){
// 控制轮播图片的宽度和高度大小
var width = document.body.scrollWidth;
// console.log(width);
$('.banner .img img').width(width);
var i=0;
var clone=$(obj+" .banner .img li").first().clone();
$(obj+" .banner .img").append(clone);
var size=$(obj+" .banner .img li").size();
for(var j=0;j<size-1;j++){
$(obj+" .banner .num").append("<li></li>");
}
$(obj+" .banner .num li").first().addClass("on");

/*鼠标划入圆点*/
$(obj+" .banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(obj+" .banner .img").stop().animate({left:-index*width},500)
$(this).addClass("on").siblings().removeClass("on")
})

/*自动轮播*/
var t=setInterval(function(){
i++;
move();
},2000)

/*对banner定时器的操作*/
$(obj+" .banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},2000)
})

/*向左的按钮*/
$(obj+" .banner .btn_l").stop(true).delay(800).click(function(){
i--
move(); 
})

/*向右的按钮*/
$(obj+" .banner .btn_r").stop(true).delay(800).click(function(){
i++
move() 
})

function move(){

if(i==size){
$(obj+" .banner  .img").css({left:0})
i=1;
}

// 修改轮播没屏宽度
if(i==-1){
$(obj+" .banner .img").css({left:-(size-1)*width})
i=size-2;
}

$(obj+" .banner .img").stop(true).animate({left:-i*width},500)

if(i==size-1){
$(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on")
}else{ 
$(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on")
}
} 
}