首页 > 代码库 > 基于css和js的轮播效果图实现
基于css和js的轮播效果图实现
基于css和js的轮播效果图实现
第一篇：效果图
1、先啥也不说直接上效果图
第二篇：详细讲解
1、 建立容器 #box 给其设置相关属性（注意：overflow:hidden;）
2、 Box中包括有ul li 以及a标签。在图片描述的时候，确保span所在层置顶。
3、
<div class="innerText"> </div><span class="innerText1">第一辆车</span>另外，若不希望层的透明度影响字体的透明度，需要将其分离出来。
遇到的一个小问题：当所有样式设定后，发现a标签无法点击。应该将其设置为所有层的最顶端。（z-index:999）
Css样式如下：
<style type="text/css">#box { position:relative;width:480px; height:300px; float: left; text-align: left;}#box .imgList{ position:relative; width:480px; height:300px; overflow:hidden;}#box .imgList li{ position:absolute; top:0; left:0; width:480px; height:300px;}#box .countNum{ position:absolute; right:0; bottom:5px; z-index: 999;}#box .countNum li{ width:20px; height:20px; float:left; color:#fff; border-radius:20px; background:#fff; text-align:center; margin-right:5px; cursor:pointer;opacity:1; filter:alpha(opacity=100);margin-bottom: 5px;}#box .countNum li.current{ background:#f60; font-weight:bold; opacity:1; filter:alpha(opacity=70);}.innerText { height: 50px; font:17.93px/30px"microsoft yahei"; width:480px;line-height: 50px; z-index:100;text-align: left;position: absolute;top: 250px;opacity: 0.4;color: #fff;background: rgb(76,76,76); }.innerText1 { height: 50px; font:17.93px/30px"microsoft yahei"; width:460px;line-height: 50px;text-align: left;position: absolute;top: 250px;color: #fff;z-index: 998;text-decoration: none;margin-left: 20px;}.innerText1 a{ text-decoration: none; color: #fff;}.innerText1 a:hover{ color: #ff0; text-decoration: none;}.innerText1 a :visited{ color: #fff; text-decoration: none;}</style>
4、js实现如下(参看注释即可)：
function runImg() {} //轮播效果基础函数runImg.prototype = {bigbox: null, //最外层容器boxul: null, //子容器ulimglist: null, //子容器imgnumlist: null, //子容器countNumindex: 0, //当前显示项timer: null, //控制图片转变效果play: null, //控制自动播放imgurl: [], //存放图片count: 0, //存放的个数spanText: [],$: function(obj) {if (typeof(obj) == "string") {if (obj.indexOf("#") >= 0) {obj = obj.replace("#", "");if (document.getElementById(obj)) {return document.getElementById(obj);} else {alert("没有容器" + obj);return null;}} else {return document.createElement(obj);}} else {return obj;}},//初始化init: function(id) {this.count = this.count <= 6 ? this.count : 6;this.bigbox = this.$(id);for (var i = 0; i < 2; i++) {var ul = this.$("ul");for (var j = 1; j <= this.count; j++) {var li = this.$("li");li.innerHTML = i == 0 ? this.imgurl[j - 1] : j;var innerTexts = document.getElementsByClassName(‘innerText1‘);ul.appendChild(li);}this.bigbox.appendChild(ul);}this.boxul = this.bigbox.getElementsByTagName("ul");this.boxul[0].className = "imgList";this.boxul[1].className = "countNum";this.imglist = this.boxul[0].getElementsByTagName("li");this.numlist = this.boxul[1].getElementsByTagName("li");this.numlist[0].className = "current";},//封装程序入口action: function(id) {this.autoplay();this.mouseoverout(this.bigbox, this.numlist);},//图片切换效果imgshow: function(num, numlist, imglist) {this.index = num;//获取当前轮播图片的indexvar innerTexts = document.getElementsByClassName(‘innerText1‘); spanText = ["<a href=http://www.mamicode.com/"######\" target=\"_blank\">第1辆车</a>","<a href=http://www.mamicode.com/=/"######\" target=\"_blank\">第2辆车</a>","<a href=http://www.mamicode.com/=/"######\" target=\"_blank\">第3辆车</a>","<a href=http://www.mamicode.com/=/"######\" target=\"_blank\">第4辆车</a>","<a href=http://www.mamicode.com/" ########## \" target=\"_blank\">第5辆车</a>","<a href=http://www.mamicode.com/" ########## \" target=\"_blank\">第6辆车</a>"]; var a = spanText[num];innerTexts[0].innerHTML = a;//给span赋值 var alpha = 0;for (var i = 0; i < numlist.length; i++) {numlist[i].className = "";}numlist[this.index].className = "current"; clearInterval(this.timer);for (var j = 0; j < imglist.length; j++) {imglist[j].style.opacity = 0;imglist[j].style.filter = "alpha(opacity=0)";}var $this = this;//利用透明度来实现切换图片this.timer = setInterval(function() {alpha += 5;if (alpha > 100) {alpha = 100}; //不能大于100//为兼容性赋样式imglist[$this.index].style.opacity = alpha / 100;imglist[$this.index].style.filter = "alpha(opacity=" + alpha + ")";if (alpha == 100) {clearInterval($this.timer)}; //当等于100的时候就切换完成了}, 50)},//自动播放autoplay: function() {var $this = this;this.play = setInterval(function() {$this.index++;if ($this.index > $this.imglist.length - 1) {$this.index = 0};$this.imgshow($this.index, $this.numlist, $this.imglist);}, 4000)},//处理鼠标事件mouseoverout: function(box, numlist) {var $this = this;box.onmouseover = function() {clearInterval($this.play);}box.onmouseout = function() {$this.autoplay($this.index);}for (var i = 0; i < numlist.length; i++) {numlist[i].index = i;numlist[i].onmouseover = function() {$this.imgshow(this.index, $this.numlist, $this.imglist);}}}}window.onload = function() {var runimg = new runImg();runimg.count = 6;//共有6张图片runimg.imgurl = ["<img src=http://www.mamicode.com/"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-092854_v2_17871420766934506_1c6e1df9d2674aea84439ea4cf443266.jpg\"/>","<img src=http://www.mamicode.com/"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093521_v2_17331420767321447_075fc4e5ba55193e49c86e13110ed005.jpg\"/>","<img src=http://www.mamicode.com/"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093944_v2_13941420767584558_0a99e2cad2e0d747a73767d581e26f66.jpg\"/>","<img src=http://www.mamicode.com/"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-094315_v2_11211420767795307_bda83e69beda493dc842ce5052991f84.jpg\"/>","<img src=http://www.mamicode.com/"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093521_v2_17331420767321447_075fc4e5ba55193e49c86e13110ed005.jpg\"/>","<img src=http://www.mamicode.com/"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093521_v2_17331420767321447_075fc4e5ba55193e49c86e13110ed005.jpg\"/>"];//图片的绝对地址runimg.init("#box");//执行轮播runimg.action("#box");}-- > < /script>
5、整个demo源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS+JS图片轮播切换效果原生js面向对象封装版丨芯晴网页特效丨CsrCode.Cn</title><style> ul li{ list-style: none;}#box { position:relative; width:480px; height:300px;}#box .imgList{ position:relative; width:480px; height:300px; overflow:hidden;}#box .imgList li{ position:absolute; top:0; left:0; width:480px; height:300px;}#box .countNum{ position:absolute; right:0; bottom:5px; z-index: 999;} #box .countNum li{ width:20px; height:20px; float:left; color:#fff; border-radius:20px; background:#f90; text-align:center; margin-right:5px; cursor:pointer; opacity:0.7; filter:alpha(opacity=70);}#box .countNum li.current{ background:#f60; font-weight:bold; opacity:1; filter:alpha(opacity=70);}.innerText { height: 50px; font:17.93px/30px"microsoft yahei"; width:480px;line-height: 50px; z-index:100;text-align: left;position: absolute;top: 250px;opacity: 0.4;color: #fff;background: rgb(76,76,76); }.innerText1 { height: 50px; font:17.93px/30px"microsoft yahei"; width:480px;line-height: 50px;text-align: left;position: absolute;top: 250px;color: #fff;z-index: 998;text-decoration: none;}.innerText1 a{ text-decoration: none; color: #fff;}.innerText1 a:hover{ color: #f00; text-decoration: none;}.innerText1 a :visited{ color: #fff; text-decoration: none;}--></style><script> <!--function runImg(){}runImg.prototype={ bigbox:null,//最外层容器 boxul:null,//子容器ul imglist:null,//子容器img numlist:null,//子容器countNum index:0,//当前显示项 timer:null,//控制图片转变效果 play:null,//控制自动播放 imgurl:[],//存放图片 count:0,//存放的个数 spanText:[], $:function(obj){ if(typeof(obj)=="string"){ if(obj.indexOf("#")>=0){ obj=obj.replace("#",""); if(document.getElementById(obj)){ return document.getElementById(obj); } else{alert("没有容器"+obj); return null; } }else{ return document.createElement(obj); } }else{ return obj;} }, //初始化 info:function(id){ this.count=this.count<=6?this.count:6; this.bigbox=this.$(id); for(var i=0;i<2;i++){ var ul=this.$("ul"); for(var j=1;j<=this.count;j++){ var li=this.$("li"); li.innerHTML=i==0?this.imgurl[j-1]:j; var innerTexts=document.getElementsByClassName(‘innerText‘); console.log(innerTexts[0]); ul.appendChild(li); } this.bigbox.appendChild(ul); } this.boxul=this.bigbox.getElementsByTagName("ul"); this.boxul[0].className="imgList"; this.boxul[1].className="countNum"; this.imglist=this.boxul[0].getElementsByTagName("li"); this.numlist=this.boxul[1].getElementsByTagName("li"); this.numlist[0].className="current"; }, //封装程序入口 action:function(id){ this.autoplay(); this.mouseoverout(this.bigbox,this.numlist); }, //图片切换效果 imgshow:function(num,numlist,imglist){ this.index=num; var innerTexts=document.getElementsByClassName(‘innerText1‘); spanText=["<a href=http://www.mamicode.com/"http://taizhou.19lou.com/forum-1635-thread-163421419813606643-1-1.html\">这辆是mini吗 表骗我</a>", "<a href=http://www.mamicode.com/"http://taizhou.19lou.com/forum-1635-thread-163451420010155737-1-1.html\">服来战 男女司机谁最坑</a>", "<a href=http://www.mamicode.com/"http://taizhou.19lou.com/forum-1635-thread-163331420528103083-1-1.html\">大家来找茬</a>", "<a href=http://www.mamicode.com/"http://taizhou.19lou.com/forum-830-thread-163841420695084451-1-1.html\">豪定制的迈伦凯</a>", "<a href=http://www.mamicode.com/"##\">第5辆车</a>", "<a href=http://www.mamicode.com/"##\">第6辆车</a>"]; var a=spanText[num]; innerTexts[0].innerHTML=a; var alpha=0; for(var i=0;i<numlist.length;i++){ numlist[i].className=""; } numlist[this.index].className="current"; clearInterval(this.timer); for(var j=0;j<imglist.length;j++){ imglist[j].style.opacity=0; imglist[j].style.filter="alpha(opacity=100)"; } var $this=this; //利用透明度来实现切换图片 this.timer=setInterval(function(){ alpha+=2; if(alpha>100){alpha=100};//不能大于100 //为兼容性赋样式 imglist[$this.index].style.opacity=alpha/100; imglist[$this.index].style.filter="alpha(opacity="+alpha+")"; if(alpha==100){clearInterval($this.timer)};//当等于100的时候就切换完成了 },20)//经测试20是我认为最合适的值 }, //自动播放 autoplay:function(){ var $this=this; this.play=setInterval(function(){ $this.index++; if($this.index>$this.imglist.length-1){$this.index=0}; $this.imgshow($this.index,$this.numlist,$this.imglist); },3000) }, //处理鼠标事件 mouseoverout:function(box,numlist){ var $this=this; box.onmouseover=function(){ clearInterval($this.play); } box.onmouseout=function(){ $this.autoplay($this.index); } for(var i=0;i<numlist.length;i++){ numlist[i].index=i; numlist[i].onmouseover=function(){ $this.imgshow(this.index,$this.numlist,$this.imglist); } } } } window.onload=function(){ var runimg=new runImg(); runimg.count=6; runimg.imgurl=[ "<img src=http://www.mamicode.com/"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>", "<img src=http://www.mamicode.com/"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>", "<img src=http://www.mamicode.com/"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>", "<img src=http://www.mamicode.com/"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>", "<img src=http://www.mamicode.com/"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>", "<img src=http://www.mamicode.com/"http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\"/>"]; runimg.info("#box"); runimg.action("#box"); }--></script></head><body><div id="box"> <div class="innerText"> </div> <span class="innerText1">第一辆车</span></div> </body></html>
基于css和js的轮播效果图实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。