X
活动推荐

阿里云高性能云主机2折293元/年

企业级性能云服务器限时2折起
新用户5折爆款服务器会场
查看详情 293元/年
阅读模式:

最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)

查看:11020  回复:8  类型:  来源:php自学网  标签 jquery

        Banner轮播淡入淡出效果代码及实现思路,附带源码包,代码简单可用,支持点击左右按钮实现切换图片,支持点击选择对应的图片。主要通过两个流程去实现,通过定时器去自动选图、通过点击左右切换或下面的圆圈时时人为的事件触发选图。而图片的选择就看下面的代码吧。

        源码下载:banner轮播(淡入淡出效果).rar

代码思路:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>轮播</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
    *{margin:0;padding:0;}
    img{display:block;}
    .banner {width:500px;height:300px;margin:10% auto;background:#cccccc;overflow:hidden;
    position:relative;}
    .banner ul { position:absolute; left:0; top:0;}
    .banner ul li { display:block;width:500px;height:300px;z-index:100;}
    .banner .con { position:absolute; left:45%; bottom:3%;z-index:101; }
    .banner .con a { float:left; margin-right:8px; display:block; width:8px; 
    height:8px; border-radius:100%; background:#000;z-index:101;}
    .banner .con a.active { background:#fff;}
    .banner .u { width:30px;height:20px;background:rgba(255,255,255,0.5); display:none;}
    .banner .left { position:absolute; top:40%;left:2%;z-index:103;}
    .banner .right { position:absolute; top:40%;right:2%;z-index:103;}
</style>
</head>
<body>
<div>
    <ul>
        <li><img src="image/1.jpg" /></li>
        <li style="display:none"><img src="image/2.jpg" /></li>
        <li style="display:none"><img src="image/3.jpg" /></li>
    </ul>
    
    <div></div>
    
    <div class="u left">left</div>
    <div class="u right">right</div>
    
</div>
<script type="text/javascript">
    var index=0; 
    //获得li的个数,也是图片的个数
    var imgnum=$('.banner ul li').length; 
    var nmun='';
    
    
    $('.banner').hover(function(){
        //鼠标移动到上面停止到当前画面轮播
        clearInterval(p); 
        //左右两边的切换按钮显示
        $('.banner .u').fadeIn(); 
    },function(){
        //鼠标移开继续开始轮播
        pic(); 
        //两边切换按钮隐藏
        $('.banner .u').fadeOut();  
     });
    
    function pic(){ 
    //轮播切换图片的函数,思路就是通过定时器不停的改变index的值,选择对应的图片页面进行显示
        
        p=setInterval(function(){
        
            index++;
            
            if(index>=imgnum){
                //当index大于图片总个数时回到第一屏
                index=0; 
            }
            
            //通过index显示对应图片
            selectimg(index); 
    
        },2000);
        
    }
    
    //通过index显示对应的图片,并隐藏这张图片的其他图片
    function selectimg(index){ 
        $('.banner ul li').eq(index).fadeIn(600).siblings().fadeOut(600); 
        //同时把下面的小按钮加上选中样式,其他取消
        $('.con a').eq(index).addClass('active').siblings('a').removeClass('active'); 
    }
    
    //往左切换
    $('.banner .left').click(function(){ 
        index-=1;
        if(index<0){
                index=imgnum-1;
            }
        selectimg(index);
        
    });
    
    //往右边切换
    $('.banner .right').click(function(){ 
        index+=1;
        if(index>imgnum-1){
                index=0;
            }
        selectimg(index);
        
    });
    
    //把所有下面的小按钮选择的根据图片张数写入对应个数到页面
    for(var ni=0;ni<imgnum;ni++){ 
        nmun +="<a href='javascript:;'></a>";
    }
    $('.banner .con').html(nmun);
    $('.banner .con a').eq(0).addClass('active');
    
    //点击圆点时选择对应的图
    $('.con a').each(function(i){
		$(this).click(function(){
		    //点击对应的圆点,并改变index
		    index=i;
		    $('.banner ul li').eq(i).fadeIn(600).siblings().fadeOut(600);
		    $(this).addClass('active').siblings('a').removeClass('active');
		});
	}); 
	
    //默认开始加载
    pic(); 
    
</script>
</body>
</html>
分享到:
1 3

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

最新评论:
Atlantis  发表于 2017-12-12 16:21:34  中国广西梧州
沙发
点击第N个圆点选择图片并不会重新赋值全局变量的index,导致出现点完第N张之后点下一张或者定时器重新运行之后的下一张并不是N+1张,而是原本运动到的那一张的下一张;比如说当前显示的是第一张图片,我点第四张图片,然后点击下一张,效果不是跳到第5张而是跳到第二张 回复
站长 回复 Atlantis 非常感谢你的反馈! 确实有存在这个问题,问题原因是因为点击下面圆圈时没有对全局变量index进行赋新值,导致当点圆圈再点上面的切换按钮时,还是旧的index,需要点两下才切换图片。BUG已经修复了,下载包已经更新。请重新下载代码,谢谢。
2017-12-12 17:00 中国广东深圳 回复
暖暖の、拥抱♬  发表于 2018-01-05 14:28:45  中国山东济南
板凳
回复
站长 回复 暖暖の、拥抱♬
2018-01-18 10:57 中国广东深圳 回复
不知不觉  发表于 2018-01-18 10:01:03  中国北京北京
地板
网站数据统计好像没有了,好久没来网站好像变了很多. 回复
站长 回复 不知不觉 网站数据统计放到关于里面去了。最近有小改版呢。
2018-01-18 10:59 中国广东深圳 回复
OLG-余祥伟  发表于 2018-01-23 09:32:09  中国广东深圳
4楼
建议使用swiper更加全面 回复
站长 回复 OLG-余祥伟 都可以的、这里只提供一种思路呢
2018-01-24 23:42 中国广东深圳 回复
回复:[主题]
表情:
 提交评论
清空

发布评论:


登录:
  表情:
评论话题
推荐阅读:
shell脚本统计当前服务器并发连接数   阅读:5422centos 7 设置 nginx-1.11.10 开机启动   阅读:6577一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:102950纯干货,程序员面试的超实用技巧   阅读:3266纯干货,程序员面试的超实用技巧   阅读:3266十张GIF让你弄懂递归等概念   阅读:4762centos 7 安装 redis 3.2.9   阅读:5364ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:6892centos 7 添加 redis 3.2.9 开机启动脚本   阅读:7582面试的时候和你谈理想,是理想or入坑?   阅读:7444linux时间戳有趣的情人节秒1234567890   阅读:4280最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:8795session与cookie的区别   阅读:3238封装php redis缓存操作类   阅读:6853最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:11026一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:102950PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:10109一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:102950centos7开启交换内存   阅读:8430nginx编译安装后对nginx进行平滑升级   阅读:4361封装php redis缓存操作类   阅读:6853phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:10128php 读取和设置redis的键值   阅读:5968php删除一个文件夹内的所有文件夹和文件   阅读:3831shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:6908php swoole搭建简单的聊天室   阅读:1553php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:6119程序员找工作三要素(必看)   阅读:4545mysql数据库性能的基本优化   阅读:3664shell脚本统计当前服务器并发连接数   阅读:5422centos 7 设置 nginx-1.11.10 开机启动   阅读:6577php打印九九加法表   阅读:7403mysql的四种索引类型   阅读:15920用php从1乘到100的值   阅读:5078session与cookie的区别   阅读:3238mysql5.7主从同步配置   阅读:2371linux教程,鸟哥私房菜(pdf全集)   阅读:6899mysql数据一键导出到csv文件   阅读:4363把php session 会话保存到redis   阅读:5734centos 7 设置 nginx-1.11.10 开机启动   阅读:6577mysql数据库性能的基本优化   阅读:3664php打印九九加法表   阅读:7403php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:4413php打印三角形   阅读:5259PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:10109php打印九九加法表   阅读:7403面试的时候回去等通知,等电话的真实意思   阅读:18221Mysql在大型网站的应用架构演变   阅读:3595企业让你去面试,可能不是真的招人   阅读:4772mysql中文分词全文搜索索引讯搜的安装   阅读:5235