基于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>
View Code
4、js实现如下(参看注释即可):
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; } }, //初始化 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;//获取当前轮播图片的index var innerTexts = document.getElementsByClassName('innerText1');spanText = ["<a href=\"######\" target=\"_blank\">第1辆车</a>", "<a href==\"######\" target=\"_blank\">第2辆车</a>", "<a href==\"######\" target=\"_blank\">第3辆车</a>", "<a href==\"######\" target=\"_blank\">第4辆车</a>", "<a href=\" ########## \" target=\"_blank\">第5辆车</a>", "<a href=\" ########## \" 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://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-092854_v2_17871420766934506_1c6e1df9d2674aea84439ea4cf443266.jpg\"/>", "<img src=\"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093521_v2_17331420767321447_075fc4e5ba55193e49c86e13110ed005.jpg\"/>", "<img src=\"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093944_v2_13941420767584558_0a99e2cad2e0d747a73767d581e26f66.jpg\"/>", "<img src=\"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-094315_v2_11211420767795307_bda83e69beda493dc842ce5052991f84.jpg\"/>", "<img src=\"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093521_v2_17331420767321447_075fc4e5ba55193e49c86e13110ed005.jpg\"/>", "<img src=\"http://att3.citysbs.com/no/taizhou/2015/01/09/09/480x300-093521_v2_17331420767321447_075fc4e5ba55193e49c86e13110ed005.jpg\"/>" ];//图片的绝对地址 runimg.init("#box");//执行轮播 runimg.action("#box"); } -- > < /script>
View Code
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://taizhou.19lou.com/forum-1635-thread-163421419813606643-1-1.html\">这辆是mini吗 表骗我</a>","<a href=\"http://taizhou.19lou.com/forum-1635-thread-163451420010155737-1-1.html\">服来战 男女司机谁最坑</a>","<a href=\"http://taizhou.19lou.com/forum-1635-thread-163331420528103083-1-1.html\">大家来找茬</a>","<a href=\"http://taizhou.19lou.com/forum-830-thread-163841420695084451-1-1.html\">豪定制的迈伦凯</a>","<a href=\"##\">第5辆车</a>","<a href=\"##\">第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://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>","<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>","<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>","<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>","<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>","<img src=\"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>
View Code
转载于:https://www.cnblogs.com/alplcx/p/4213871.html
基于css和js的轮播效果图实现相关推荐
- 轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
- 基于css和jQuery实现轮播图
这里我用的<div>元素代替的图片,具体应用时,改为<img>元素就好了.效果图: 代码如下: <!DOCTYPE html> <html lang=&quo ...
- HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
HTML页面: 页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- 【HTML+CSS+JS】模仿星巴克主页,练习CSS排版,JS实现轮播图以及悬停动画(公开完整源码)
目录:完整源码仅供学习 一.效果演示 二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载 一.效 ...
- 新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效
这是一款基于owl-carousel的卡片水平轮播展示特效.该卡片轮播展示特效可以通过前后导航按钮来切换卡片,它是响应式设计,在手机等小屏幕设备上,会自动调节为只展示一个卡片. 使用方法 在页面中引入 ...
- js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
- 使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
- vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
- JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能 前言 轮播图案例 总结 前言 轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
最新文章
- day13 内置函数一
- virtualC++打开汇编语言代码
- HTML数字自动排序,jquery – HTML中的数字嵌套排序列表
- 十年Java路,和大家来谈谈系统架构
- 蓝桥杯2017初赛-9数算式-dfs
- Android防盗系统推荐
- springboot html压缩,springboot 请求响应压缩
- 手机连接蓝牙扫码枪_宝马车与手机无法蓝牙连接的技术通报
- python日期,从int格式为时间格式
- Ajax中async与cache参数
- 领克02linux车机怎么升级,你们想看的领克02长测报告来了,一篇读懂02的车机系统...
- DMIS 5.3 编程基本要义
- MySQL学习笔记(持续更新ING)
- caffe.bin caffe的框架
- 【Vuejs】1426- 深入解析 Vue 3 基础难点
- AUTOCAD2020入门学习笔记(一)
- ArcGIS聚合容差修正两个shapefile 之间的数字化错误
- uboot命令实践:fat系列命令实践
- 大学计算机相关基本知识,大学计算机基础知识试题
- SEO外链-自动批量SEO外链发布软件