新手开始学习js写的一个经常能用到的图片轮播效果
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片轮播</title>
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="index-slider">
<ul>
<li class="li-one liblock"></li>
<li class="li-two linone"></li>
<li class="li-three linone"></li>
<li class="li-four linone"></li>
<li class="li-five linone"></li>
</ul>
</div>
<a href="#" class="slider-lift-btn btn" id="slider-left-btn"><i class="fa fa-angle-left"></i></a>
<a href="#" class="slider-lift-btntwo btn" id="slider-right-btn"><i class="fa fa-angle-right"></i></a>
<div class="posterBlur" id="posterBlur">
<a class="posterBlurOne posterBlurActive" data-value="0"></a>
<a class="posterBlurOne" data-value="1"></a>
<a class="posterBlurOne" data-value="2"></a>
<a class="posterBlurOne" data-value="3"></a>
<a class="posterBlurOne" data-value="4"></a>
</div>
</body>
</html>
jq代码：
1 <script type="text/javascript">
2 /*全屏轮播海报开始*/
3 !(function(){
4 var index=0;//索引值从0开始
5 var thisPost=$(".index-slider ul li");//海报对象
6 var pblur=$("#posterBlur .posterBlurOne");//海报焦点对象
7 var goPoster=setInterval(poster,3000);//倒计时操作dom函数（唯一性）
8 /*海报向左滑动的按钮事件*/
9 $("#slider-left-btn").on("click",function(){
10 index--;
11 if(index<0){
12 index=thisPost.length-1;
13 }
14 switchLeft(index);//函数调用，保证索引值的一致性
15
16 })
17 /*海报向右滑动的按钮事件*/
18 $("#slider-right-btn").on("click",function(){
19 index++;
20 if(index>thisPost.length-1){
21 index=0;
22 thisPost.eq(thisPost.length-1).fadeOut(2000);
23 }
24 switchRight(index);
25
26 })
27 /*海报焦点点击切换*/
28 pblur.on("click",function(){
29 var thisBlur=$(this).attr("data-value");//当前点击的焦点的data-value值(data-value值与海报索引值匹配)
30 thisPost.eq(thisBlur).fadeIn(2000);//与当前点击的焦点获得的值相等索引值的海报显示
31 thisPost.eq(index).fadeOut(2000);//海报自动轮播时当时正在展示的海报隐藏
32 pblur.removeClass("posterBlurActive");//自动展示激活的焦点关闭激活状态
33 pblur.eq(thisBlur).addClass("posterBlurActive");//点击的焦点激活
34 index=thisBlur;//将索引值重置为点前点击焦点所返回的值
35 console.log(thisBlur);
36 })
37 /*海报向左滑动的按钮点击之后调用的函数*/
38 function switchLeft(index){
39 console.log(index);
40 thisPost.eq(index).fadeIn(2000);
41 thisPost.eq(index).next().fadeOut(2000);
42 pblur.removeClass("posterBlurActive");//自动展示激活的焦点关闭激活状态
43 pblur.eq(index).addClass("posterBlurActive");//点击的焦点激活
44 }
45 /*海报向右滑动的按钮点击之后调用的函数*/
46 function switchRight(index){
47 console.log(index);
48 thisPost.eq(index).fadeIn(2000);
49 thisPost.eq(index).prev().fadeOut(2000);
50 pblur.removeClass("posterBlurActive");//自动展示激活的焦点关闭激活状态
51 pblur.eq(index).addClass("posterBlurActive");//点击的焦点激活
52 }
53 /*海报焦点自滚动函数*/
54 function switchPblur(index){
55 pblur.eq(index).addClass("posterBlurActive");
56 pblur.eq(index).prev().removeClass("posterBlurActive");
57 }
58 /*公用的倒计时函数*/
59 function poster(){
60 index++;
61 if(index<thisPost.length){
62 switchRight(index);
63 switchPblur(index);
64 }
65 if(index>thisPost.length-1){
66 index=0;
67 thisPost.eq(thisPost.length-1).fadeOut(2000);
68 pblur.eq(pblur.length-1).removeClass("posterBlurActive");
69 switchRight(index);
70 switchPblur(index);
71 }
72 }
73 /*鼠标悬浮在左右按钮时计时函数停止运行*/
74 $(".btn").on("mouseover",function(){
75 clearInterval(goPoster);
76 })
77 /*鼠标离开左右按钮时计时函数开始继续运行*/
78 $(".btn").on("mouseout",function(){
79 goPoster=setInterval(poster,3000);
80 })
81 /*鼠标移到焦点上时停止计时函数运行*/
82 pblur.on("mouseover",function(){
83 clearInterval(goPoster);
84 })
85 /*鼠标移出焦点时计时函数继续运行*/
86 pblur.on("mouseout",function(){
87 goPoster=setInterval(poster,3000);
88 })
89 })();
90 /*全屏轮播海报结束*/
91 </script>
css样式代码：
1 <style>
2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
3 .index-slider{position: relative;z-index: 1;height: 720px;}
4 .index-slider li{position: absolute;top: 0;left: 0;width: 100%;height: 720px;}
5 .liblock{display: block;}
6 .linone{display: none;}
7 .index-slider .li-one{background: url(../images/01.png);background-repeat: no-repeat;background-size: cover;background-position: center;}
8 .index-slider .li-two{background: url(../images/02.png);background-repeat: no-repeat;background-size: cover;background-position: center;}
9 .index-slider .li-three{background: url(../images/03.png);background-repeat: no-repeat;background-size: cover;background-position: center;}
10 .index-slider .li-four{background: url(../images/04.png);background-repeat: no-repeat;background-size: cover;background-position: center;}
11 .index-slider .li-five{background: url(../images/05.png);background-repeat: no-repeat;background-size: cover;background-position: center;}
12 .slider-lift-btn{display: block;position: absolute; width: 45px;height: 80px;background: #cf0f32;top: 40%;z-index: 5;left: 0;}
13 .slider-lift-btn i{position: relative;top: 35%;left: 40%;font-size: 20px;color: #fff;}
14 .slider-lift-btntwo{display: block;position: absolute; width: 45px;height: 80px;background: #cf0f32;top: 40%;z-index: 5;right: 0;}
15 .slider-lift-btntwo i{position: relative;top: 35%;left: 50%; font-size: 20px;color: #fff;}
16
17 .posterBlur{position: absolute;top: 0px;right: 19%;}
18 .posterBlurOne{background-image: url(../images/postBlur.png);background-repeat: no-repeat;background-position:-37px 0;float: left;z-index: 999;height: 20px;width: 20px;position: relative;z-index: 999;margin:0 5px; top: 575px;left: 75%;}
19 .posterBlurActive{background-image: url(../images/postBlur.png);background-repeat: no-repeat;background-position:0 -37px;float: left;z-index: 999;height: 20px;width: 20px;position: relative;z-index: 999;margin:0 5px; top: 575px;left: 75%;}
20
21 .sliderDetail{display: block;position: relative;margin: 0 auto;width: 1230px;height: 100%;}
22 .sliderDetailContent{position: absolute;left: 95px;top: 260px;width: 490px;}
23 .sliderDetailContent h2{font-size: 44px;color: #fff;text-align: left;}
24 .sliderDetailContent p{font-size: 15px;text-align: left;margin: 15px 0 30px;line-height: 30px;border-top: 1px solid #CF1132;padding-top: 10px;}
25 .sliderDetailContent span{background-image: url(../images/btnContent.png);background-repeat: no-repeat;display: block;width: 140px;height: 50px;}
26 </style>
时间： 2024-10-13 04:38:50