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

1.先看效果图：

2.代码截图：

3.源代码：

淡入淡出-点击圆点切换

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

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;}

       

•                

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ducimus aspernatur quibusdam, nihil asperiores. Id vel, nemo aliquam
  eius earum illo quas, quos dolores ad rem explicabo laborum quae consequuntur.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat a eum aperiam
  illo quidem animi aliquam voluptate totam recusandae inventore amet eveniet, corporis molestias voluptatum qui sint, sit debitis libero.

• 

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates, natus assumenda sed sapiente! Optio consectetur
  excepturi, suscipit autem vero totam sequi, nemo repellat, et hic provident perspiciatis dolore dolor.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi
  doloribus maxime voluptate quod tenetur, cum possimus aliquid nam aspernatur at ea placeat. Voluptates itaque eligendi, quisquam, inventore sit molestias aut.

• 

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum ipsam voluptates, nesciunt dolor rerum laudantium qui
  deleniti ducimus odio reiciendis repellat obcaecati dolore tempora blanditiis nam maiores minima, nobis officia.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ullam quibusdam cum necessitatibus nisi
  officia, ipsum modi consectetur, ad dolor minus hic est sed cupiditate eligendi eveniet voluptatibus ducimus illo.

• 

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero fugiat, quam. Ratione rem, possimus libero
  esse aliquam error. Reprehenderit, consequuntur illo provident temporibus omnis, culpa et officiis aspernatur sunt vero.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ea fugiat excepturi minus illo sapiente animi doloremque soluta!
  Fugiat, libero eius mollitia vitae, quam atque tenetur iure aliquid! Soluta, sapiente.

• 

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente tenetur, temporibus officiis id excepturi
  nobis sit! Nemo consectetur doloribus autem dolorem, atque aspernatur consequatur. Quisquam omnis error reprehenderit minima culpa.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe ut deleniti atque laboriosam
  maxime. Voluptatem repellat aliquid libero, tenetur, iusto illum saepe praesentium esse, vel similique illo eaque dolorum enim!

/*左右点击 淡入淡出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

if(i==0){

html+="0"+(i+1)+"";

}else{

html+="0"+(i+1)+"";

}

}

$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.eq($key).fadeIn(300);

//更换目标圆点字体颜色

$p.find("span").eq($key).addClass("cur").siblings().removeClass("cur");

})

}

// 第二层 父级元素调用函数封装

imgfade($("#c5a"));

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