欢迎来到php自学网~
阅读模式:

最简单的Banner轮播左右切换效果代码及实现思路(附带源码)

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

        Banner轮播左右切换效果代码及实现思路,支持左右切换图片,支持点击选择对应的图片。实现思路通过定时器去自动选图和点击触发事件去选择图片。而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画margin-left滚动。具体代码如下:

        源码下载: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;z-index:100;}
.banner ul li { display:block;width:500px;height:300px;float:left;}
.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 class="banner">
	<ul>
        <li><img src="image/1.jpg" /></li>
      <li><img src="image/2.jpg" /></li>
      <li><img src="image/3.jpg" /></li>
    </ul>
    
    <div class="con"></div>
    
    <div class="u left">left</div>
    <div class="u right">right</div>
</div>


<script type="text/javascript">
    var index = 0;
    //图片总个数
    var imgnum = $('.banner ul li').length;
    var nmun='';
    //计算单个图片的宽度
    var imgwidth = $('.banner ul li').width(); 
    //计算所有左浮动图片的宽度
    var allimgwidth = imgwidth*imgnum; 
    //设置ul宽度 
    $('.banner ul').css('width',allimgwidth); 
    
    
    $('.banner').hover(function(){
            //鼠标移动上来停止轮播
        clearInterval(p);
        //显示两边切换按钮
        $('.banner .u').fadeIn();
    },function(){
            //鼠标移开继续轮播
        pic();
        //隐藏两边按钮
        $('.banner .u').fadeOut();
    });
    
    //轮播切换图片的函数,
    //思路就是通过定时器不停的改变index的值,
    //然后乘以宽度就是总宽度
    function pic(){
        
        p=setInterval(function(){
            index++; 
            
            if(index>=imgnum){
                index=0;
            }
            //选择对应的图片
            selectimg(index); 
    
        },3000);
        
    }
    
    function selectimg(index){
            //通过改变ul往左边的距离显示对应的图片
        $('.banner ul').animate({'margin-left':'-' + imgwidth*index + 'px'},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=i;
		    $('.banner ul').animate({'margin-left':'-' + imgwidth*i + 'px'},600);
		    $('.con a').eq(index).addClass('active').siblings('a').removeClass('active');
		});
	});    
    
    //默认开始执行
    pic();
    
</script>
</body>
</html>
分享到:
2 1

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

扫描二维码手机查看

最新评论:
大狗  发表于 14天前  中国四川成都
沙发
你好,我想要去设置这三个图片的点击跳转,应该怎么写呢?感谢!!! 回复
站长 回复 大狗 图片上包<a></a>标签,或加onclick跳转
2018-05-12 11:13 中国广东深圳 回复
大狗 回复 大狗 对的,知道了,感谢!
2018-05-12 13:05 中国四川成都 回复
回复:[主题]
表情:
 提交评论
清空

发布评论:


登录:
  表情:
评论话题
推荐阅读:
最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:12592php文件下载防盗链   阅读:3232linux教程,鸟哥私房菜(pdf全集)   阅读:1677最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:6101web项目高并发量网站解决方案   阅读:1334html5 离线缓存的使用   阅读:1423centos7开启交换内存   阅读:2445十张GIF让你弄懂递归等概念   阅读:1710centos7开启交换内存   阅读:2445centos 7 安装 samba 服务   阅读:1674mysql数据库性能的基本优化   阅读:1763知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:1650php删除一个文件夹内的所有文件夹和文件   阅读:1737php设置cookie为HttpOnly防止XSS攻击   阅读:2518“米粉节”背后的故事——小米网抢购系统开发实践   阅读:1265mysql的四种索引类型   阅读:3166“米粉节”背后的故事——小米网抢购系统开发实践   阅读:1265shell脚本批量删除几天前的文件   阅读:2085php冒泡排序法   阅读:1468centos 7 安装 redis 3.2.9   阅读:2480php 统计网页打开耗时和脚本运行内存   阅读:2188shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:2228centos 7 设置 nginx-1.11.10 开机启动   阅读:2661php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:1994linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:2318纯干货,程序员面试的超实用技巧   阅读:1288HTTP 1.1 协议详解   阅读:1827php生成二维码   阅读:1870php 获取当前前后年、月、星期、日、时分秒的时间   阅读:1912浅谈javascript的函数节流   阅读:1383什么是天使轮?什么是A轮融资?B轮融资?   阅读:1112centos 7 添加 redis 3.2.9 开机启动脚本   阅读:3126centos 7.2 添加php7 的 php-fpm 开机启动   阅读:8632centos 7 添加 redis 3.2.9 开机启动脚本   阅读:3126最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:4017nginx编译安装后对nginx进行平滑升级   阅读:370给网站添加一键新浪微博登录的功能   阅读:2503企业让你去面试,可能不是真的招人   阅读:1630shell脚本批量删除几天前的文件   阅读:2085霍金24岁博士毕业论文在线预览   阅读:1409php 生成图片,给图片加水印   阅读:2279javascript对cookie操作详细代码函数   阅读:1620企业让你去面试,可能不是真的招人   阅读:1630小米手机端商城rem适配原理   阅读:2892mysql 为什么添加索引可以提高访问速度   阅读:1836linux top命令详解   阅读:1508mongodb设置shell开机启动脚本   阅读:1879php文件下载防盗链   阅读:3232shell脚本批量删除几天前的文件   阅读:2085linux教程,鸟哥私房菜(pdf全集)   阅读:1677