谁会弄那种12345轮播图片 带链接的 用HTML语言能实现吗. 反正不能用JS.万恶的TX不让用JS. CSS好像可以
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谁会弄那种12345轮播图片 带链接的 用HTML语言能实现吗. 反正不能用JS.万恶的TX不让用JS. CSS好像可以相关的知识，希望对你有一定的参考价值。
基本都是 JS+css样式+html标签 实现的。。。如果不会 很难实现，实在不行 用flash 做个也行 但是比较麻烦
<style type="text/css" media="all">
.d1width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;
.loadingwidth:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:230px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;
.d2width:100%;height:230px;overflow:hidden;
.num_listposition:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;
.num_list spandisplay:inline-block;height:16px;padding-left:6px;
imgborder:0px;
.aaadisplay:none;
.buttonposition:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;
.b1,.b2background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;
.b2color:#FFCC33;background-color:#FF6633;
</style>
<script language="javascript" type="text/javascript">
//主函数
var s=function()
var interv=2000; //切换间隔时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //焦点轮换图片容器的id名称
//获取对象
function getTag(tag,obj)if(obj==null)return document.getElementsByTagName(tag)elsereturn obj.getElementsByTagName(tag)
function getid(id)return document.getElementById(id);
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++)var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function()clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();;a.className="b1";a.onmouseover=function()this.className="b2";a.onmouseout=function()this.className="b1";sc(j);button.appendChild(a);
//控制图层透明度
function alpha(obj,n)if(document.all)obj.style.filter="alpha(opacity="+n+")";elseobj.style.opacity=(n/100);
//控制焦点按钮
function sc(n)for(var i=0;i<li.length;i++)button.childNodes[i].className="b1";button.childNodes[n].className="b2";
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function()opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0)sc(j);num=-2;scrolltxt();scton=1;if(opac<100)timer=setTimeout(fadeon,interv2)elsetimer2=setTimeout(fadeout,interv);;
//渐隐
var fadeout=function()opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0)num=2;scrolltxt();scton=1;if(opac>0)timer=setTimeout(fadeout,interv2)elseif(j<li.length-1)j++elsej=0;fadeon();
//滚动文字
var scrolltxt=function()t+=num;span.style.marginTop=t+"px";if(num<0 && t>3)timer3=setTimeout(scrolltxt,interv2)else if(num>0 && t<62)timer3=setTimeout(scrolltxt,interv2)elsescton=0;
fadeon();
//初始化
window.onload=s;
</script>
<div id="fade_focus" style="width:440px; height:230">
<div class="loading">Loading...<br /><img src="200932411630437.gif" /></div>
<ul class="aaa">
图片 也可以放数据库读取出来的内容
看自己需求写多少个。。自动轮播的
</ul>
</div> 参考技术A 很负责任的告诉你纯html+css是不行的··再怎么简单都要用到onmouseover,onclick等这样的简单的语句，来切换css·· 参考技术B 一般这种切换效果是通过Javacript + Flash + CSS来实现的，当然也有的不用flash，但是javascript是一定要用到的，否则没法子实现。 参考技术C FLASH啊
JavaScript--轮播图_带计时器
轮播图效果：
实现的功能：
1.鼠标移入，左右按钮显示
2.右下叫小圆点鼠标移入，进入下一张图
3.左右按钮点击，右下小圆点页跟随变更
4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）
5.移入左右按钮，计时器消失，移出左右按钮计时器出现，封装了公共切换图片
实现代码：
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 } 46 47 .bd .hd ul { 48 overflow: hidden; 49 zoom: 1; 50 float: left!important; 51 } 52 53 .bd .hd ul li { 54 float: left; 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 } 65 66 .bd .hd ul li.on { 67 background: #f00; 68 color: #fff; 69 } 70 71 .slideBox .bd { 72 position: relative; 73 height: 100%; 74 z-index: 0; 75 } 76 77 /* ----------------------- */ 78 .slideBox .bd li { 79 zoom: 1; 80 vertical-align: middle; 81 left: 0; 82 top: 0; 83 } 84 85 .slideBox .bd li.first { 86 z-index: 1; 87 } 88 89 /* ----------------------- */ 90 .slideBox .bd img { 91 width: 790px; 92 height: 340px; 93 display: block; 94 } 95 96 .slideBox .prev, 97 .slideBox .next { 98 position: absolute; 99 left: 0; 100 top: 50%; 101 margin-top: -25px; 102 display: none; 103 width: 32px; 104 height: 40px; 105 background: rgba(0,0,0,0.3); 106 filter: alpha(opacity=50); 107 opacity: 0.5; 108 text-align: center; 109 font-size: 30px; 110 font-weight: bold; 111 color: #fff; 112 line-height: 40px; 113 } 114 115 .slideBox .next { 116 left: auto; 117 right: 0; 118 background-position: 8px 5px; 119 } 120 121 .slideBox .prev:hover, 122 .slideBox .next:hover { 123 filter: alpha(opacity=100); 124 opacity: 1; 125 } 126 127 128 </style> 129 </head> 130 <body> 131 <div id="slideBox" class="slideBox"> 132 133 <div class="bd" id="bd"> 134 <div class="hd"> 135 <ul id="control"> 136 <li class="on"></li> 137 <li></li> 138 <li></li> 139 <li></li> 140 <li></li> 141 </ul> 142 </div> 143 144 <ul> 145 <li><a href="#"><img id="bigImg" src="images/01.jpg"/></a></li> 146 </ul> 147 <a class="prev" id="prev" href="javascript:;" ><</a> 148 <a class="next" id="next" href="javascript:;">></a> 149 </div> 150 151 </div> 152 </body> 153 </html> 154 <script> 155 156 // 公共获取事件源函数 157 function $(id) { 158 return document.getElementById(id); 159 } 160 // 切换轮播图 161 function changImg(imgIndex) { 162 $(\'bigImg\').src= imgArr[imgIndex]; 163 console.log(imgIndex); 164 // 排他思想 165 for(var j = 0 ; j < liBtns.length ; j++) { 166 liBtns[j].className = ""; 167 } 168 // 设置小红点样式 169 liBtns[imgIndex].className = \'on\'; 170 } 171 // 功能需求类似tab栏，也可参考线上轮播图效果 172 // 获取轮播图区 173 // 获取轮播图 174 var imgArr = [ 175 "images/01.jpg", 176 "images/02.jpg", 177 "images/03.jpg", 178 "images/04.jpg", 179 "images/05.jpg" 180 ]; 181 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮 182 $(\'bd\').onmouseover = function () { 183 $(\'prev\').style.display = "block"; 184 $(\'next\').style.display = "block"; 185 } 186 $(\'bd\').onmouseout = function () { 187 $(\'prev\').style.display = "none"; 188 $(\'next\').style.display = "none"; 189 } 190 // 记录当前图片下标-- 为了图片索引值同步 191 var imgIndex = 0; 192 193 194 195 /* 计时器,3秒切换到下一张轮播图*/ 196 var t; // 计时器变量 197 function interval() { 198 t = setInterval( 199 function () { 200 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++; 201 // 设置下一张图片 202 changImg(imgIndex); 203 } 204 ,3000); 205 } 206 207 // 鼠标移入圆点区，关闭计时器 208 $(\'control\').onmouseover = function () { 209 clearInterval(t); 210 } 211 // 鼠标移开圆点区，开启计时器自动切换轮播图 212 $(\'control\').onmouseout = function () { 213 interval(); 214 } 215 // 鼠标移入上，下一张图片的按钮是关闭计时器 216 $(\'next\').onmouseover = function () { 217 clearInterval(t); 218 } 219 $(\'prev\').onmouseover = function () { 220 clearInterval(t); 221 } 222 223 // 把鼠标移出上下一张图片区域,开启计时器 224 $(\'next\').onmouseout = function () { 225 interval(); 226 } 227 $(\'prev\').onmouseout = function () { 228 interval(); 229 } 230 interval(); 231 232 233 234 // 圆点鼠标移到上面图片轮播 235 var liBtns = $(\'control\').getElementsByTagName(\'li\'); 236 for (var i = imgIndex ; i < liBtns.length ; i++) { 237 // 设置当前按钮下标 238 liBtns[i].index = i; 239 liBtns[i].onmouseover = function () { 240 changImg(this.index); 241 imgIndex = this.index; 242 } 243 } 244 245 /*上下轮播图*/ 246 // 下一张轮播图 247 $(\'next\').onclick = function () { 248 // 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播 249 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++; 250 // 设置下一张图片 251 changImg(imgIndex); 252 253 254 } 255 // 上一张轮播图 256 $(\'prev\').onclick = function () { 257 // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播 258 imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --; 259 // 设置上一张轮图片 260 changImg(imgIndex); 261 } 262 263 264 265 266 </script>
下面是轮播图的小红点是JS动态生成的：
主要与上面代码的区别是： 灰色代码区的HTML结构部分 黄色代码区域的JS部分
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 } 46 47 .bd .hd ul { 48 overflow: hidden; 49 zoom: 1; 50 float: left!important; 51 } 52 53 .bd .hd ul li { 54 float: left; 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 } 65 66 .bd .hd ul li.on { 67 background: #f00; 68 color: #fff; 69 } 70 71 .slideBox .bd { 72 position: relative; 73 height: 100%; 74 z-index: 0; 75 } 76 77 /* ----------------------- */ 78 .slideBox .bd li { 79 zoom: 1; 80 vertical-align: middle; 81 left: 0; 82 top: 0; 83 } 84 85 .slideBox .bd li.first { 86 z-index: 1; 87 } 88 89 /* ----------------------- */ 90 .slideBox .bd img { 91 width: 790px; 92 height: 340px; 93 display: block; 94 } 95 96 .slideBox .prev, 97 .slideBox .next { 98 position: absolute; 99 left: 0; 100 top: 50%; 101 margin-top: -25px; 102 display: none; 103 width: 32px; 104 height: 40px; 105 background: rgba(0,0,0,0.3); 106 filter: alpha(opacity=50); 107 opacity: 0.5; 108 text-align: center; 109 font-size: 30px; 110 font-weight: bold; 111 color: #fff; 112 line-height: 40px; 113 } 114 115 .slideBox .next { 116 left: auto; 117 right: 0; 118 background-position: 8px 5px; 119 } 120 121 .slideBox .prev:hover, 122 .slideBox .next:hover { 123 filter: alpha(opacity=100); 124 opacity: 1; 125 } 126 127 128 </style> 129 </head> 130 <body> 131 <div id="slideBox" class="slideBox"> 132 133 <div class="bd" id="bd"> 134 <div class="hd"> 135 <ul id="control"> 136 137 </ul> 138 </div> 139 140 <ul> 141 <li><a href="#"><img id="bigImg" src="images/01.jpg"/></a></li> 142 </ul> 143 <a class="prev" id="prev" href="javascript:;" ><</a> 144 <a class="next" id="next" href="javascript:;">></a> 145 </div> 146 147 </div> 148 </body> 149 </html> 150 <script> 151 // 记录当前图片下标-- 为了图片索引值同步 152 var imgIndex = 0; 153 var t; // 计时器变量 154 // 公共获取事件源函数 155 function $(id) { 156 return document.getElementById(id); 157 } 158 // 切换轮播图 159 function changImg(imgIndex) { 160 $(\'bigImg\').src= imgArr[imgIndex]; 161 console.log(imgIndex); 162 // 排他思想 163 for(var j = 0 ; j < liBtns.length ; j++) { 164 liBtns[j].className = ""; 165 } 166 // 设置小红点样式 167 liBtns[imgIndex].className = \'on\'; 168 } 169 // 功能需求类似tab栏，也可参考线上轮播图效果 170 // 获取轮播图区 171 // 获取轮播图 172 var imgArr = [ 173 "images/01.jpg", 174 "images/02.jpg", 175 "images/03.jpg", 176 "images/04.jpg", 177 "images/05.jpg" 178 ]; 179 180 //自动生成li 181 // 默认设置第一个li的className是on 182 // 生成第一个默认li带并设置className = "on" 183 var liArr = []; 184 for(var i = 0 ; i < imgArr.length ; i++ ) { 185 liArr.push(\'<li></li>\') 186 } 187 // 转换成字符串 188 $(\'control\').innerHTML = liArr.join(\'\'); 189 // 设置属性 190 $(\'control\').children[0].setAttribute("class","on") 191 192 193 194 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮 195 $(\'bd\').onmouseover = function () { 196 $(\'prev\').style.display = "block"; 197 $(\'next\').style.display = "block"; 198 } 199 $(\'bd\').onmouseout = function () { 200 $(\'prev\').style.display = "none"; 201 $(\'next\').style.display = "none"; 202 } 203 204 205 //下一张图片函数提取 206 function nextImg() { 207 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++; 208 // 设置下一张图片 209 changImg(imgIndex); 210 } 211 212 /* 计时器,3秒切换到下一张轮播图*/ 213 214 function interval() { 215 t = setInterval(nextImg,3000); 216 } 217 218 // 鼠标移入圆点区，关闭计时器 219 $(\'control\').onmouseover = function () { 220 clearInterval(t); 221 } 222 // 鼠标移开圆点区，开启计时器自动切换轮播图 223 $(\'control\').onmouseout = function () { 224 interval(); 225 } 226 // 鼠标移入上，下一张图片的按钮是关闭计时器 227 $(\'next\').onmouseover = function () { 228 clearInterval(t); 229 } 230 $(\'prev\').onmouseover = function () { 231 clearInterval(t); 232 } 233 234 // 把鼠标移出上下一张图片区域,开启计时器 235 $(\'next\').onmouseout = function () { 236 interval(); 237 } 238 $(\'prev\').onmouseout = function () { 239 interval(); 240 } 241 interval(); 242 243 244 245 // 圆点鼠标移到上面图片轮播 246 var liBtns = $(\'control\').getElementsByTagName(\'li\'); 247 for (var i = imgIndex ; i < liBtns.length ; i++) { 248 // 设置当前按钮下标 249 liBtns[i].index = i; 250 liBtns[i].onmouseover = function () { 251 changImg(this.index); 252 imgIndex = this淘宝首页宽屏图片轮播代码