实现自动图片轮播

效果<!DOCTYPE html>
<html>
    <head>
        <title>图片轮播，新闻轮播，焦点新闻轮播</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var index=0;
                var slideFlag = true;
                var length=$(".roll-news-image img").length;  

                function showImg(i){
                    $(".roll-news-image img")
                    .eq(i).stop(true,true).fadeIn(800)
                    .siblings("img").hide();  

                    $(".roll-news-index li").removeClass("roll-news-index-hover");
                    $(".roll-news-index li").eq(i).addClass("roll-news-index-hover");  

                    $(".roll-news-title a")
                    .eq(i).stop(true,true).fadeIn(800)
                    .siblings("a").hide();
                }
                showImg(index);  

                $(".roll-news-index li").click(function(){
                    index = $(".roll-news-index 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-news {
                width:480px;
                height:300px;
                border:solid 1px #c1c1c1;
            }
            .roll-news-index-hover {
                background-color:white;
            }
            .roll-news-image img {
                width:480px;
                height:300px;
            }
            .roll-news-index {
                position:relative;
                top:-50px;
                margin-right:5px;
                float:right;
            }
            .roll-news-index {
            }
            .roll-news-index li {
                list-style:none;
                float:left;
                font-size:12px;
                font-weight:600;
                width:18px;
                height:16px;
                line-height:16px;
                cursor:pointer;
                margin:0 3px;
                background-image:url(opacity_50.png);
                text-align:center;
            }
            .roll-news-title {
                position:relative;
                top:-25px;
                padding-left:10px;
                height:22px;
                line-height:20px;
                background:url(opacity_50.png);
            }
            .roll-news-title a {
                font-size:12px;
                text-decoration:none;
                color:#222222;
            }
            .roll-news-title a:hover {
                color:red;
            }
        </style>
    </head>
    <body>
        <div class="roll-news">
            <div class="roll-news-image">
                <img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg">
                <img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none">
                <img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none">
            </div>
            <div class="roll-news-index">
                <ul>
                    <li class="roll-news-index-hover">1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <div class="roll-news-title">
                <a href="" target="_blank">图片1：点击后跳转</a>
                <a href="" target="_blank" style="display:none">图片2：点击后跳转</a>
                <a href="" target="_blank" style="display:none">图片3：点击后跳转</a>
            </div>
        </div>
    </body>
</html>  改变Jquery.js和图片的路径就可以马上使用！

实现自动图片轮播

时间： 2024-12-28 14:05:28

实现自动图片轮播的相关文章

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Carousel figure</title> 5 <meta charset="utf-8"> 6  7 <lin

js图片轮播与索引变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

一分钟搞定AlloyTouch图片轮播

一分钟搞定AlloyTouch图片轮播轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动.所以AlloyTouch制作各种各样的轮播组件还是得心应手. 第一种轮播图如上图所示.下面开始实现的过程. 第0秒 <div id="carousel-container&quo

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果实现图片的自动轮播二.实现代码 storyboard中布局代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

UISCrollView —— 图片轮播器实现（三）——（第二讲）

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1 NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2 NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST

图片轮播(左右切换)--js原生和jquery实现

图片轮播(左右切换)--js原生和jquery实现左右切换的做法基本步骤跟上一篇文章淡入淡出类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在

Android Studio导入GitHub上的项目常见问题(以图片轮播开源项目为实例)

前言:github对开发者而言无疑是个宝藏,但想利用它可不是件简单的事,用Android studio导入开源项目会遇到各种问题,今天我就以github上的一个图片轮播项目为例,解决导入过程中的常见问题. 1.下载项目压缩包 2.由于android studio采用gradle自动构建,而每个项目的gradle版本不一致会导致编译异常,所以要修改开源项目的gradle版本,过程如下打开自己本地建立工程下的build.gradle文件,将其全部复制. 然后用记事本或其他软件打开开源项目下的bui

Android事件分发学习应用-图片轮播实现

前一篇写到Android事件分发机制学习笔记,下面我们通过一个实例的应用来实践理解下Android事件分发的机制.我们这里来实现一个图片的轮播功能,最后顺便实现下图片的自动轮播. 我们的图片轮播是封装在一个ViewGroup里,当我们进行横向滑动的时候,我们需要阻止事件从ViewGroup往子控件分发,ViewGroup来消费我们当前的滑动图片何去何从.下面我们贴出我们的封装的ViewGroup的代码实现如下: public class ImageSwitcher extends ViewGro

图片轮播效果

今天有点空,写了个图片轮播的效果,使用了jq,直接上代码吧. 效果:http://edwardzhong.github.io/blog/2014/10/31/slidePics.html html如下: <div class="wrap"> <div class="left fl"><</div> <div class="right fr">></div> <div c