38行js+ 16行css+ul元素布局轻松搞定：滑动图(点击圆点切换)-淡入淡出效果

最新推荐文章于 2022-12-30 18:08:46 发布

xinxiaoyong

最新推荐文章于 2022-12-30 18:08:46 发布

阅读量723

点赞数

分类专栏： w eb 文章标签：轮播图滑动图片淡入淡出滑动图片

本文链接：https://blog.csdn.net/xinxiaoyonng/article/details/83112849

版权

w eb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.先看效果图：

2.代码截图：

3.代码展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>淡入淡出-点击圆点切换</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
/*初始化公共元素属性-开始*/
body,
h1, h2, h3, h4, h5, h6,
blockquote, p,
dl, dt, dd, ul, ol, li, th, td,
form, fieldset, legend, button,
input, textarea { margin: 0; padding: 0; }

em, i { font-style: normal; }

body, button, input, select, textarea { font: 8px arial, "Microsoft YaHei", "SimHei", "SimSun", sans-serif; }

button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-size: 100%; }

ol, ul { list-style: none; }

img, fieldset { border: 0; vertical-align: middle; }

textarea { resize: none; }

a { outline: 0; }
a:active { star: expression(this.onFocus=this.blur()); }

:focus { outline: 0; }

table { table-layout: fixed; }

.pr { position: relative; }

.clear { font-size: 0; line-height: 0; height: 0; overflow: hidden; clear: both; visibility: hidden; }

ul.fl, ol.fl { float: left; display: block; }

/*body*/
body { margin: 0; padding: 0; color: #000; font-size: 12px; text-align: left; background: #d7d7d9; }

a, a:link, a:visited, a:active { color: #bb0205; text-decoration: none; }
a:hover { color: #bb0205; text-decoration: underline; }
a:hover img { filter: alpha(opacity=80); opacity: 0.8; }

.main { margin: 0 auto; width: 1200px; }

.red { color: #fff; }
.red:link, .red:visited, .red:hover, .red:active { color: #fff; }

.aLink { display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #fff; text-decoration: none; }
.aLink:link, .aLink:visited, .aLink:hover, .aLink:active { color: #fff; text-decoration: none; }

/*初始化公共元素属性-结束*/

/*当前效果背景颜色*/
.top3, .top3 .main { height: 518px;background-color:#696969;z-index:-5; }

.c3{position:relative;}

/*效果图的最外层：用来控制轮播图在该图层的位置*/
.c51{position:absolute;left: 409px;top: 270px;z-index:2;}
/*效果图的第二层：用来控制轮播图的展示宽度和展示图片的位置*/
.turn1{margin:0 auto; width:978px; position:absolute;}
/*展示数据的第三层：控制展示数据的方向*/
ul{list-style:none;}
/* 将展示的宽高限制为固定值，图片多出的地方将会隐藏。第三层父级和第二层父级宽度保持一致*/
.turn1 ul{ width:978px;height:411px;}
/* 将展示的数据进行浮动,相对第三层父级给个相对定位,将所有li元素隐藏*/
.turn1 ul li {position: absolute;top: -150px;left: 66px;float: left;display:none;}
/*按钮1，*/
.left1{/display:block;width:33px;height:61px;position:absolute;background: url(https://topic.autoimg.cn/marketing/2017/12/bmw_m/arr1.png) no-repeat 2px -7px;}
/*按钮2*/
.right1{background: background: url(https://topic.autoimg.cn/marketing/2017/12/bmw_m/arr1.png) no-repeat;display:block;width:33px;background: url(https://topic.autoimg.cn/marketing/2017/12/bmw_m/arr1.png) no-repeat 2px 54px;height:61px;position:absolute;}
/*给按钮1一个定位*/
.left1{left: 35px;top: 90px;z-index:99;}
/*给按钮1一个鼠标悬浮*/
.left1:hover{filter: alpha(opacity=80); opacity: 0.8;}
.right1{/* background-position:right 0px; */right: 910px;top: -195px;z-index: 99;}
.right1:hover{filter: alpha(opacity=80); opacity: 0.8;}

/*点击切换按钮*/
/*控制按钮整体位置*/
.op{position: absolute;text-align: center;bottom: 5%;right: 918px;top: -115px;}
.op span{display:block;margin-right:5px;width: 20px;height: 20px;/margin-bottom: 15px;cursor:pointer;text-align: center;font-weight: bold;color: #bdbdbd;}
.op span.cur{color: #000;}

</style>
</head>

<body>

<div class="top3">
<div class="main">
<div class="c3">

<div class="c51">

<div class="turn1" id="c5a">

<a href="javascript:;" class="left1"></a>
<a href="javascript:;" class="right1"></a> <br />
<ul>
<li style="display:block">
<a href="javascript:viod(0);" target="_blank">
<img src="https://topic.autoimg.cn/marketing/2018/3/bmw_m5/b1.jpg" /></a>
<div class="te">
<h2><a href="javascript:viod(0);" target="_blank">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ducimus aspernatur quibusdam, nihil asperiores. Id vel, nemo aliquam <br />eius earum illo quas, quos dolores ad rem explicabo laborum quae consequuntur. </a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat a eum aperiam <br />illo quidem animi aliquam voluptate totam recusandae inventore amet eveniet, corporis molestias voluptatum qui sint, sit debitis libero.</p>
</div>
</li>
<li style="display: none;"><a href="javascript:viod(0);" target="_blank"><img src="https://topic.autoimg.cn/marketing/2018/3/bmw_m5/b2.jpg" /></a>
<div class="te">
<h2><a href="javascript:viod(0);" target="_blank">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates, natus assumenda sed sapiente! Optio consectetur <br />excepturi, suscipit autem vero totam sequi, nemo repellat, et hic provident perspiciatis dolore dolor.</a> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi <br />doloribus maxime voluptate quod tenetur, cum possimus aliquid nam aspernatur at ea placeat. Voluptates itaque eligendi, quisquam, inventore sit molestias aut.</p>
</div>
</li>
<li style="display: none;"><a href="javascript:viod(0);" target="_blank"><img src="https://topic.autoimg.cn/marketing/2018/3/bmw_m5/b3.jpg" /></a>
<div class="te">
<h2><a href="javascript:viod(0);" target="_blank">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum ipsam voluptates, nesciunt dolor rerum laudantium qui<br /> deleniti ducimus odio reiciendis repellat obcaecati dolore tempora blanditiis nam maiores minima, nobis officia.</a> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ullam quibusdam cum necessitatibus nisi<br /> officia, ipsum modi consectetur, ad dolor minus hic est sed cupiditate eligendi eveniet voluptatibus ducimus illo.</p>
</div>
</li>
<li style="display: none;"><a href="javascript:viod(0);" target="_blank"><img src="https://topic.autoimg.cn/marketing/2018/3/bmw_m5/b4.jpg" /></a>
<div class="te">
<h2><a href="javascript:viod(0);" target="_blank">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero fugiat, quam. Ratione rem, possimus libero<br /> esse aliquam error. Reprehenderit, consequuntur illo provident temporibus omnis, culpa et officiis aspernatur sunt vero.</a> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ea fugiat excepturi minus illo sapiente animi doloremque soluta!<br /> Fugiat, libero eius mollitia vitae, quam atque tenetur iure aliquid! Soluta, sapiente.</p>
</div>
</li>
<li style="display: none;"><a href="javascript:viod(0);" target="_blank"><img src="https://topic.autoimg.cn/marketing/2018/3/bmw_m5/b5.jpg" /></a>
<div class="te">
<h2><a href="javascript:viod(0);" target="_blank">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente tenetur, temporibus officiis id excepturi <br />nobis sit! Nemo consectetur doloribus autem dolorem, atque aspernatur consequatur. Quisquam omnis error reprehenderit minima culpa.</a> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe ut deleniti atque laboriosam <br />maxime. Voluptatem repellat aliquid libero, tenetur, iusto illum saepe praesentium esse, vel similique illo eaque dolorum enim!</p>
</div>
</li>
</ul>

<p class="op"></p>
</div>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/*左右点击淡入淡出jquery 封装 imgfade函数*/
function imgfade(turn1){
// 预先定义一个变量，后面用来保存切换按钮和效果图片的下标值
var $key=0;
// 获取左右按钮
var $left=turn1.children("a:eq(0)");
var $right=turn1.children("a:eq(1)");
//获取所有切换点
var $p=turn1.children("p.op");
//获取所有li元素
var $li=turn1.find("li");
// 计算获取li的个数
var $length=$li.length;
/*根据li的个数循环创建切换点*/
var html="";
for(i=0;i<$length;i++){
if(i==0){
html+="<span class='cur'>0"+(i+1)+"</span>";
}else{
html+="<span>0"+(i+1)+"</span>";
}
}
$p.append(html);
// 给目标对象小圆点一个点击事件
$p.find("span").on("click",function(){
//得到目标对象的下标值。
var num=$(this).index();
$(this).addClass("cur").siblings().removeClass("cur");
//根据切换点的下标值将所对应的 li添加过渡显隐效果
$li.eq(num).fadeIn(600).siblings().fadeOut(300);
// 将$key 重新赋值并返回到函数外
return $key=num;
});
/*左键*/
$left.click(function(){
//将当前的淡出
$li.eq($key).fadeOut(600);
//切换点
$key++;
// 当$key的下标值大于当前最大的下标值时，重新赋值
if( $key>$li.length-1){$key=0;}
//下一个过渡显示
$li.eq($key).fadeIn(300);
$p.find("span").eq($key).addClass("cur").siblings().removeClass("cur");
})
/*右键*/
$right.click(function(){
//将当前的淡出
$li.eq($key).fadeOut(600);
$key--;
//当$key的下标值小于当前最小下标值时，重新赋值
if( $key<-$li.length+1){$key=0;}
$li.eq($key).fadeIn(300);
//更换目标圆点字体颜色
$p.find("span").eq($key).addClass("cur").siblings().removeClass("cur");
})
}
// 第二层父级元素调用函数封装
imgfade($("#c5a"));
</script>
</body>

</html>

提示：本代码基于jQuery。可直接复制到本机运行查看效果。由于水平有限，本文档仅供初学者或首次开发者提供参考。如代码有错误之处，请见谅。如果有更好的开发经验，感谢回复。谢谢观看！！！；

xinxiaoyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
38行js+ 16行css+ul元素布局轻松搞定：滑动图(点击圆点切换)-淡入淡出效果

1.先看效果图：2.代码截图：3.源代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="https://www.w3.org/1999/...
复制链接

扫一扫