jquery implements carousel image code on PC-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jquery implements carousel image code on PC

小云云

Jan 31, 2018 am 10:15 AM

jquerycodeaccomplish

I haven’t been very busy with other projects recently. I was assigned to make a new page for the company’s official website project. Since jQuery has already been used in the project, let’s just use jQuery to write a carousel image. This article mainly tells you how to use jquery to write an example of a PC-side carousel effect. Friends who are interested can refer to it.

Now take out the code for the carousel picture that you wrote separately, make a small demo and write it here to record it (the picture of the carousel picture in the demo was randomly found online)

Achieved effects:

1. Automatic carousel (carousel time interval is customized in js code)

2. Click the left and right buttons to achieve manual rotation Switch

3. The small dot at the bottom displays the active state according to the position of the switched image

4. The mouse passes through the carousel area, stops the carousel, and leaves the carousel area to start the carousel.

The code directory results are as follows:

1. index.html

Note: here Take 5 pictures as an example. What the user sees in the real carousel on the page is 5 different pictures. However, for the sake of continuity of the carousel effect, a fifth picture is added in front of the first picture. The first picture is added after the first picture, so there are 7 pictures in the demo structure, and the size of each picture must be the same (the width and height here are 720*350px).

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PC-jquery版轮播图</title>
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body>
<p class="layout">
 <h2 id="PC-jquery版轮播图">PC-jquery版轮播图</h2>
 <p class="slide" id="slide">
  <p id="outer" class="outer">
   <ul id="inner" class="inner">
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-5.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-1.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-2</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-2.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-3</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-3.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-4</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-4.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-5.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img  src="/static/imghwm/default1.png"  data-src="images/slide-1.jpg"  class="lazy"   alt="jquery implements carousel image code on PC" ></a></li>
   </ul>　　　　　　　<!--底部小圆点-->
   <ol class="dot" id="dot">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ol>
  </p>
　　　　 <!--左右两侧的点击切换按钮-->
  <p class="arrow-box">
   <p class="arrow arrow-l" id="arrow_l">‹</p>
   <p class="arrow arrow-r" id="arrow_r">›</p>
  </p>
 </p>
</p>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

2. style.css

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.layout {
 width: 1000px;
 margin: 30px auto;
}
ul,ol,li {
 list-style: none;
}
.slide {
 position: relative;
 width: 900px;
 margin:auto;
}
.slide .outer {
 position: relative;
 margin: 30px auto;
 width: 720px;
 height: 400px;
 overflow: hidden;
}
.slide .outer .inner {
 width: 5040px;
 height: 350px;
 position: absolute;
 left: -720px;
 top: 0;
}
.slide .outer .inner li {
 float: left;
 height: 350px;
}
.slide .outer .inner li a {
 display: block;
 position: relative;
 width: 100%;
 height: 100%;
}
.slide .outer .inner li a p {
 position: absolute;
 left: 0;
 bottom: 0;
 color: #fff;
 font-size: 18px;
 width: 720px;
 height: 80px;
 line-height: 80px;
 padding-left: 50px;
 background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.slide .outer .dot {
 margin-top: 365px;
 text-align: center;
}
.slide .outer .dot li {
 height: 6px;
 width: 6px;
 border-radius: 3px;
 background-color: #d2cbcb;
 display: inline-block;
 margin: 0 3px;
}
.slide .outer .dot li.active {
 background-color: #6e5ca5;
}
.slide .arrow-box {
 position: absolute;
 width: 900px;
 height: 60px;
 top: 150px;
 left: 0;
}
.slide .arrow-box .arrow {
 width: 60px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 border-radius: 30px;
 background-color: #dde2e6;
 font-size: 60px;
 color: #999;
 cursor: pointer;
}
.slide .arrow-box .arrow.arrow-l {
 float: left;
}
.slide .arrow-box .arrow.arrow-r {
 float: right;
}

3. index. js

Note: In the js code, each variable has been commented. In order to prevent the animation from stopping due to rapid multiple clicks, stop(false,true) is called here every time the image is switched. But please note that when scrolling to the left, after scrolling to the last picture, do not use stop(false,true) when switching again, but instantly locate the first picture (actually the third picture in the dom structure). (two pictures), similarly, when scrolling to the right, after scrolling to the first picture, there is no need to stop (false, true) when switching again, but to instantly locate the last picture (actually a dom structure the second to last picture in ).

var interval = 3000;    //轮播间隔时间
var arrowL = $(&#39;#arrow_l&#39;);   //左侧箭头
var arrowR = $(&#39;#arrow_r&#39;);   //右侧箭头

var slideBox = $(&#39;#slide&#39;);   //轮播图区域
var innerBox = $(&#39;#inner&#39;);   //内层大盒子
var img = innerBox.children(&#39;li&#39;); //每个图片
var dot = $(&#39;#dot&#39;);    //小圆点盒子

var imgW = $(img[0]).outerWidth(); //每个li标签的宽度

var imgCount = 5;     //总图片个数（不同图片的个数）（实际dom上是有7张）
var i = 0;       //初始化为第0张图片
timer = null;      //定时器

//自动轮播
timer = setInterval(function () {
 i++;
 innerBox.stop(false, true).animate({&#39;left&#39;:-i*imgW+&#39;px&#39;},300)
 dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(i-1).addClass(&#39;active&#39;)
 if(i > imgCount){
  innerBox.animate({&#39;left&#39;:-1*imgW+&#39;px&#39;},0);
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(0).addClass(&#39;active&#39;)
  i = 1;
 }
},interval)

//点击右侧箭头，播放下一张
arrowR.click(function () {
 i++;
 innerBox.stop(false, true).animate({&#39;left&#39;:-i*imgW+&#39;px&#39;},300)
 dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(i-1).addClass(&#39;active&#39;)
 if(i > imgCount){
  innerBox.animate({&#39;left&#39;:-1*imgW+&#39;px&#39;},0);
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(0).addClass(&#39;active&#39;)
  i = 1;
 }
})

//点击左侧箭头，播放上一张
arrowL.click(function () {
 i--;
 innerBox.stop(false, true).animate({&#39;left&#39;:-i*imgW+&#39;px&#39;},300)
 dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(i-1).addClass(&#39;active&#39;)
 if(i < 1){
  innerBox.animate({&#39;left&#39;:-imgCount*imgW+&#39;px&#39;},0);
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(imgCount-1).addClass(&#39;active&#39;)
  i = imgCount;
 }
})
//鼠标经过轮播图区域时，清除定时器，停止自动轮播
slideBox.mouseenter(function () {
 clearInterval(timer);
})

//鼠标离开轮播图区域时，重新启动自动轮播
slideBox.mouseleave(function () {
 timer = setInterval(function () {
  i++;
  innerBox.stop(false, true).animate({&#39;left&#39;:-i*imgW+&#39;px&#39;},300)
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(i-1).addClass(&#39;active&#39;)
  if(i > imgCount){
   innerBox.animate({&#39;left&#39;:-1*imgW+&#39;px&#39;},0);
   dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(0).addClass(&#39;active&#39;)
   i = 1;
  }
 },interval)
})

Related recommendations:

Two js ways to implement carousel images

Explanation of the actual sliding focus carousel of the encapsulated motion framework

Jquery version of the carousel effect and extend extension example sharing

The above is the detailed content of jquery implements carousel image code on PC. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

See all articles