Home > Others

jquery Implementation Landscape Image Carousel Special effect code sharing _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A pure JQ form of the horizontal carousel focus map, you can click on small dots or left and right buttons to switch, belong to the fixed-width type. Change to adaptive width is also not difficult, the CSS inside the bannercon width to percent, and then in JS will be UL and Li width following the parent container width changes can be used to $ (window). Resize.
Compatible to ie6+ above browser, there is a carousel speed and switch interval two parameters can be changed. The effect chart is as follows:

The HTML code is as follows:

<!doctype html>

CSS styles are as follows: 

@charset "Utf-8";
 /* Simple Reset * * * *, P, UL, Ol, Li {margin:0;
padding:0;
 UL, ol {list-style:none;} img {border:none} a,button{Outline:none; clearfix:after {visibility:hidden;
 Display:block;
 font-size:0;
 Content: "";
 Clear:both;
height:0;
 }/* Specific style/* Banner {position:relative;
 height:400px;
Overflow:hidden;
 }. Banner. bannercon {position:absolute;
 top:0;
 left:50%;
 width:800px;
 height:400px;
 Margin-left: -400px;
Overflow:hidden;
 }. Bannercon. imglist {position:absolute;
 top:0;
 left:0;
 width:99999px;
height:400px;
 }. Bannercon. imglist li {float:left;
 width:800px;
height:400px;
 }. Bannercon. imglist Li a {position:relative;
 Display:block;
height:100%;
 }. Bannercon. imglist li img {width:800px;
height:400px;
 }. Bannercon. Pre-nex {display:none;
 Position:absolute;
 top:50%;
 width:40px;
 height:60px;
 Margin-top: -40px;
 Font:bold 40px/60px SimSun;
 Color: #ccc;
 Text-align:center; Border:none;
 Background:rgba (0,0,0,.30);
 Filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= #4c000000, endcolorstr= #4c000000);
 Cursor:pointer;
Z-index:3; }. Bannercon. pre-nex.show {display:inline-block}. Bannercon. prev {left:13%;}. Bannercon. Next {right:13%;
 Nnercon. btnlist {position:absolute;
 left:0;
 bottom:20px;
 width:100%;
 height:12px;
 Text-align:center;
 Z-index:2;
_overflow:hidden;
 }. Bannercon. btnlist li {display:inline; bannercon. btnlist Li span {display:inline-block;
 width:12px;
 height:12px;
 Margin:0 5px;
 border-radius:6px;
 Background-color: #14829e;
Cursor:pointer; }. Bannercon. btnlist li.cur span {background-color: #f30;}

The

JS code is as follows: 

Load the JS statement after text read begins ============================================================= function Scroll (obj,speed, Interval) {//parent container, carousel speed, toggle Interval $ ("." +obj). each (function () {var $box = $ (this), $imgUl = $box. Children (". Imglist"), $imgLi = $imgUl. Children ("Li"), $btnUl = $box. Children (". Btnlist"), $btnLi = $btnUl. Children ("Li"), $btnPreNex = $box. Children (". Pre-nex"), $btnPre = $box. Chi Ldren (". Prev"), $btnNex = $box. Children (". Next"), n = $imgLi. Length, Width = $imgLi. Width (), left = parsefloat ($imgUl.
 CSS ("left")), K = 0, Player;
 $imgUl. CSS ("width", n*width);
  function Scroll () {//Carousel event $imgUl. Stop (). Animate ({left:-width},speed,function () {k = 1;
  $imgUl. CSS ("left", 0);
  $imgUl. Children ("Li:first"). Appendto ($ (this));
  $btnLi. Removeclass (' cur ');
  if (k >= n) {k = 0; 
 $btnUl. Children ("Li"). EQ (k). addclass (' cur ');
 }); 
 $btnLi. Click (function () {//small dot Click event var index = $btnLi. index (this);
 $ (this). addclass (' cur '). Siblings ("Li"). Removeclass (' cur '); if (index >= k) {
  var dif = index-k;
  left =-dif*width;
  $imgUl. Stop (). Animate ({left:left},speed,function () {$imgUl. css ("left", 0); 
  $imgUl. Children ("Li:lt" ("+dif+")). Appendto ($imgUl);
 });
  } else{var j = n (k-index);
  $imgUl. CSS ("Left", (index-k) *width);
  $imgUl. Children ("Li:lt" ("+j+")). Appendto ($imgUl); 
 $imgUl. Stop (). Animate ({left:0},speed);
 } k = index; 
 }); 
 $btnPreNex. Click (function () {//Left button click event var index = $btnLi. index (this);
  if ($ (this). Hasclass (' Next ')} {if (! $imgUl. Is (": Animated")) {k = 1;
  $imgUl. Animate ({left:-width},speed,function () {$imgUl. css ("left", 0);
  $imgUl. Children ("Li:first"). Appendto ($ (this));
  if (k >= n) {k = 0;
  $btnUl. Children ("Li"). Removeclass (' cur '). EQ (k). addclass (' cur ');
  });
  } else {if (! $imgUl. Is (": Animated")) {k = = 1;
  $imgUl. CSS ("left",-width);
  $imgUl. Children ("Li:last"). Prependto ($imgUl);
  $imgUl. Stop (). Animate ({left:0},speed);
  if (k < 0) {k = n-1; $btnUl. Children ("Li"). Removeclass (' cur '). EQ (k). AddclaSS (' cur '); 
 }
 }
 });
  $box. Hover (///mouse to move, move out event function () {clearinterval (Player);
 $btnPreNex. addclass (' show ');
  The function () {Player = SetInterval (function () {scroll ()},interval);
 $btnPreNex. Removeclass (' show ');
 }
 );
 Player = setinterval (function () {scroll ()},interval);
 });
 } $ (function () {//Read Carousel event Scroll ("Bannercon", 600,4000);  });

Pay attention to load JQ library, I use is 1.9.1, in fact, 1.7+ is no problem.

The above is for you to share the jquery image carousel effect, I hope to help you learn.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More