jquery implementiert den Code „sharing_jquery' für horizontale Bildkarussell-Spezialeffekte-js-Tutorial-php.cn

jquery implementiert den Code „sharing_jquery' für horizontale Bildkarussell-Spezialeffekte

WBOY

Freigeben： 2016-05-16 15:31:12

Original

1557 Leute haben es durchsucht

Ein horizontales Karussell-Fokusbild in reiner JQ-Form, das durch Klicken auf den kleinen Punkt oder die Links- und Rechts-Tasten umgeschaltet werden kann. Es handelt sich um einen Typ mit fester Breite. Es ist nicht schwierig, die Breite von BannerCon in CSS in Prozent zu ändern und dann die Breite von ul und li so zu ändern, dass sie der Breite des übergeordneten Containers in js folgt .
Kompatibel mit Browsern ab IE6. Es gibt zwei Parameter, die geändert werden können: Karussellgeschwindigkeit und Umschaltintervall. Das Rendering ist wie folgt:

Der HTML-Code lautet wie folgt:

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <title>banner图</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/common.js"></script>
</head>
<body>
 <div class="wrap">
 <div class="banner">
 <div class="bannerCon">
 <ul class="imgList clearfix">
 <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
 <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
 <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
 </ul>
 <ul class="btnList clearfix">
 <li class="cur"><span></span></li>
 <li><span></span></li>
 <li><span></span></li>
 </ul>
 <span class="pre-nex prev"><</span> 
 <span class="pre-nex next">></span> 
 </div>
 </div>
 </div>
</body>
</html>

Nach dem Login kopieren

CSS-Stil ist wie folgt:

@charset "utf-8";
/* 简单reset */
body, 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;
} 
/* 具体样式 */
.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%; }
.bannerCon .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; }

Nach dem Login kopieren

Der Js-Code lautet wie folgt:

//加载在文本读取之后的js语句 开始 =============================================================
 function Scroll(obj,speed,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.children(".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(){ //轮播事件
 $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(){ //小圆点点击事件
 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(){ //左右按钮点击事件
 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(  //鼠标移入、移出事件
 function(){
  clearInterval(Player);
  $btnPreNex.addClass('show');
 },
 function(){
  Player = setInterval(function(){scroll()},interval);
  $btnPreNex.removeClass('show');
 }
 );
 Player = setInterval(function(){scroll()},interval);
 });
 } 
 $(function () {  //读取轮播事件
 Scroll("bannerCon",600,4000);
 });

Nach dem Login kopieren

Achten Sie auf das Laden der jq-Bibliothek. Ich verwende 1.9.1. Tatsächlich ist 1.7 in Ordnung.

Das Obige ist der mit Ihnen geteilte Jquery-Bildkarusselleffekt. Ich hoffe, er wird Ihnen beim Lernen helfen.