关于轮播图的制作

今天看了好久 写了好久 注释都在代码里 直接上代码了
今天写这个的时候 意识到了变量的重要性
在这里面下路导航的变量跟上边含图片的标签的变量分不清 很难受以后不能这么写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图啊QAQ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 590px;
            height: 470px;
            margin: 100px auto;
            border: 2px solid #ccc;
        }

        img {
            vertical-align: top;
        }

        .inner {
            width: 590px;
            height: 470px;
            position: relative;

            overflow: hidden;

        }

        .inner ul {
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .inner li {
            float: left;
            list-style: none;
        }

        .indicators {
            width: 1000%;
            position: absolute;
            left: 490px;
            top: 452px;
        }

        .indicators ul {
            width: 100px;
            height: 18px;
            background: rgba(0, 0, 0, 0.1);
            line-height: 15px;
            border-radius: 10px;
        }

        .indicators li {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: #fff;
            text-align: center;
            margin-right: 10px;
            font-size: 10px;
            cursor: pointer;
        }

        .indicators .current {
            background-color: skyblue;
        }

        .hah {
            position: relative;
            left: 0;
            top: 220px;
            display: none;
        }

        .hah span {
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.3);

        }

        .left {
            position: absolute;
            left: 0;
        }

        .right {
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div class="inner" id="ph">
        <ul>
            <li><a href="#"><img src="11.jpg" alt=""></a></li>
            <li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt=""></a></li>
            <li><a href="#"><img src="33.jpg" alt=""></a></li>
            <li><a href="#"><img src="44.jpg" alt=""></a></li>
            <!--<li><a href="#"><img src="11.jpg" ></a></li>-->
        </ul>
        <div class="indicators" id="nav">
            <ul>

            </ul>
        </div>
        <div class="hah" id="ying">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取最外面的div
    var box =  my$("box");
    //获取相框宽度
    var imgWidth = box.children[0].offsetWidth;
    //获取含有图片的ul
    var ulobj =box.children[0].children[0];
    //获取含有图片的所有li标签  获取了所有标签就能获取她的个数了
    var liobj = ulobj.children;
    //获取右下角的小导航栏
    var indicator = box.children[0].children[1].children[0];
    //设置一个使得全部元素公用的索引
    var indexBttom = 0;
    //复制第一个li 添加到最后
    var heyLi = ulobj.children[0].cloneNode(true);
    ulobj.appendChild(heyLi);
    //第一步先根据图片的个数做出来相应导航栏的个数
    for (var i = 0;i < liobj.length-1;i++){
        var tempLi = document.createElement("li");
        //为创建的li添加索引
        tempLi.setAttribute("index",i);
        //设置li里面的内容
        tempLi.innerHTML = i+1;
        indicator.appendChild(tempLi);
        //以上添加完毕 接着注册鼠标进入的事件
        tempLi.onmouseover = function () {
            //取消所有li的样式
            for (var j = 0;j < indicator.children.length;j++){
                indicator.children[j].removeAttribute("class");
                //写这个的时候容易把上述获得的  含有图片的li误当作indicator中的li
            }
            //为当前li 添加背景颜色
            this.className = "current";
            //在这里获取她的索引值
            indexBttom = this.getAttribute("index");
            //获取之后进行动画效果
            animation(ulobj,-indexBttom*imgWidth);
        }

    }
    indicator.children[0].className = "current";

    //第二步写左右箭头
    //先设置经过box的时候显示  不经过的时候隐藏
    box.onmouseover = function () {
        my$("ying").style.display = "block";
    }
    box.onmouseout = function () {
        my$("ying").style.display = "none";
    }
    //分别获得左右箭头
    var arryL = my$("ying").children[0];
    var arryR = my$("ying").children[1];
    //两个箭头这里  写法不尽相同  因为右箭头到越界的位置的时候 不能再遍历进行去除 必须手动去除
    //而到了左箭头这里 由于0的索引值有对应的indicator 所以直接遍历去除就行 不用再分情况
    arryL.onclick = function () {
        //进来判断位置
        if (indexBttom == 0){
            //到达最左端
            indexBttom = liobj.length-1;
            ulobj.style.left = -(indexBttom)*imgWidth + "px";
        }
        indexBttom--;
        //进行动画效果
        animation(ulobj,-indexBttom*imgWidth);
        for (var i = 0;i < indicator.children.length;i++){
            indicator.children[i].removeAttribute("class");
        }
        //再赋值给相应元素
        indicator.children[indexBttom].className = "current";
        }

    arryR.onclick = function () {
            if ( indexBttom == liobj.length-1){
                indexBttom = 0;
                ulobj.style.left = 0+"px";
            }
            indexBttom++;
            //进行动画效果
            animation(ulobj,-indexBttom*imgWidth);
            if (indexBttom == liobj.length-1) {
                // 取消最后一个背景颜色
                indicator.children[indicator.children.length-1].removeAttribute("class");
                //设置第一个li背景颜色
                indicator.children[0].className = "current";
            }
            else {
                //先排它
                for (var i = 0;i < indicator.children.length;i++){
                     indicator.children[i].removeAttribute("class");
                }
                //再赋值给相应元素
                indicator.children[indexBttom].className = "current";
            }

    }

</script>
</body>
</html>

今天自己改进了代码 准确说重写了一遍 思路清晰了不少，上代码!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图啊QAQ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 590px;
            height: 470px;
            margin: 100px auto;
            border: 2px solid #ccc;
        }

        img {
            vertical-align: top;
        }

        .inner {
            width: 590px;
            height: 470px;
            position: relative;

            overflow: hidden;

        }

        .inner ul {
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .inner li {
            float: left;
            list-style: none;
        }

        .indicators {
            width: 1000%;
            position: absolute;
            left: 490px;
            top: 452px;
        }

        .indicators ul {
            width: 100px;
            height: 18px;
            background: rgba(0, 0, 0, 0.1);
            line-height: 15px;
            border-radius: 10px;
        }

        .indicators li {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: #fff;
            text-align: center;
            margin-right: 10px;
            font-size: 10px;
            cursor: pointer;
        }

        .indicators .current {
            background-color: skyblue;
        }

        .hah {
            position: relative;
            left: 0;
            top: 220px;
            display: none;
        }

        .hah span {
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.3);

        }

        .left {
            position: absolute;
            left: 0;
        }

        .right {
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div class="inner" >
        <ul>
            <li><a href="#"><img src="11.jpg" alt=""></a></li>
            <li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt=""></a></li>
            <li><a href="#"><img src="33.jpg" alt=""></a></li>
            <li><a href="#"><img src="44.jpg" alt=""></a></li>
            <!--<li><a href="#"><img src="11.jpg" ></a></li>-->
        </ul>
        <div class="indicators" id="nav">
            <ul>

            </ul>
        </div>
        <div class="hah" id="ying">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取最外面的div
    var  box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取相框的宽度
    var imgWidth = inner.offsetWidth;
    //获取存图片的ul
    var ulObj = inner.children[0];
    //获取所有图片的li标签
    var imgLiObj = ulObj.children;
    //获取底部导航栏
    var navBottom = my$("nav").children[0];
    //获取导航栏的li 标签
    var  navLiObj = navBottom.children;
    //设置一个全局变量使得 底部导航栏和图片的 索引一致
    var index = 0;
    //添加相应的底部导航栏li标签
    for (var i = 0 ;i < imgLiObj.length;i++){
        var tempLi  =  document.createElement("li");
        tempLi.innerHTML = i+1;
        navBottom.appendChild(tempLi);
        tempLi.setAttribute("index",i);
        //为每个导航栏li注册鼠标进入事件
        tempLi.onmouseover = function () {
            for (var j = 0 ;j < navLiObj.length;j++){
                navLiObj[j].removeAttribute("class");
            }
            this.className = "current";
            //获取导航栏li的索引
            var tempIndex = this.getAttribute("index");
            //进行动画效果移动图片
            animation(ulObj,-tempIndex*imgWidth);
            //更新全局变量index
            index = tempIndex;
        }
    }
    navLiObj[0].className = "current";
    //克隆第一个图片li标签到最后
    var heyLi = imgLiObj[0].cloneNode(true);
    ulObj.appendChild(heyLi);
    //设置进入div显示两侧导航栏的效果
    box.onmouseover  = function () {
        my$("ying").style.display = "block";
        clearInterval(timeId);
    }
    //设置移出div隐藏两侧导航栏的效果
    box.onmouseout  = function () {
        my$("ying").style.display = "none";
        var timeId= setInterval(clickHandle,2000);
    }
    //获取  左右箭头标签
    var arryL = my$("ying").children[0];
    var arryR = my$("ying").children[1];
    //为每个箭头标签设置点击事件
    arryL.onclick = function () {
        if (index == 0){
            index = navLiObj.length;
            ulObj.style.left =  -index*imgWidth + "px";
        }
        index --;
        animation(ulObj,-index*imgWidth);
        for (var j = 0 ;j < navLiObj.length;j++){
            navLiObj[j].removeAttribute("class");
        }
        navLiObj[index].className = "current";
    }
    arryR.onclick =  function () {
        if (index == navLiObj.length){
            index= 0;
            ulObj.style.left = 0 + "px";
        }
        index++;
        animation(ulObj,-index*imgWidth);
        if (index == navLiObj.length) {
            navLiObj[navLiObj.length-1].removeAttribute("class");
            navLiObj[0].className = "current";
        }
        else {
            for (var j = 0 ;j < navLiObj.length;j++){
                navLiObj[j].removeAttribute("class");
            }
            navLiObj[index].className = "current";
        }
    }
    //自动切换
    var timeId= setInterval(clickHandle,2000);
    function clickHandle() {
        if (index == navLiObj.length){
            index= 0;
            ulObj.style.left = 0 + "px";
        }
        index++;
        animation(ulObj,-index*imgWidth);
        if (index == navLiObj.length) {
            navLiObj[navLiObj.length-1].removeAttribute("class");
            navLiObj[0].className = "current";
        }
        else {
            for (var j = 0 ;j < navLiObj.length;j++){
                navLiObj[j].removeAttribute("class");
            }
            navLiObj[index].className = "current";
        }
    }
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/Lzxgg-xl/p/10153757.html

时间： 2024-10-13 13:08:19

关于轮播图的制作的相关文章

无限轮播图的制作

url:http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html (如果打开过慢,或者打不开,原因你懂得.) 一.思路 1.所有滑动效果的demo都是通过控制css里的left值,来控制滑动效果的. 2.需要两个块,一个div块,一个ui.div块的position是relative,ui块的position是absolute.这样ui块的left就可以根据外层的div来控制.div的overflow是hidd

CSS-用伪类制作小箭头（轮播图的左右切换btn）

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

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

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

基于css制作轮播图的部分效果

在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将向大家介绍一种最近实验出来的一种方法. 在介绍这种方法之前,本人觉得对于css中的某些伪类选择器有必要进行进一步的分析. hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应.这一特性与js中的mousemove事件十分的相近,那么其是不是可以被近视地看做该事件呢?下面我们来做一个例子:

淘宝店铺首页全屏轮播图制作

淘宝店铺首页全屏轮播图制作 | 浏览:1081 | 更新:2014-09-27 12:03 | 标签: 淘宝 很多朋友都想要做全屏轮播图,接下来我来说说我的经验 工具/原料 美图秀秀 方法/步骤 1.首先要制作或者搜寻图片宽度1920高度610的高画质图片 2.上传到淘宝图片空间,并复制其连接 3.将复制的连接替换到如下图以“jpg”结尾的那个地方.(有3个地方,可用3张图替换) 4.复制代码,进入淘宝店铺装修页面,新建“自定义内容区” 5.将自定义内容区置于顶部,编辑,输入代码界面,黏贴代码,

angularjs1 制作自定义轮播图(汉字导航)

本来想用swiper插件的,可是需求居然说要汉字当导航栏这就没办法了,只能自己写. directive // 自定义指令: Home页面的轮播图 app.directive('swiperImg', ["$interval", function ($interval) { return { restrict: 'E', replace: true, scope: { imgList: "=", tabList: "=", autoplay : &

猫猫学iOS 之广告轮播图，collectionView制作

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 效果图 不多说,好不好先看效果,之前做过一个scrollView的轮播图,但是很局限,很多多余代码,今天猫猫重新做了一个用collectionView的流水布局做的一个,可以拿去做广告轮播,也可以做系统新特性哦,来,看下效果吧. 源码共享:https://github.com/znycat/NYCarouselView 很久很久以前就想做了.总而言之,猫猫代码有

层叠轮播图的简易制作

之前做过很多不同样式的轮播图,不是通过改变left值使图片左右移动的,就是改变透明度实现轮播图的,偶然在网易云上看到了层叠轮播图,它转换图片的方式和其他轮播图有些不同,我从来没做过这种轮播图,思考了很久该用什么方法做,终于做出来了一个简陋的成品.由于轮播图的图片是网上找来的,所以我做了模糊处理,用清晰的图片效果更好,这里是我的一个演示(没有录制鼠标):  思路和方法 我所能想出的最简单的方法就是先给轮播图中的几张图片特定的class值,再通过改变图片class的值来改变他们的位置 话不多说,上代

Flask实战第50天：cms添加轮播图的模态对话框制作

编辑cms_banners.html, 在{% block main_content%}中加上表给内容如下 {% block main_content %} <table class="table table-bordered"> <thead> <tr> <th>名称</th> <th>图片链接</th> <th>跳转链接</th> <th>优先级</th&g