基于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, //子容器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>

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>

时间： 2024-10-12 19:50:30

基于css和js的轮播效果图实现的相关文章

js轮播效果图

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> *{ padding: 0px; margin: 0px; } #slideBox{ posi

基于jQuery实现左右图片轮播（原理通用）

基于jQuery实现左右图片轮播(原理通用), 本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js图片轮播与索引变色

<!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-

js实现轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol

js网站轮播图怎么做如何做？鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left