Teach you how to write a JD elevator carousel
Effect knowledge points: enterprise layout skills, how to write CSS styles efficiently, commonly used selectors, basic tags, box models, jquery class library calls, JS special effects writing, JS programming thinking, etc.
Jingdong elevator carousel source code:
<!doctype html>
<htmllang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<metacharset="UTF-8">
<metaname="Keywords"content="关键词一，关键词二">
<metaname="Description"content="网站描述内容">
<title>Document</title>
<!--引用css js 文件的引入-->
<styletype="text/css">
*{margin:0px;}
/* 属性:值; 身高:1.7m; 颜色:红色; px像素*/
#flash{width:670px;/*宽*/height:240px;/*高*/background:#cc99cc;/*背景颜色*/
margin:200pxauto 0px;
position:relative;/*相对定位*/overflow:hidden;/*超出部分隐藏*/}
#flash .scroll{width:670px;height:2400px;
position:absolute;/*绝对定位*/left:0px;top:0px;}
#flash .scroll img{display:block;/*块级*/}
#flash ul.button{height:20px;width:144px;position:absolute;
bottom:20px;right:10px;}
#flash ul.button li{list-style-type:none;/*去掉圆点*/
width:20px;height:20px;background:#666;float:left;/*左浮动*/
margin:0px2px;
color:#fff;text-align:center;/*水平距中*/
font-size:12px;
line-height:20px;/*行高 文字竖直距中*/
border-radius:10px;/*圆半径*/
box-shadow:2px2px 5px #000; }
#flash ul.button li.hover{background:#cc3300;}
</style>
</head>
<body>
<!--p 盒子模型，高度，宽度，放内容的长方形容器 姓名=“张三”-->
<pid="flash">
<!--图片滚动开始-->
<pclass="scroll">
<imgsrc="images/1.jpg" />
<imgsrc="images/2.jpg" />
<imgsrc="images/3.jpg" />
<imgsrc="images/4.jpg" />
<imgsrc="images/5.jpg" />
<imgsrc="images/6.jpg" />
</p>
<!--图片滚动结束-->
<!--按扭开始-->
<ulclass="button">
<liclass="hover">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--按扭结束-->
</p>
<!--引用 jqeury 文件-->
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript">
var_index=0;
varsetTime=null;
$("ul.button li").hover(function(){
clearInterval(setTime);//清处定时播放器
_index=$(this).index();
//alert(_index);
// 给添加 class="hover"
$(this).addClass("hover").siblings("li").removeClass("hover");
$(".scroll").animate({top:-(_index*240)},1000);
},function(){
autoPlay();//鼠标移开，调用自动播放
});
//自动轮播
functionautoPlay(){
setTime=setInterval(function(){
_index++;//序列号加 1
if(_index>5){_index=0;}//当播到最后一张时，回到第一张
$("ul.button li").eq(_index).addClass("hover").siblings("li").removeClass("hover");
$(".scroll").animate({top:-(_index*240)},1000);
},2000);
}
autoPlay();
</script>
<!--
1、如何在页面当中构建一个有宽度，高度的长方形 （p盒子模型）
2、讲到了外边距的概念 margin, 解决了外边距的兼容型问题 *{margin:0px;}
3、利用外边距来控制长方形的位置 margin:上(200px) 左右(auto) 下(0px);
4、分析了动画实现原理（在 #flash)长方形里，构建了一个宽度一样大小，高度无限高的长方 形) 然后利用相对和绝对定位来实现他的动画原理
5、如何在页面当中插入一张图 <img src="地址"/>
6、处理了图片之间产生间隙的问题（display:block;） 超出部分内容隐藏 overflow:hidden;
7、讲ul无序列表标签 （去掉li的圆点，给li添加宽度和高度 利用把小长方形从竖直变成水平 控制文字大小，颜色 水平距中，竖直距中，利最新技术css3 把正方形变成圆形 border-radius:10px; 利用外边距产生兼距）
-->
</body>
</html>
Finally give the program Some suggestions from members:
1. There is no so-called "best language" Some languages and tools are only used to solve specific corresponding problems. A little better than others. When learning a new language, don't try to bring your past thought patterns into the new language system. Accordingly, we should learn how to program in a new language more "authentically".
2. Relax and stay "simple" Programming is a huge collection of Lego bricks, full of All kinds of interesting problems that need to be solved. Taking the time to write interesting programs in order to deeply understand the structure will be more interesting than any appointment given to you.
3. The best programmers always try programming outside of work. If you really love it and are good at it, you will never be unemployed.
4. When you get stuck, write down your program on paper. I was serious. This is amazing and is the standard training pattern in programming competitions. (The reason I think this works is that when you don't have to spend energy thinking about syntax, you have more energy thinking about the nature of the problem and how to solve it).
The above is the detailed content of Teach you how to write a JD elevator carousel. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Replace String Characters in JavaScript
Mar 11, 2025 am 12:07 AM
Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
8 Stunning jQuery Page Layout Plugins
Mar 06, 2025 am 12:48 AM
Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
Build Your Own AJAX Web Applications
Mar 09, 2025 am 12:11 AM
So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
10 jQuery Fun and Games Plugins
Mar 08, 2025 am 12:42 AM
10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
Load Box Content Dynamically using AJAX
Mar 06, 2025 am 01:07 AM
This tutorial demonstrates creating dynamic page boxes loaded via AJAX, enabling instant refresh without full page reloads. It leverages jQuery and JavaScript. Think of it as a custom Facebook-style content box loader. Key Concepts: AJAX and jQuery
How to Write a Cookie-less Session Library for JavaScript
Mar 06, 2025 am 01:18 AM
This JavaScript library leverages the window.name property to manage session data without relying on cookies. It offers a robust solution for storing and retrieving session variables across browsers. The library provides three core methods: Session
jQuery Parallax Tutorial - Animated Header Background
Mar 08, 2025 am 12:39 AM
This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
