关键词：
上效果：
实现步骤：
最重要的是运动公式！！！
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>总有人比你富有，却比你更聪明更努力！</title> 6 <style type="text/css"> 7 /* css 重置 */ 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 body { 15 background: #fff; 16 font: normal 12px/22px 宋体; 17 } 18 19 img { 20 border: 0; 21 } 22 23 a { 24 text-decoration: none; 25 color: #333; 26 } 27 28 /* 本例子css */ 29 .slideBox { 30 width: 790px; 31 height: 340px; 32 overflow: hidden; 33 position: relative; 34 border: 1px solid #ddd; 35 margin: 50px auto; 36 } 37 38 .bd .hd { 39 height: 20px; 40 /*overflow: hidden;*/ 41 position: absolute; 42 right: 5px; 43 bottom: 5px; 44 z-index: 1; 45 width: 16%; 46 } 47 48 .bd .hd ul { 49 /*overflow: hidden;*/ 50 zoom: 1; 51 float: left!important; 52 } 53 54 .bd .hd ul li { 55 margin-right: 5px!important; 56 width: 20px; 57 height: 20px; 58 line-height: 20px; 59 font-weight: bold; 60 text-align: center; 61 background: #fff; 62 cursor: pointer; 63 border-radius: 50%; 64 float: left; 65 66 } 67 68 .bd .hd ul li.on { 69 background: #f00; 70 color: #fff; 71 72 } 73 74 .slideBox .bd { 75 position: relative; 76 height: 100%; 77 z-index: 0; 78 } 79 80 .slideBox .bd ul{ 81 float: left!important; 82 width: 600%; 83 position: absolute; 84 } 85 86 /* ----------------------- */ 87 .slideBox .bd li { 88 zoom: 1; 89 vertical-align: middle; 90 left: 0; 91 top: 0; 92 float: left; 93 } 94 95 /*.slideBox .bd li.first {*/ 96 /*z-index: 1;*/ 97 /*}*/ 98 99 /* ----------------------- */ 100 .slideBox .bd img { 101 width: 790px; 102 height: 340px; 103 display: block; 104 } 105 106 .slideBox .prev, 107 .slideBox .next { 108 position: absolute; 109 left: 0; 110 top: 50%; 111 margin-top: -25px; 112 display: none; 113 width: 32px; 114 height: 40px; 115 background: rgba(0,0,0,0.3); 116 filter: alpha(opacity=50); 117 opacity: 0.5; 118 text-align: center; 119 font-size: 30px; 120 font-weight: bold; 121 color: #fff; 122 line-height: 40px; 123 } 124 125 .slideBox .next { 126 left: auto; 127 right: 0; 128 background-position: 8px 5px; 129 } 130 131 .slideBox .prev:hover, 132 .slideBox .next:hover { 133 filter: alpha(opacity=100); 134 opacity: 1; 135 } 136 137 138 </style> 139 </head> 140 <body> 141 <div id="slideBox" class="slideBox"> 142 143 <div class="bd" id="bd"> 144 <div class="hd"> 145 <ul id="control"></ul> 146 </div> 147 148 <ul id="imgsUl"></ul> 149 <a class="prev" id="prev" href="javascript:;" ><</a> 150 <a class="next" id="next" href="javascript:;">></a> 151 </div> 152 153 </div> 154 </body> 155 </html> 156 <script> 157 // 记录当前图片下标-- 为了图片索引值同步 158 var imgIndex = 0; 159 var t = null; // 计时器变量 160 var imgWidth =790; 161 var target = 0 ; // 缓动动画移动目标和缓动动画开始位置 162 var autoTimer; 163 // 公共获取事件源函数 164 function $(id) { 165 return document.getElementById(id); 166 } 167 168 // 功能需求类似tab栏，也可参考线上轮播图效果 169 // 获取轮播图区 170 // 获取轮播图 171 var imgArr = [ 172 "images/01.jpg", 173 "images/02.jpg", 174 "images/03.jpg", 175 "images/04.jpg", 176 "images/05.jpg" 177 ]; 178 179 //自动生成小红点li 180 // 默认设置第一个li的className是on 181 // 生成第一个默认li带并设置className = "on" 182 var liArr = []; 183 for(var i = 0 ; i < imgArr.length ; i++ ) { 184 liArr.push('<li></li>') 185 } 186 // 转换成字符串 187 $('control').innerHTML = liArr.join(''); 188 // 设置属性 189 $('control').children[0].setAttribute("class","on") 190 191 192 // 自动生成图片li 193 var imgUl = $("imgsUl"); 194 195 var imgsLis = []; 196 for(var i = 0 ; i < imgArr.length ; i++ ) { 197 imgsLis.push('<li><a href="#"><img id="bigImg" src="'+imgArr[i]+'"/></a></li>') 198 } 199 // 转换成字符串 200 imgUl.innerHTML = imgsLis.join(''); 201 // 克隆第一张图片li 202 imgUl.appendChild(imgUl.children[0].cloneNode(true)); 203 204 205 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮 206 $('bd').onmouseover = function () { 207 $('prev').style.display = "block"; 208 $('next').style.display = "block"; 209 } 210 $('bd').onmouseout = function () { 211 $('prev').style.display = "none"; 212 $('next').style.display = "none"; 213 } 214 215 216 217 // 圆点鼠标移到上面图片轮播 218 var liBtns = $('control').getElementsByTagName('li'); 219 for (var i = imgIndex ; i < liBtns.length ; i++) { 220 // 设置当前按钮下标 221 liBtns[i].index = i; 222 liBtns[i].onmouseover = function () { 223 imgIndex = this.index; 224 // 开启的缓动动画的计时器 225 startInterval(imgIndex); 226 } 227 } 228 229 /*上下轮播图*/ 230 // 下一张轮播图 231 $('next').onclick = function () { 232 clearInterval(t); 233 imgIndex++; 234 if(imgIndex == imgUl.children.length ) { 235 imgUl.style.left = 0; 236 imgIndex = 1; 237 } 238 startInterval(imgIndex); 239 }; 240 // 上一张轮播图 241 $('prev').onclick = function () { 242 clearInterval(t); 243 imgIndex--; 244 if(imgIndex == -1 ) { 245 imgUl.style.left = -imgWidth*(imgUl.children.length-1) +"px"; 246 imgIndex = imgUl.children.length - 2; 247 } 248 startInterval(imgIndex); 249 } 250 251 // 开启缓动动画计时器 252 function startInterval(index) { 253 // 关闭缓动动画计时器 254 clearInterval(t); 255 for(var j = 0 ; j < liBtns.length ; j++) { 256 liBtns[j].className = ""; 257 } 258 liBtns[index%5].className = 'on'; 259 console.log(target+'ttt'); 260 t = setInterval(function () { 261 // 无缝轮播图片 262 target = -index * imgWidth; 263 var speed = (target-imgUl.offsetLeft)/7; 264 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 265 if(target == imgUl.offsetLeft) { 266 clearInterval(t); 267 }else{ 268 imgUl.style.left = imgUl.offsetLeft + speed + "px"; 269 } 270 },30); 271 272 } 273 274 275 276 277 278 279 280 281 </script>
无限循环轮播图之运动框架（原生js）
封装运动框架1functiongetStyle(obj,name){2if(obj.currentStyle){3returnobj.currentStyle[name];4}else{5returngetComputedStyle(obj,false)[name];6}7}8functionmove(obj,json,options){9varoptions=options||{};10vard 查看详情
以运动框架写个轮播图(代码片段)
轮播图：就是图片自动切换式滚动。如下图所示。效果banner思路上一张图片按钮：oLeft-=width;下一张图片按钮：oLeft+=width;注意点：1.varjudge2=false;//用于后面按钮判断，防止切图过程中鼠标多次点击）=》这点用的比较巧妙。实现html... 查看详情
轮播图---左右切换无长滚动效果轮播图-中级难度版
...小圆点数组，prev，记录小圆点的前一个，moveBool是否进入运动函数等1、点击事件：点击左边的leftBn，设置direction="right"，position--，在这要确定position不能超出数组长度范围，超出要重新赋值，点击小圆点把小圆点的当前是lis数组... 查看详情
轮播图-javascript
轮播图一：<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus?"><metaname="Author"content=""><metaname="Keywords"content="" 查看详情
javascript实现的轮播图
当初学习JavaScript的时候，想学习轮播图是怎么写的，结果在百度搜了半天也很难搜出一个完整的轮播图案例。现在就分享一个用js写的轮播图供大家参考和学习，有什么错误的地方或有更好的方法也请大家提出来，... 查看详情
javascript轮播图
代码：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8"/>5<title></title>6<styletype="text/css">7*{margin:0auto;padding:0;}8#LB_div{overflow:hidden;position:rel 查看详情
javascript实现图片轮播图
<!DOCTYPEhtml><html> <head> <script> vartime; functioninit(){ //设置定时操作 time=setInterval("show()",0); //3秒执行一次 setInterval("show1()",1000); } varnum=1; fun 查看详情
javascript详解数据驱动显示之轮播图案例——三-----手撕轮播图(代码片段)
javaScript详解数据驱动显示之轮播图案例三<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE= 查看详情
轮播图
...子，中间会插入一些关于轮播图更多的思考，在后面会用Javascript的方法来写一个轮播图，最后则是关于jquery和Javascript的比较。jquery做轮播图的例子：html部分代码：<!DOCTYPEhtml><html><head><m 查看详情
javascript实现轮播图
1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>carousel</title>6<styletype="text/css">7*{margin:0;padding:0;text-decoration:none;}8body{padding:20 查看详情
javascript-----轮播图插件
一、效果 1、html代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"type="text/css"href="style.css"></head><b 查看详情
详解javascript轮播图一(代码片段)
JavaScript轮播图一源码分析<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge&# 查看详情
原生javascript实现无缝轮播图
无缝轮播图是页面常用的特效之一，然而在实际的开发过程中，大部分的开发者都会使用插件来对轮播图进行开发，那么它的底层到底是怎么实现的呢，本文章将围绕这一问题展开探讨。在讨论如何利用原生JS实现图片之间无缝... 查看详情
javascript学习——实现首页轮播图效果
1、相关技术获取元素document.getElementById(“id名称”)事件(onload)定时操作：setInterval(“changeImg()”,3000);2、步骤分析（此案例轮播图效果是基于HTML&CSS——使用DIV和CSS完成网站首页重构实现的）事先准备三张一样大小的图片（img1... 查看详情
js原生javascript轮播图渐变淡入淡出效果实现（附代码）(代码片段)
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想 代码实现 动态生成底部小圆圈核心思想代码实现 右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码（复制可用）总结前... 查看详情
各种各样的轮播图
...子，中间会插入一些关于轮播图更多的思考，在后面会用Javascript的方法来写一个轮播图，最后则是关于jquery和Javascript的比较。jquery做轮播图的例子：html部分代码：<!DOCTYPEhtml><html><head>&l 查看详情
javascript--轮播图_带计时器
轮播图效果：实现的功能：1.鼠标移入，左右按钮显示2.右下叫小圆点鼠标移入，进入下一张图3.左右按钮点击，右下小圆点页跟随变更4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续... 查看详情
10.21-javascript轮播图
轮播图的制作方法有许多种我觉得最常用的是把所有图都放进一个div里，然后只显示第一张，其余的都隐藏，然后再一张张显示出来：<divid="container"><divid="list"style="left:-600px;"><imgsrc="img/5.jpg"alt="1"/><imgsrc="img/1.jpg"al... 查看详情