码上敲享录 > HTML+CSS实战 > 实现页面图片轮播功能完整代码分享

实现页面图片轮播功能完整代码分享

上一章章节目录下一章 2020-02-28已有2289人阅读 评论(0)

完整页面代码如下,赋值到html页面用浏览器打开就可以预览图片轮播效果:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<style type="text/css">

/*图片轮播*/

.box{

   margin-top: 20px;

   margin-left: 40px;

   height: 180px;

    background-color: white;

   position: relative;

   float: left;

}

.list{

   width: 300px;

   height: 150px;

   overflow: hidden;

   margin: 5px;

}

.next{

   right: 0;

}

.list li{

   position: absolute;

   top: 0;

   left: 0;

   list-style: none;

   opacity: 0;

   transition: all 0.3s ease-out;

}

.list img{

   border: 1px solid #DDD;

   float: left;

}

.list .p1{

   transform:translate3d(-100px,0,0) scale(0.70);

}

.list .p2{

   transform:translate3d(0px,0,0) scale(0.70);

   transform-origin:0 50%;

   opacity: 0.8;

   z-index: 2;

}

.list .p3{

   transform:translate3d(100px,0,0) scale(1);

   z-index: 3;

   opacity: 1;

}

.list .p4{

   transform:translate3d(200px,0,0) scale(0.70);

   transform-origin:100% 50%;

   opacity: 0.8;

   z-index: 2;

}

.list .p5{

   transform:translate3d(300px,0,0) scale(0.70);

}

.list .p6{

   transform:translate3d(400px,0,0) scale(0.70);

}

.list .p7{

   transform:translate3d(500px,0,0) scale(0.70);

}


.buttons{


 /*  width: 600px;*/

   height: 30px;

   bottom: 0;

   margin-left: 0px;

   text-align: center;

   padding-top: 10px;

}

.buttons a{

   display: inline-block;

   width: 35px;

   height: 5px;

   padding-top: 4px;

   cursor: pointer;

}


.buttons span{

   display: block;

   width: 35px;

   height: 1px;

   background: #DDDDDD;

}

.buttons .blue{

   background: #62a60a;

}

/*图片轮播结束*/

</style>

<title>图片轮播演示</title>

<script>

var $a=$(".buttons a");

var $s=$(".buttons span");

var cArr=[".list p7",".list p6",".list p5",".list p4",".list p3",".list p2",".list p1"];

var index=0;

window.onload=function(){

$a=$(".buttons a");

$s=$(".buttons span");

$(".next").click(

function(){

nextimg();

}

)

$(".prev").click(

function(){

previmg();

}

)

$(".buttons a").each(function(){

//通过底下按钮点击切换

$(this).click(function(){

var myindex=$(this).index();

var b=myindex-index;

if(b==0){

return;

}

else if(b>0) {

var newarr=cArr.splice(0,b);

cArr=$.merge(cArr,newarr);

$(".list li").each(function(i,e){

$(e).removeClass().addClass(cArr[i]);

})

index=myindex;

show();

}

else if(b<0){

cArr.reverse();

var oldarr=cArr.splice(0,-b)

cArr=$.merge(cArr,oldarr);

cArr.reverse();

$(".list li").each(function(i,e){

$(e).removeClass().addClass(cArr[i]);

})

index=myindex;

show();

}

})

})

}

//上一张

function previmg(){

cArr.unshift(cArr[6]);

cArr.pop();

//i是元素的索引,从0开始

//e为当前处理的元素

//each循环,当前处理的元素移除所有的class,然后添加数组索引i的class

$(".list li").each(function(i,e){

$(e).removeClass().addClass(cArr[i]);

})

index--;

if (index<0) {

index=6;

}

show();

}


//下一张

function nextimg(){

cArr.push(cArr[0]);

cArr.shift();

$(".list li").each(function(i,e){

$(e).removeClass().addClass(cArr[i]);

})

index++;

if (index>6) {

index=0;

}

show();

}

//改变底下按钮的背景色

function show(){

$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");

}


//点击class为p2的元素触发上一张照片的函数

$(document).on("click",".list .p2",function(){

previmg();

return false;//返回一个false值,让a标签不跳转

});


//点击class为p4的元素触发下一张照片的函数

$(document).on("click",".list .p4",function(){

nextimg();

return false;

});


//鼠标移入box时清除定时器

$(".box").mouseover(function(){

clearInterval(timer);

})


//鼠标移出box时开始定时器

$(".box").mouseleave(function(){

timer=setInterval(nextimg,4000);

})


//进入页面自动开始定时器

timer=setInterval(nextimg,4000);

   </script>

</head>


<body>

<div  class="box">

  <div class="list" >

     <ul>

       <li class="p1"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150" /></a></li>

                     <li class="p2"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150"  /></a></li>

                     <li class="p3"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150"  /></a></li>

                     <li class="p4"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150"  /></a></li>

                     <li class="p5"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150"  /></a></li>

                     <li class="p6"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150"  /></a></li>

                     <li class="p7"><a href=""><img src="/static/images/survey_02.png" alt=""   width="300" height="150"  /></a></li>

                   </ul>

                 </div>

                 <div class="buttons">

                   <a href="javascript:;"><span></span></a>

                   <a href="javascript:;"><span></span></a>

                   <a href="javascript:;"><span></span></a>

                   <a href="javascript:;"><span></span></a>

                   <a href="javascript:;"><span></span></a>

                   <a href="javascript:;"><span></span></a>

                   <a href="javascript:;"><span></span></a>

                 </div>

               </div>

</body>


</html>


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交