Shulou(Shulou.com)06/02 Report--

This article to share with you is about JavaScript and then achieve six kinds of web page image carousel effect, Xiaobian think quite practical, so share to everyone to learn, I hope you can read this article after some harvest, not much to say, follow Xiaobian to see it.

In web pages, we often see the effects of various carousels. How do they work? Today, let's take a look together! First of all, we need to prepare a number of pictures, here I prepared five pictures.

Functional requirements:

After the mouse carousel diagram module, left and right buttons displayed, left and right hidden buttons.

Click the right button once, the picture plays one to the left, and so on, the left button does the same.

As the picture plays, the small circle below changes with it.

Click on the small circle to play the corresponding picture.

The mouse does not pass through the carousel, and the carousel automatically plays pictures.

After the mouse, carousel map module, automatic play stops.

Our page layout is as follows:

Next, step by step to achieve the function

Create HTML page first

The implementation process is: First give a big box, in order to facilitate the positioning operation of the box behind, and then give it a relative positioning, add the image into the big box in the form of an unordered list, because we want to achieve the carousel effect is horizontal, so we can add the float: left attribute to the image, and because the ul where the image is located is not large enough, so other images will be squeezed to the bottom, so we can manually modify the size of the ul where the image is located; Next, write a disordered list for placing small circles, position them below the big box by absolute positioning, and add small circles to facilitate us to click on the corresponding small circles to jump to the corresponding picture effect. Then set the left and right arrows to the appropriate positions on both sides of the big box through absolute positioning. Finally, we hide the contents of the big box.

Document

css文件

*{ margin: 0; padding: 0;}li{ list-style: none;}.box{ position: relative; overflow: hidden; margin: 100px auto; width: 520px; height: 280px; background-color: red;}.jiantou{ font-size: 24px; text-decoration: none; display: block; text-align: center; width: 20px; height: 30px; line-height: 30px; background: rgba(158, 154, 154, 0.7); color: white; z-index: 999;}.left{ position: absolute; top: 125px; left: 0px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}.right{ position: absolute; top:125px; left: 500px; border-top-left-radius: 15px; border-bottom-left-radius: 15px;}img{ width: 520px; height: 280px;}.box .pic{ width: 600%;}.pic li { float: left;}.lis{ position: absolute; bottom: 15px; left: 50%; margin-left: -35px; width: 70px; height:13px; border-radius: 7px; background: rgba(158, 154, 154, 0.7);}.lis li { float: left; width: 8px; height: 8px; margin: 3px; border-radius: 50%; background-color: #fff; }.lis .selected{ background-color: cyan;}

此时页面效果为：

Then implement the js part of the function.

1. When the mouse passes through the carousel diagram module, the left and right buttons are displayed, and the left and right buttons are hidden.

First, we hide our initial two arrows with display:none; then we get the two arrows and the big box, and add mouse over and mouse out events to the big box. As follows:

var left = document.querySelector('.left'); var right = document.querySelector('.right'); var box = document.querySelector('.box'); box.addEventListener('mouseenter',function(){ left.style.display = 'block'; right.style.display = 'block'; }) box.addEventListener('mouseleave',function(){ left.style.display = 'none'; right.style.display = 'none'; })

The effects are:

2. Dynamically generate small circles

First remove all the small circles li, as shown in the figure:

Because the small circle we create is determined according to the number of pictures, our core idea is: the number of small circles should be the same as the number of pictures, first get the number of pictures in ul (the picture is placed in li, so it is the number of li), and then use the loop to dynamically create the node createElement ('li ') and insert the node ul. appendChild(li) generates a small circle (this small circle is to be placed inside ul) Note that the first small circle needs to add the selected class.

The implementation code is:

var pic = document.querySelector('.pic'); var lis = document.querySelector('.lis'); for(var i = 0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.