前端小白案例-商品轮播图制作


知识点:html加CSS布局、html加css布局思维,定位、浮动详解。

html代码:

<div class="banner">
        <div class="pic">
            <ul id="pic">
                <li style="background-image:url(‘images/VIP_img1.jpg‘);left:0;"></li>
                <li style="background-image:url(‘images/VIP_img2.jpg‘)"></li>
                <li style="background-image:url(‘images/VIP_img3.jpg‘)"></li>
                <li style="background-image:url(‘images/VIP_img4.jpg‘)"></li>
                <li style="background-image:url(‘images/VIP_img5.jpg‘)"></li>
            </ul>
        </div>
        <div class="text">
            <ul id="text-list">
                <li>都市丽人品牌日<span>|</span></li>
                <li>都市丽人集团年度钜献<span>|</span></li>
                <li>哈森集团冬靴节 满498减50<span>|</span></li>
                <li>运动大牌 最高满298减60<span>|</span></li>
                <li>爱在唯品家 最高满298减80</li>
            </ul>
        </div>
        <div class="car"></div>
    </div>

css代码:

        <style>
        *{margin:0;padding:0;}
        .banner{
            width:1146px;
            height:440px;
            padding:15px 15px 0 15px;
            background:#fff;
            border:1px solid #eaeaea;
            margin:50px auto;
            position:relative;
        }
        .banner .pic{
            width:1146px;
            height:400px;
            position:relative;
            overflow:hidden;
        }
        .banner .pic ul li{
            list-style:none;
            width:100%;
            height:400px;
            position:absolute;
            top:0;
            left:100%;
        }
        .banner .text ul li{
            list-style:none;
            width:229px;
            text-align:center;
            float:left;
            color:#666;
            font-size:12px;
            font-family:‘微软雅黑‘;
            line-height:35px;
            cursor:pointer;
        }
        .banner .text ul li span{
            float:right;
            color:#ddd;
        }
        .banner .car{
            width:229px;
            height:3px;
            background:#e6057d;
            position:absolute;
            bottom:-3px;
            left:15px;
        }
        </style>

javascript代码:

    <script src="js/move.js"></script>
    <script>
    var Car = document.getElementsByClassName(‘car‘)[0];//运动条
    var oPic = document.getElementById(‘pic‘);
    var aPicli = oPic.getElementsByTagName(‘li‘);//图片序列
    var otext = document.getElementById(‘text-list‘);
    var otextli = otext.getElementsByTagName(‘li‘);//文字序列
    var index = 0;
    for(var i=0;i<otextli.length;i++){
        otextli[i].index = i;
        otextli[i].onclick = function(){
            var lastIndex = index;
            var nowLeft = this.index*229+15;
            var left = 1146;
            index = this.index;
            //运动条动画
            move( Car , "left" , nowLeft , 20 );

            if ( index > lastIndex )
            {
                left = -left;
            };
            aPicli[index].style.left = -left+‘px‘;
            //移出图片动画
            move( aPicli[lastIndex] , ‘left‘ , left , 50 );
            //移入图片动画
            move( aPicli[index] , ‘left‘ , 0 , 50 );
        }
    };
    </script>

原文地址:http://blog.51cto.com/13457136/2087666

时间: 2024-11-05 18:35:38

前端小白案例-商品轮播图制作的相关文章

前端经典案例之轮播图

大部分网站或APP的首页差不多都运用到了轮播图,下边就探讨一下关于轮播图的集中解决方法,相关插件可自行去网站下载. 效果图: 方法一: 1.css样式代码: 1 <style> 2 div{ 3 width: 344px; 4 height: 199px; 5 overflow: hidden; 6 } 7 ul{ 8 width: 1042px; 9 } 10 li{ 11 display: inline-block; 12 } 13 </style> 2.html代码: 1 &

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

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

js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特点: ? 封装 : 看不到里面的东西 , 用好表面功能. ? 继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性. ? 多态 ? 抽象 : 抽取一个功能里面多个核心的功能模块. ? 思想: 高内聚.低耦合 ? 低耦合 :每个功能模块之间耦合度要低 ? 高内聚 :模块内部要紧密相连 面向

前端小白案例-爱新鲜抽屉式特效制作

知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等. html代码: <div id="box"> <div class="item"> <img src="images/1.jpg" alt="美女" width="956" height="400"/><

轮播图制作

<div class="focus"> <a href="#" class="arrow-l">?</a> <a href="#" class="arrow-r">?</a> <ul> <li><a href="#"><img src="./upload/focus.jpg&q

Android——ViewPager和内部view之间的事件分发及轮播图

viewpager 在滑动的过程中是如何触发view身上的事件的,换句话说,viewpager在滑动的过程中到底是滑动的它里面的view,还是滑动的viewpager本身? 一.示例代码: 1.自定义ViewPager:MyViewPager,重新dispatchTouchEvent方法,添加一些事件处理的log信息. package com.example.viewpagerdemo; import android.content.Context; import android.support

简单说说tab标签页和轮播图

准确的来说,一个页面能够独立的做出轮播图才算是刚步入前端世界.说轮播图之前先来说说标签页,.因为它比较简单,我的效果使用jquery来实现的,. 具体代码只有一点点,. var timeout; $(document).ready(function(){ $("#tabfirst li").each(function(index){ var liNode=$(this); liNode.click(function(){ timeout=setTimeout(function(){ $

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的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~