classname ima javascrip ive margin pla tom append mouse
最重要的是运动公式!!!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>总有人比你富有,却比你更聪明更努力!</title>
- <style type="text/CSS">
- /* css 重置 */
- * {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- body {
- background: #fff;
- font: normal 12px/22px 宋体;
- }
- img {
- border: 0;
- }
- a {
- text-decoration: none;
- color: #333;
- }
- /* 本例子css */
- .slideBox {
- width: 790px;
- height: 340px;
- overflow: hidden;
- position: relative;
- border: 1px solid #ddd;
- margin: 50px auto;
- }
- .bd .hd {
- height: 20px;
- /*overflow: hidden;*/
- position: absolute;
- right: 5px;
- bottom: 5px;
- z-index: 1;
- width: 16%;
- }
- .bd .hd ul {
- /*overflow: hidden;*/
- zoom: 1;
- float: left!important;
- }
- .bd .hd ul li {
- margin-right: 5px!important;
- width: 20px;
- height: 20px;
- line-height: 20px;
- font-weight: bold;
- text-align: center;
- background: #fff;
- cursor: pointer;
- border-radius: 50%;
- float: left;
- }
- .bd .hd ul li.on {
- background: #f00;
- color: #fff;
- }
- .slideBox .bd {
- position: relative;
- height: 100%;
- z-index: 0;
- }
- .slideBox .bd ul{
- float: left!important;
- width: 600%;
- position: absolute;
- }
- /* ----------------------- */
- .slideBox .bd li {
- zoom: 1;
- vertical-align: middle;
- left: 0;
- top: 0;
- float: left;
- }
- /*.slideBox .bd li.first {*/
- /*z-index: 1;*/
- /*}*/
- /* ----------------------- */
- .slideBox .bd img {
- width: 790px;
- height: 340px;
- display: block;
- }
- .slideBox .prev,
- .slideBox .next {
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -25px;
- display: none;
- width: 32px;
- height: 40px;
- background: rgba(0,0,0,0.3);
- filter: alpha(opacity=50);
- opacity: 0.5;
- text-align: center;
- font-size: 30px;
- font-weight: bold;
- color: #fff;
- line-height: 40px;
- }
- .slideBox .next {
- left: auto;
- right: 0;
- background-position: 8px 5px;
- }
- .slideBox .prev:hover,
- .slideBox .next:hover {
- filter: alpha(opacity=100);
- opacity: 1;
- }
- </style>
- </head>
- <body>
- <div id="slideBox" class="slideBox">
- <div class="bd" id="bd">
- <div class="hd">
- <ul id="control"></ul>
- </div>
- <ul id="imgsUl"></ul>
- <a class="prev" id="prev" href="javascript:;" ><</a>
- <a class="next" id="next" href="javascript:;">></a>
- </div>
- </div>
- </body>
- </html>
- <script>
- // 记录当前图片下标-- 为了图片索引值同步
- var imgIndex = 0;
- var t = null; // 计时器变量
- var imgWidth =790;
- var target = 0 ; // 缓动动画移动目标和缓动动画开始位置
- var autoTimer;
- // 公共获取事件源函数
- function $(id) {
- return document.getElementById(id);
- }
- // 功能需求类似tab栏,也可参考线上轮播图效果
- // 获取轮播图区
- // 获取轮播图
- var imgArr = [
- "images/01.jpg",
- "images/02.jpg",
- "images/03.jpg",
- "images/04.jpg",
- "images/05.jpg"
- ];
- //自动生成小红点li
- // 默认设置第一个li的className是on
- // 生成第一个默认li带并设置className = "on"
- var liArr = [];
- for(var i = 0 ; i < imgArr.length ; i++ ) {
- liArr.push(‘<li></li>‘)
- }
- // 转换成字符串
- $(‘control‘).innerHTML = liArr.join(‘‘);
- // 设置属性
- $(‘control‘).children[0].setAttribute("class","on")
- // 自动生成图片li
- var imgUl = $("imgsUl");
- var imgsLis = [];
- for(var i = 0 ; i < imgArr.length ; i++ ) {
- imgsLis.push(‘<li><a href="#"><img id="bigImg" src="‘+imgArr[i]+‘"/></a></li>‘)
- }
- // 转换成字符串
- imgUl.innerHTML = imgsLis.join(‘‘);
- // 克隆第一张图片li
- imgUl.appendChild(imgUl.children[0].cloneNode(true));
- // 前后按钮功能:1.鼠标移入轮播图区,显示前后按钮,移出消失前后按钮
- $(‘bd‘).onmouseover = function () {
- $(‘prev‘).style.display = "block";
- $(‘next‘).style.display = "block";
- }
- $(‘bd‘).onmouseout = function () {
- $(‘prev‘).style.display = "none";
- $(‘next‘).style.display = "none";
- }
- // 圆点鼠标移到上面图片轮播
- var liBtns = $(‘control‘).getElementsByTagName(‘li‘);
- for (var i = imgIndex ; i < liBtns.length ; i++) {
- // 设置当前按钮下标
- liBtns[i].index = i;
- liBtns[i].onmouseover = function () {
- imgIndex = this.index;
- // 开启的缓动动画的计时器
- startInterval(imgIndex);
- }
- }
- /*上下轮播图*/
- // 下一张轮播图
- $(‘next‘).onclick = function () {
- clearInterval(t);
- imgIndex++;
- if(imgIndex == imgUl.children.length ) {
- imgUl.style.left = 0;
- imgIndex = 1;
- }
- startInterval(imgIndex);
- };
- // 上一张轮播图
- $(‘prev‘).onclick = function () {
- clearInterval(t);
- imgIndex--;
- if(imgIndex == -1 ) {
- imgUl.style.left = -imgWidth*(imgUl.children.length-1) +"px";
- imgIndex = imgUl.children.length - 2;
- }
- startInterval(imgIndex);
- }
- // 开启缓动动画计时器
- function startInterval(index) {
- // 关闭缓动动画计时器
- clearInterval(t);
- for(var j = 0 ; j < liBtns.length ; j++) {
- liBtns[j].className = "";
- }
- liBtns[index%5].className = ‘on‘;
- console.log(target+‘ttt‘);
- t = setInterval(function () {
- // 无缝轮播图片
- target = -index * imgWidth;
- var speed = (target-imgUl.offsetLeft)/7;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if(target == imgUl.offsetLeft) {
- clearInterval(t);
- }else{
- imgUl.style.left = imgUl.offsetLeft + speed + "px";
- }
- },30);
- }
- </script>
JavaScript--缓动运动+轮播图
来源: http://www.bubuko.com/infodetail-2360661.html