js333 > 计算机互联网 > 淡入淡出轮播图,利用jquery写的左右轮播图特效

原标题:淡入淡出轮播图,利用jquery写的左右轮播图特效

浏览次数:179 时间:2019-11-22

Jquery制作--焦点图轮播,jquery--焦点

公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize,目前公司暂时没用到,就先放这个定宽的出来啦。

兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。效果图如下:

图片 1

Html代码如下:

<!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="图片 2"/></a></li>
          <li><a href="#"><img src="images/banner02.jpg" alt="图片 3"/></a></li>
          <li><a href="#"><img src="images/banner03.jpg" alt="图片 4"/></a></li>
        </ul>
        <ul class="btnList clearfix">
          <li class="cur"></li>
          <li></li>
          <li></li>
        </ul>
        &lt; 
        &gt; 
      </div>
    </div>
  </div>
</body>
</html>

Css样式如下:

图片 5@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; } View Code

Js代码如下:

图片 6//加载在文本读取之后的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); }); View Code

注意加载一下jq库,我用的是1.9.1的,其实1.7+的都没问题的。如果觉得对你们有帮助,就给个赞哈~~~

公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按...

Jquery制作--焦点图淡出淡入,jquery--淡出淡入

之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦。这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的。

兼容到IE6+以上浏览器,有淡出淡入速度和切换间隔两个参数可以改。效果图如下:

图片 7

Html代码如下:

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>淡出淡入焦点图</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">
          <li><a href="#"><img src="images/banner01.jpg" alt="图片 8"/></a></li>
          <li><a href="#"><img src="images/banner02.jpg" alt="图片 9"/></a></li>
          <li><a href="#"><img src="images/banner03.jpg" alt="图片 10"/></a></li>
        </ul>
        <ul class="btnList clearfix">
          <li class="cur"></li>
          <li></li>
          <li></li>
        </ul>
        &lt; 
        &gt; 
      </div>
    </div>
  </div>
</body>
</html>

Css样式如下:

图片 11@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 { height: 400px; } .banner .bannerCon { position: relative; width: 60%; height: 100%; margin: 0 auto; overflow: hidden; } .bannerCon .imgList { width: 100%; height: 100%; } .bannerCon .imgList li { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e2f6fd; /* 这个背景是为了展示宽度大于图片宽度时的区域,可以删除 */ z-index: 1; } .bannerCon .imgList li a { display: block; height: 100%; text-align: center; } .imgList li a img { position: absolute; top: 0; left: 50%; margin-left: -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: 6; _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; } View Code

Js代码如下:

图片 12//加载在文本读取之后的js语句 开始 ============================================================= function fadeImg(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"), n = $imgLi.length, k = 0, Player = setInterval(function(){fade()},interval); $imgLi.eq(0).fadeIn(speed); //第一张先淡入 function fade(){ //淡出淡入事件 k += 1; if(k >= n){ k = 0; } $btnLi.removeClass('cur').eq(k).addClass('cur'); $imgLi.fadeOut(speed).eq(k).fadeIn(speed); }; $btnLi.click(function(){ //小圆点点击事件 var index = $btnLi.index(this); $(this).addClass('cur').siblings('li').removeClass('cur'); $imgLi.fadeOut(speed).eq(index).fadeIn(speed); k = index; }); $btnPreNex.click(function(){ //左右按钮点击事件 if(!$imgLi.is(":animated")){ if($(this).hasClass('next')){ k += 1; if(k >= n){ k = 0; } } else{ k += -1; if(k < 0){ k = n-1; } } $btnLi.removeClass('cur').eq(k).addClass('cur'); $imgLi.fadeOut(speed).eq(k).fadeIn(speed); } }); $box.hover( //鼠标移入事件(不用toggle是为了兼容1.9+的JQ库) function(){ clearInterval(Player); $btnPreNex.addClass('show'); }, function(){ Player = setInterval(function(){fade()},interval); $btnPreNex.removeClass('show'); } ); }); } $(function () { //读取轮播事件 fadeImg("bannerCon",1000,3000); }); View Code

 

jq库用1.7+的都没问题的啦^_^ 。如果觉得对你们有帮助,就给个赞哈~~~

 

之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦。这个容...

;

最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的

;

将jquery框架的链接跟图片替换就可以看到效果了

图片轮播 jq(淡入淡出)

源代码如下:

body,div,ul,li,a,img{margin: 0;padding: 0;}

复制代码 代码如下:

ul,li{list-style: none;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图</title>
<style>
*{margin:0; padding:0;}
body{min-width:320px; font-size:12px;}
h1{font-size:18px;}
h2{font-size:14px}
h4{font-size:12px;}
p{ word-break:break-all; line-height:24px;}
ul,ul li,ol,ol li{list-style:none;}
a{text-decoration:none;}
.clear{clear:both;}
.clearfix:after{ display:block; clear:both; content:"."; visibility:hidden; height:0px;}

a{text-decoration: none;}

#pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;}
.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;}
.lunbo_pic li{ float:left; overflow:hidden;}
.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;}
.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; }
.lunbo_curso a{ background:url(../images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;}
.lunbo_curso .small_xz{ color:#F0F;}
.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;}
#arr_l{ left:0; background:#CCC;}
#arr_r{ right:0; background:#CCC;}
.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;}
</style>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="pic_carousel">
<ul id="lunbo_pic" class="clearfix lunbo_pic">
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p3.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li>
</ul>
<div id="lunbo_curso" class="lunbo_curso">
<a href="#" class="small_xz">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<span id="arr_l" class="arr"></span>
<span id="arr_r" class="arr"></span>
</div>
<script>
var b_width = 1000; // 大图的宽度
var speed = 500; // 图片向左移动速度
var s_time = 3000 //图片自动滚动速度
var pic_li = $("#lunbo_pic").children("li");
$(document).ready(function(e) {
var $ul_width= pic_li.width() * pic_li.length; //轮播图的宽度
$("#lunbo_pic").width($ul_width);
var small_width = $(".lunbo_curso>a").width() * $(".lunbo_curso>a").length;
$(".lunbo_curso").width(small_width);
$(".lunbo_curso").css("margin-left",-small_width/2);
});

.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

$(document).live("click",function(e){
$target = $(e.target);
var id = $target.attr('id');
if($target.is("a") && $target.parent($("#lunbo_curso")) ){
$target.addClass("small_xz").siblings().removeClass('small_xz');
var mar_lf = parseInt($target.index() * b_width);
$("#lunbo_pic").animate({
left : -mar_lf
},speed);
}
if(id == "arr_l"){
prePage();
}
if(id == "arr_r"){
nextPage();
}
});
//上一个
function prePage(){
if($(".small_xz").index() == 0){
$("#lunbo_pic").css("left",-4000);
$("#lunbo_pic").animate({
"left": -parseInt(pic_li.length *b_width - b_width)
},speed);
$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz");
$(".small_xz").index() == pic_li.length - 1;
}else{
$("#lunbo_curso>a").eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz");
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_width;
$("#lunbo_pic").animate({
"left": mar_lf2
},speed);
}
}
//下一个
function nextPage(){
if($(".small_xz").index() == pic_li.length -1){
$("#lunbo_pic").css("left",0);
/*$("#lunbo_pic").animate({
"left": 0
},speed);*/
$("#lunbo_curso>a").eq(0).addClass("small_xz").siblings().removeClass("small_xz");
淡入淡出轮播图,利用jquery写的左右轮播图特效。$(".small_xz").index() == 0;

.banner{width: 400px;height: 200px;overflow: hidden;}

}else{

.imgList{width:400px;height:200px;z-index: 10;}

$("#lunbo_curso>a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz");
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width;
$("#lunbo_pic").animate({
"left": mar_lf2
},speed);
}
}

.imgList li{display: none;}

function picRun(){
nextPage();
}
intervalTime = setInterval(picRun,s_time);

.imgList .imgOn{display: inline;}

$("#pic_carousel").on("mouseover",function(){
clearInterval(intervalTime);
});
$("#pic_carousel").on("mouseout",function(){
intervalTime = setInterval(picRun,s_time);;
});

.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}

</script>
</body>
</html>

.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

您可能感兴趣的文章:

  • jquery实现左右无缝轮播图
  • jQuery自适应轮播图插件Swiper用法示例
  • jquery实现左右滑动式轮播图
  • 基于jQuery实现淡入淡出效果轮播图
  • 原生Javascript和jQuery做轮播图简单例子
  • jQuery制作全屏宽度固定高度轮播图(实例讲解)
  • jQuery实现简洁的轮播图效果实例
  • jquery制作多功能轮播图插件
  • jQuery实现友好的轮播图片特效
  • jquery实现的简单轮播图功能【适合新手】

.infoList li{display: none;}

.infoList .infoOn{display: inline;color: white;}

.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

.indexList .indexOn{background: red;font-weight: bold;color: white;}

puss in boots1

puss in boots2

puss in boots3

puss in boots4

puss in boots5

1

2

3

4

5

var curIndex = 0; //当前index

//  alert(imgLen);

// 定时器自动变换2.5秒每次

var autoChange = setInterval(function(){

if(curIndex < $(".imgList li").length-1){

curIndex ++;

}else{

curIndex = 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

$(".indexList").find("li").each(function(item){

$(this).hover(function(){

clearInterval(autoChange);

changeTo(item);

curIndex = item;

},function(){

autoChange = setInterval(function(){

if(curIndex < $(".imgList li").length-1){

curIndex ++;

}else{

curIndex = 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

});

});

function changeTo(num){

$(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");

$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

}

本文由js333发布于计算机互联网,转载请注明出处:淡入淡出轮播图,利用jquery写的左右轮播图特效

关键词:

上一篇:htmlmeta标签用法,前端手机端常用MATA标签及解释

下一篇:Xcode8出现AQDefaultDevice (173): skipping input stream 0 0