栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

3种不同方式的焦点图轮播特效分享

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

3种不同方式的焦点图轮播特效分享

1.自动轮播+经过圆点滚动+鼠标停留在圆点上 时候暂停+离开圆点自动轮播:
复制代码 代码如下:




焦点图

*{margin:0; padding:0; list-style:none;}
.clear-fix{*zoom:1;}
.clear-fix:after{ content:"020"; clear:both; height:0; display:block;}
h1{ text-align:center;}
.slider{width:980px; height:365px; margin:0 auto; position:relative;}
.slider .img_box{width:980px; height:365px; overflow:hidden;}
.slider ul{width:100000px;}
.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;}
.slider .num_box{ position:absolute; bottom:10px; right:10px;}
.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;}
.slider .num_box a.c{ background:#C00;}



鼠标经过圆点切换



  • 1

  • 2

  • 3

  • 4

  • 5















2.自动轮播+鼠标点击圆点滚动+离开圆点自动轮播:
复制代码 代码如下:




焦点图1

*{margin:0; padding:0; list-style:none;}
.clear-fix{*zoom:1;}
.clear-fix:after{ content:"020"; clear:both; height:0; display:block;}
h1{ text-align:center;}
.slider{width:980px; height:365px; margin:0 auto; position:relative;}
.slider .img_box{width:980px; height:365px; overflow:hidden;}
.slider ul{width:100000px;}
.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;}
.slider .num_box{ position:absolute; bottom:10px; right:10px;}
.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;}
.slider .num_box a.c{ background:#C00;}



鼠标点击圆点切换



  • 1

  • 2

  • 3

  • 4

  • 5















3.自动轮播+点击上一个,下一个,圆点滚动+离开上一个,下一个,圆点自动轮播:
复制代码 代码如下:




焦点图2

*{margin:0; padding:0; list-style:none;}
.clear-fix{*zoom:1;}
.clear-fix:after{ content:"020"; clear:both; height:0; display:block;}
h1{ text-align:center;}
.top{ width:980px; margin:0 auto; position:relative;}
.top input{ width:100px; position:absolute; top:10px;}
.top .prev{ left:0;}
.top .next{ position:absolute; right:0;}
.slider{width:980px; height:365px; margin:0 auto; position:relative;}
.slider .img_box{width:980px; height:365px; overflow:hidden;}
.slider ul{width:100000px;}
.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;}
.slider .num_box{ position:absolute; bottom:10px; right:10px;}
.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;}
.slider .num_box a.c{ background:#C00;}





鼠标点击按钮切换





  • 1

  • 2

  • 3

  • 4

  • 5















转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/109837.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号