• 轮播图片简单常用的图片轮播,新闻轮播,焦点新闻轮播


    空话就不多说了,开始。。。

        简略经常使用的图片轮播,新闻轮播,焦点新闻轮播,空话不说,贴代码,代码简略易懂,非插件,欢迎留言啊,有什么问题可以指出来,效果图如下

        轮播和图片

        每日一道理
    感叹人生,是因为曾经没有过轰轰烈烈的壮举,觉得渺小,觉得平庸,似乎生活过于简略,简略得让人感觉烦躁。没有大言不惭地说过将来,只是比较现实地握住了现在,我想,这是一条路,每个人所必须踏上的一次旅程,曾经看到过这样一句话:成长的过程漫长却充实,自毁的过程短暂却留下一生痛苦,人生可以说是一次考验,何去何从取决于自我。
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>简略经常使用的图片轮播,新闻轮播,焦点新闻轮播</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    		<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
    		<script type="text/javascript">
    			$(function(){		   
    				var index=0;
    				var slideFlag = true;
    				var length=$(".roll_pic img").length;
    
    				function showImg(i){
    					$(".roll_pic a")
    					.eq(i).stop(true,true).fadeIn(600)
    					.siblings("a").hide();
    
    					$(".roll_num li").removeClass("roll_num_hover");
    					$(".roll_num li").eq(i).addClass("roll_num_hover");
    
    					$(".roll_title a")
    					.eq(i).stop(true,true).fadeIn(600)
    					.siblings("a").hide();
    				}
    				showImg(index);
    				
    				$(".roll_num li").click(function(){
    					index = $(".roll_num li").index(this);
    					showImg(index);
    					slideFlag = false;
    				});	
    				
    				function autoSlide() {
    					setInterval(function() {
    						if(slideFlag) {
    							showImg((index+1) % length);
    							index = (index+1)%length;
    						}
    						slideFlag = true;
    					}, 3000);
    				}
    				
    				autoSlide();
    				
    			});
    		</script>
    		<style type="text/css">
    			* {padding:0px;	margin:0px;}
    			.roll {480px;height:300px;border:solid 1px #c1c1c1;}
    			.roll_num li.roll_num_hover {background:#fff;color:red;}
    			.roll_pic img {480px;height:300px;}
    			.roll_num {position:relative;top:-30px;margin-right:5px;float:right;z-index:10;}
    			.roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;background:#000;opacity:0.50;text-align:center;color:#fff;-moz-border-radius:8px;border-radius:8px;}
    			.roll_title {position:relative;top:-35px;padding-left:10px;height:30px;line-height:22px;background:#000;opacity:0.50;}
    			.roll_title a {font-size:12px;text-decoration:none;color:#fff;}
    			.roll_title a:hover {color:red;}
    		</style>
    	</head>
    	<body>
    		<div class="roll">
    			<div class="roll_pic">
    				<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>
    				<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>
    				<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>
    			</div>
    			
    			<div class="roll_num">
    				<ul>
    					<li class="roll_num_hover">1</li>
    					<li>2</li>
    					<li>3</li>
    				</ul>
    			</div>
    			<div class="roll_title">
    				<a href="http://www.875.cn/" target="_blank">图片1的标题</a>
    				<a href="http://www.875.cn/" target="_blank" style="display:none">图片2的标题</a>
    				<a href="http://www.875.cn/" target="_blank" style="display:none">图片3的标题</a>
    			</div>
    		</div>
    	</body>
    </html>

    文章结束给大家分享下程序员的一些笑话语录: 人工智能今天的发展水平:8乘8的国际象棋盘其实是一个体现思维与创意的强大媒介。象棋里蕴含了天文数字般的变化。卡斯帕罗夫指出,国际象棋的合法棋步共有1040。在棋局里每算度八步棋,里面蕴含的变化就已经超过银河系里的繁星总数。而地球上很少有任何数量达到这个级别。在金融危机之前,全世界的财富总和大约是1014人民币,而地球人口只有1010。棋盘上,所有可能的棋局总数达到10120,这超过了宇宙里所有原子的总数!经典语录网

    --------------------------------- 原创文章 By
    轮播和图片
    ---------------------------------

  • 相关阅读:
    Discuz X3.2 分区 gid 完美伪静态方法 Apache/Nginx
    如何批量转换 WordPress 文章分类
    修改 WordPress 文件上传目录
    如何验证 jemalloc 优化 Nginx 是否生效
    .Net Core 1.1 + CentOs 7 环境配置
    DotNet Core中使用dapper
    爬虫 HttpHelper
    iTextSharp 不适用模板 代码拼接PDF
    .Net中的加密解密
    .Net Core使用 MiniProfiler 进行性能分析
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3106862.html
Copyright © 2020-2023  润新知