效果展示
定制软件开发首先就是布局，定制软件开发在这里面我们会使用div，ul，li定制软件开发等多个标签，
一.html定制软件开发部分的代码如下
<div class="bigbox"> <div class="dianji"> <li class="left"><</li> <li class="right"> > </li> </div> <ul> <!-- 定制软件开发真正要轮播的只有这5张图片 --> <li> <img src="imagess3/gui.jpg" alt=""> </li> <li> <img src="imagess3/other.jpg" alt=""> </li> <li> <img src="imagess3/huo2.jpg" alt=""> </li> <li> <img src="imagess3/long.jpg" alt=""> </li> <li> <img src="imagess3/qian.jpg" alt=""> </li> </ul> <ol> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
定制软件开发注意我们要在最后加上一张和第一张重复的图片，方便后续功能的实现
ol中装的li时下面的小圆点，left，right分别就是左右切换按钮
二 .css部分如下
<style> /* 首先要去除默认浏览器的样式 */ * { margin: 0px; padding: 0px; } li { list-style: none; } .bigbox { cursor: pointer; overflow: hidden; position: relative; width: 720px; height: 450px; background-color: pink; margin: 150px auto; } /* 设置盒子的宽度，，让其在页面中间的位置显示，并且增加绝对定位， */ /* 为后面左右箭头的设置铺垫 */ /* 左右箭头设置绝对定位，子绝父相*/ .bigbox ul { position: absolute; left: 0px; width: 5000px; height: 455px; } /* 给ul中的宽度设置的宽一些 */ /* ，因为我们刚开始为了方便观看要将多个图片在一行显示 */ .bigbox ul li { width: 720px; float: left; } /* 让每一个li浮动，并且设置宽度和大盒子bigbox一样宽 */ .bigbox .dianji li { display: none; z-index: 99; cursor: pointer; position: absolute; top: 200px; width: 25px; height: 35px; color: #fff; line-height: 35px; text-align: center; border-radius: 8px; background-color: rgba(0, 0, 0, .4); } /* 注意我们要给左右两个点击事件增加绝对定位， */ /* 然后给他们的父级元素增加相对定位，来实现位置的设置 */ .bigbox .left { left: 0px; } .bigbox .right { right: 0px; } /* 设置两个切换按钮的位置 */ /* 注意他们两个相同的一些属性我放在了一起集中统一写了*/ .bigbox ol { position: absolute; bottom: 30px; left: 60px; display: flex; align-items: center; justify-content: center; width: 80px; height: 15px; border-radius: 5px; background-color: rgba(0, 0, 0, .3); } /* 设置ol的位置，采用了flex布局来实现子元素的水平和垂直居中 */ /* 同时也采用了绝对定位来设置位置 */ .bigbox .current { background-color: #ff5000 } .bigbox ol li { cursor: pointer; float: left; margin: 0px 3px; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; } /* 对ol中的li的设置，也就是对小圆点的设置 */ </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
三. 实现
废话不多i说，直接上代码
<script> $(function() { var index = 0; // 建立图片的索引号 var timer = null; // 建立一个定时器 var option = $('.bigbox>ul>li').length; // 获取轮播的图片的长度 var $li = $('<li><img src = "imagess3/gui.jpg" alt = ""</li>') $('.bigbox>ul').append($li); // 新建一个图片和第一张重复，追加到最后面 var imgwidth = $('.bigbox ul li').width(); //获取图片的宽度 //当鼠标移入时两侧的箭头显现，移除时消失并且移入时定时器停止，移 除时定时器开启 $(".bigbox").hover(function() { $(".dianji li").show(); clearInterval(timer) }, function() { $(".dianji li").hide(); go(); }) console.log(option); //设置定时器，并用go函数封装，实现函数的自动播放 function go() { timer = setInterval(function() { if (index < option) { index++; // 当索引号小于图片张数时，索引号加一 $(".bigbox ul").stop().animate({ left: -imgwidth * index + 'px' }) } if (index == option) { $(".bigbox ul").stop().animate({ left: -imgwidth * index + 'px' }) index = 0; $(".bigbox ul").animate({ left: -imgwidth * index + 'px' }, 0) } console.log(index); // 实现下边小圆点的切换 $("ol li").eq(index).addClass('current').siblings().removeClass(); }, 3000) } //右侧点击事件 function right() { $(".right").click(function() { if (index < option) { index++; // 当索引号小于图片张数时，索引号加一 $(".bigbox ul").stop().animate({ left: -imgwidth * index + 'px' }) } if (index == option) { $(".bigbox ul").stop().animate({ left: -imgwidth * index + 'px' }) //当索引号等于图片张数时，这时候放到了重复的那张图片.这个时候可以先执行动画函数让其到这张重复的图片，//然后让索引号变为0，快速的跳转到真正第一张图 index = 0; $(".bigbox ul").animate({ left: -imgwidth * index + 'px' }, 0) } console.log(index); // 实现下边小圆点的切换 $("ol li").eq(index).addClass('current').siblings().removeClass(); }) } right(); //调用函数right // 左侧点击事件 function left() { $(".left").click(function() { if (index > 0) { index--; $(".bigbox ul").animate({ left: -imgwidth * index + 'px' }) } else if (index == 0) { index = option; $(".bigbox ul").animate({ left: -imgwidth * index + 'px' }, 0) index = option - 1; $('.bigbox ul').animate({ left: -imgwidth * index + 'px' }) } //同样的在左侧点击事件中，当此时是在第一张图时，让index=option（图片书） //相当于是最后一张虚拟图（和第一张重复） //那么先快速的跳转到虚拟的第一张图，然后让索引号减一。 //接下来在执行动画函数，此时就切换到了最后一张图 $("ol li").eq(index).addClass('current').siblings().removeClass(); console.log(index); }) } left(); //调用函数left // 点击小圆点实现图片的跳转 $("ol li").click(function() { index = $(this).index(); $(".bigbox ul").animate({ left: -imgwidth * index + 'px' }) $("ol li").eq(index).addClass('current').siblings().removeClass(); }) }) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114