zoukankan      html  css  js  c++  java
  • 基于css和js的轮播效果图实现

    基于cssjs的轮播效果图实现

    第一篇:效果图

    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
  • 相关阅读:
    Struts2拦截器
    struts2介绍
    java读写文件大全
    Intent的详细解析以及用法
    sigmoid和softmax的应用意义区别
    C 实现 创建多个txt文件,并以自然数列命名,然后将产生的十进制数据写入txt文档
    k-means原理和python代码实现
    非极大值抑制 NMS
    JetSonNano darknet yolov3工程通过CMakeLists.txt配置编译环境
    C文件 CMakeList.txt编译器配置错误的问题 error:invalid conversion from 'int' to 'LAYER_TYPE' [-fpermissive]....
  • 原文地址:https://www.cnblogs.com/alplcx/p/4213871.html
Copyright © 2011-2022 走看看