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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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











Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.
