本文目录
JS里做轮播图怎么用display做
var obj=document.getElementsByClassName(’obj’);var cur=0;setinterval(function(){for(i=0;i《obj.length;i++){obj.style.display=’none’;}obj.style.display=’block’;cur++;if(cur》=obj.length){cur=0;}},30)
你试一下看行不行，我想应该可以吧，能行的话采纳下
如何用javascript实现轮播图
function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle; 4 } else{ 5 return getComputedStyle(obj,false); 6 } 7 } 8 9 function startMove(obj, json, fnEnd) {10 clearInterval(obj.timer);11 obj.timer = setInterval(function() {12 var bStop = true;13 for (var attr in json) {14 var cur = 0;15 if (attr == "opacity") {16 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);17 } else {18 cur = parseInt(getStyle(obj, attr))19 }20 var speed = (json - cur) / 10;21 speed = speed 》 0 ? Math.ceil(speed) : Math.floor(speed);22 if (cur !== json) {23 bStop = false;24 };25 if (attr == "opacity") {26 obj.style.opacity = (speed + cur) / 100;27 obj.style.filter = ’alpha(opacity:’ + (speed + cur) + ’)’;28 } else {29 obj.style = cur + speed + ’px’;30 }31 }32 if (bStop) {33 clearInterval(obj.timer);34 if (fnEnd) fnEnd();35 }36 }, 30)37 }然后写轮播小案例 1 《!DOCTYPE html》 2 《html lang="en"》 3 4 《head》 5 《meta charset="UTF-8"》 6 《title》淘宝轮播《/title》 7 《style》 8 ul, 9 li { 10 list-style: none; 11 margin: 0; 12 padding: 0; 13 } 14 15 #wrap { 16 width: 400px; 17 height: 225px; 18 margin: 0 auto; 19 position: relative; 20 overflow: hidden; 21 } 22 23 li { 24 float: left; 25 } 26 27 #tips li { 28 margin: 5px; 29 border: 1px solid #f60; 30 width: 20px; 31 height: 20px; 32 line-height: 20px; 33 text-align: center; 34 color: white; 35 cursor: pointer; 36 } 37 38 .active { 39 background: #f60; 40 } 41 42 img { 43 vertical-align: top; 44 width: 400px; 45 } 46 47 #content { 48 width: 2400px; 49 position: absolute; 50 left: -1200px; 51 } 52 53 #content li { 54 float: left; 55 } 56 57 #tips { 58 position: absolute; 59 right: 20px; 60 bottom: 5px; 61 } 62 《/style》 63 《/head》 64 65 《body》 66 《div id="wrap"》 67 《ul id="content"》 68 《li》《img src="img3/1.jpg" alt=""》《/li》 69 《li》《img src="img3/2.jpg" alt=""》《/li》 70 《li》《img src="img3/3.jpg" alt=""》《/li》 71 《li》《img src="img3/4.jpg" alt=""》《/li》 72 《li》《img src="img3/5.jpg" alt=""》《/li》 73 《li》《img src="img3/6.jpg" alt=""》《/li》 74 《/ul》 75 《ul id="tips"》 76 《li》1《/li》 77 《li》2《/li》 78 《li》3《/li》 79 《li》4《/li》 80 《li》5《/li》 81 《/ul》 82 《/div》 83 《script src="move.js"》《/script》 84 《script》 85 var wrap = document.getElementById(’wrap’); 86 var content = document.getElementById(’content’); 87 var tips = document.getElementById(’tips’); 88 var aLi = tips.getElementsByTagName(’li’); 89 var now = 0; 90 //var 91 for (var i = 0; i 《 aLi.length; i++) { 92 aLi.className = ’active’; //把初始状态定义好 93 content.style.left = 0 +’px’; 94 aLi.index = i; //自定义属性 95 aLi.onclick = function() { 96 now = this.index; 97 play(); 98 } 99 }100 101 function play() {102 for (var j = 0; j 《 aLi.length; j++) {103 aLi.className = ’’;104 }105 aLi.className = ’active’;106 107 //this.index = now; //反过来写就不对了大兄弟108 //content.style.left = -400 * this.index + ’px’;109 startMove(content, {110 left: -400 * now, //你还真别说，json格式就是这么写的111 });112 }113 114 function autoPlay() {115 now++;116 if (now == aLi.length) {117 now = 0;118 }119 play();120 }121 122 var timer = setInterval(autoPlay, 2000);123 wrap.onmouseover = function(){ //这里如果把事件绑定到ul上的话，那么鼠标移入，下面对饮的li会不起作用，124 clearInterval(timer); //因为li的层级比较高，所以应该把事件绑定到大的div上125 }126 wrap.onmouseout = function(){127 timer = setInterval(autoPlay,2000);128 //setInterval(autoPlay,2000); 不能这么写，凡是开的定时器，必须得赋值，要不然总会多开一个定时器，导致速度加快129 }130 《/script》131 《/body》132 133 《/html》
javascript 轮播 缩略图 怎么实现
javascript 轮播 缩略图 实现《html》《head》***隐藏网址***《style》*{padding:0;margin:0;}#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}#title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}#bottom{bottom:0;cursor:pointer;}#bottom span{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}#bottom span.active{background: #FFFF33;}#bottom span div {position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}#bottom span div:after{content:’’;position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}#bottom span img {width:100px;height:100px;border:5px solid #fff;}#left, #right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}#left:hover,#right:hover{filter(opacity:100);opacity:1;}#left{left:0px;}#right{right:0px;}#img{width:400px;height:500px;}《/style》《script》window.onload = function () {var bottom = $(’bottom’),title = $(’title’),img = $(’img’),left = $(’left’),right = $(’right’);var aSpan = bottom.getElementsByTagName(’span’);var aDiv = bottom.getElementsByTagName(’div’);var arr = ;var num = 0;// 初始化picTab();// 点击下一张right.onclick = function () {if (num === aDiv.length - 1) num = -1;num++;picTab();}// 点击上一张left.onclick = function () {if (num === 0) num = aDiv.length;num--;picTab();}function picTab() {title.innerHTML = arr;img.src = ’img/’ + (num + 1) + ’.png’;for ( var i = 0; i 《 aSpan.length; i++ ) {aSpan.className = ’’;}aSpan.className = ’active’;}// 鼠标移入移出显示缩略图for ( var i = 0; i 《 aSpan.length; i++ ) {aSpan.index = i;aSpan.onmouseover = function () {aDiv.style.display = ’block’;}aSpan.onmouseout = function () {aDiv.style.display = ’none’;}aSpan.onclick = function () {num = this.index;picTab();}}function $(id) { return document.getElementById(id);}}《/script》《/head》《body》《div id="content"》《div id="title"》带缩略图的轮播《/div》《div id="left"》《《/div》《div id="right"》》《/div》《div id="bottom"》《span》《div》《img src="img/1.png"/》《/div》《/span》《span》《div》《img src="img/2.png"/》《/div》《/span》《span》《div》《img src="img/3.png"/》《/div》《/span》《span》《div》《img src="img/4.png"/》《/div》《/span》《/div》《img src="" id="img"/》《/div》《/body》《/html》
