制作类似于淘宝点击简单的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{list-style: none;
            float: left;
        }</style>
</head>
<body>
    <h2>
        美女画廊</h2>
    <a href="#">注册</a>
    <ul id="imagegallery">
        <li>
            <a href="image/1.jpg" title="美女A">
                <img src="data:image/1-small.jpg" width="100px" alt="美女1">
             </a>
        </li>
        <li>
            <a href="image/2.jpg" title="美女b">
                <img src="data:image/2-small.jpg" width="100px" alt="美女2">
            </a>
        </li>
        <li>
            <a href="image/3.jpg" title="美女c">
                <img src="data:image/3-small.jpg" width="100px" alt="美女3">
            </a>
        </li>
        <li>
            <a href="image/4.jpg" title="美女d">
                <img src="data:image/4-small.jpg" width="100px" alt="美女4">
            </a>
        </li>
    </ul>

    <div style="clear:both"></div>
    <img id="image" src="data:image/placeholder.png" width="450px" alt="">
    <p id="des">请选择一个图片</p>

    <script>
        //需求：点击小图片，改变下面大图片的src属性值。赋值为a链接的herf属性值
        //让p标签的innerHtML属性值变为a标签的额title属性值
        var ul=document.getElementById("imagegallery");
        var aArry=ul.getElementsByTagName("a");
        var img=document.getElementById("image");
        var des=document.getElementById("des");
        //以前是一个一个绑定，但现在是一个数组，for循环绑定
        for (var i=0;i<aArry.length;i++){aArry[i].onclick=function () {img.src=this.href;
                des.innerHTML=this.title;
                 return false;

            }}</script>

</body>
</html>

制作类似于淘宝点击简单的轮播图相关推荐

制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
html 图片轮播实例,简单实现轮播图效果的实例
一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
点击左侧导航轮播图定位轮播图导航
点击左侧导航轮播图定位 <template><div class="service_contain"><Spin size="large& ...
JavaScript简单点击切换效果——轮播图
如何实现一个简单轮播图效果,通过点击切换图片?在JavaScript内容的实现是使用点击触发事件,改变src图片路径. 直接展示JS代码哈! // 创建一个数组来保存图片的路径var imgArr = ...

制作类似于淘宝点击简单的轮播图

制作类似于淘宝点击简单的轮播图相关推荐

最新文章

热门文章