前端jquery 图片自动轮播

我想要实现图片的自动轮播,并且可以点击图片在新页面查看图片,刚开始的一次循环点击图片可以跳转新页面,可是之后的点击却无效

<!doctype

<html>
<head>
<meta charset="UTF-8">
<title>Demo13-2</title>
<style>
    .container{width:300px;height:150px;margin:200px auto;}
    .left,.right{width:10%;height:100%;line-height:150px;text-align: center;float:left}
    .picbox{width:80%;height:100%;float:left;overflow: hidden;}
    .pic{position:relative;width:720px;overflow:visible}
    img{width:100%;height:100%}
    .img{width:240px;height:150px;float:left}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function(){
        var stop =false;
        var index = -1;
        var pics = ["1","2","3"];
        $.each(pics,function(index,value){
            $(".pic").append($("<div class='img'><a href='img/"+value+".jpg'><image src='img/"+value+".jpg' /></a></div>"));
        })
        $(".pic").hover(function(){stop=true;},function(){stop=false;});
        setInterval(function(){
            if(stop) return;
            var left = parseInt($(".pic").css("left"))-1;
            //alert(left);
            $(".pic").css({left:left});
            if(left % 240 ==0)
            {
                index++;
                var w = parseInt($(".pic").css("width")) +240 ;
                $(".pic").css({"width":w})
                $(".pic").append($("<div class='img'><image src='img/"+pics[index%pics.length]+".jpg' /></div>"));
            }
        },10);

    })
</script>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="picbox">
            <div class="pic"></div>
        </div>
        <div class="right"></div>
    </div>
</body>
</html>


1个回答

<html>
<head>
<meta charset="UTF-8">
<title>Demo13-2</title>
<style>
    .container{width:300px;height:150px;margin:200px auto;}
    .left,.right{width:10%;height:100%;line-height:150px;text-align: center;float:left}
    .picbox{width:80%;height:100%;float:left;overflow: hidden;}
    .pic{position:relative;width:720px;overflow:visible}
    img{width:100%;height:100%}
    .img{width:240px;height:150px;float:left}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function(){
        var stop =false;
        var index = -1;
        var pics = ["1","2","3"];
        $.each(pics,function(index,value){
            $(".pic").append($("<div class='img'><a href='img/"+value+".jpg'><image src='img/"+value+".jpg' /></a></div>"));
        })
        $(".pic").hover(function(){stop=true;},function(){stop=false;});
        setInterval(function(){
            if(stop) return;
            var left = parseInt($(".pic").css("left"))-1;
            //alert(left);
            $(".pic").css({left:left});
            if(left % 240 ==0)
            {
                index++;
                var w = parseInt($(".pic").css("width")) +240 ;
                $(".pic").css({"width":w})
                $(".pic").append($("<div class='img'><a href='img/"+pics[index%pics.length]+".jpg'><image src='img/"+pics[index%pics.length]+".jpg' /></a></div>"));
            }
        },10);

    })
</script>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="picbox">
            <div class="pic"></div>
        </div>
        <div class="right"></div>
    </div>
</body>
</html>


Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
图片自动轮播翻页jquery
支持左右翻页,自动翻页,点击圆点翻页
jQuery自动轮播图片焦点图
jQuery自动轮播图片焦点图 在线演示 本地下载 posted @ 2018-12-03 20:26 栖息地 阅读(...) 评论(...) 编辑 收藏
jquery图片自动轮播
jquery图片自动轮播 支持IE、FireFox、搜狗等浏览器
jquery自动轮播图片
自动轮播图片 可以点击转换,每个门户网站必备,而且能够让你网站动起来的模块
JQuery的图片的切换和自动轮播
Title *{ margin: 0; padding: 0; text-align: center; } .clear:after{ content: "\200B"; display: block;
jquery图片自动轮播插件coin-slider
jQ的插件呢确实很多,要做网站首页的图片切换的功能也有很多,找了很久,找到了一个自己觉得最华丽的。该插件切换的效果有如ie的滤镜效果一样炫!附上 js,css文件和演示页面。打开即可观看效果。支持Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+ 您也可以在这个地址去访问http://workshop.rs/projects/coin-slider/。
图片自动轮播
图片自动轮播
图片的自动轮播
//布局           android:id="@+id/image_view"         android:scaleType="fitXY"         android:layout_width="match_parent"         android:layout_height="200dp" /> //activity: List l = bea
自动轮播图片
public class MainActivity extends AppCompatActivity {     private ViewPager vp;     private LinearLayout ll;     private List adlist;     private List ivList;     private Handler handler = new Ha
jQuery图片叠加自动轮播旋转切换代码
一款3D图片旋转木马,鼠标点击任何一个圆可进行滑动切换,支持自动轮播切换,效果非常棒。
jQuery图片自动轮播切换展示特效.zip
jQuery图片自动轮播切换展示特效是一款酷炫的带文字说明焦点图轮换代码。
JQUERY 自动轮播功能代码
JQUERY 自动轮播功能, 自动适应PC 手机端口显示 , 平滑过渡
Bootstrap 图片自动轮播
效果: 源码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt; &l...
ViewPager图片无限自动轮播
xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.
ImageView图片的自动轮播
private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if (msg.arg1 == 0) { i++; ImageLo
图片自动轮播(仿淘宝??)
先上效果图(给美宅疯狂打call~) 是不是你们要找的效果,是的话就继续往下看hahaha上重点(敲黑板)!!! js <script> $(function () { var containli=$('.contain > li');/*获取背景图的li标签*/ var index=containli.index();/*获取显示
ViewPager图片自动轮播
public class MainActivity extends Activity { private ViewPager pager; private ImageView mDian1, mDian2, mDian3, mDian4, img; private List<View> list = new ArrayList<View>(); private int
ios-自动轮播图片.zip
一个简单自动轮播图片的控件
ios-图片自动轮播.zip
可以实现自动轮播
Android自动轮播图片
实现图片的自动轮播效果
android 到圆点的自动轮播图片
android 到圆点的自动轮播图片,定时器自动轮播图片,设置小圆点
jquery实现图片自动轮播
这是自己以前实现的功能,在此和大家一起分享,以后多写博客咯,方便与大家共享知识,也为了自己可以更好的记忆。 源代码: 前端练习 div.pictures{ width:500px; height:400px; overflo
js 图片自动轮播
原生js图片轮播代码 非常有用 自己一直非常喜欢原生代码
jq图片自动轮播
这个图片轮播是基于jQuery开发的一个无缝衔接,可以点击左右进行滑动、可以点击下标进行滑动、也可以进行自动轮播的插件
mui 图片自动轮播
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;         &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-scale=1,max
banner无限自动轮播图片
一、添加依赖 xbanner依赖: compile 'com.xhb:xbanner:1.2.9' compile 'com.github.bumptech.glide:glide:3.7.0' compile 'jp.wasabeef:glide-transformations:1.0.6' 二、添加布局 com.stx.xhb.xbanner.XBanner xml
Handler图片自动轮播
public class Myfragment extends Fragment { String [] iamgs={"http://pic8.nipic.com/20100701/5290458_114840036316_2.jpg",//海 "http://pic2.nipic.com/20090424/1468853_230119053_2.jpg",
使用jQuery实现图片自动轮播
*{margin: 0;padding: 0;} .clear:after{content: "";height: 0;clear: both;overflow: hidden;display: inline-block;} .clear{*zoom: 1;} .content{width: 400px;height: 210px;margin: 20px auto;overflow: hi
bootstrap实现图片自动轮播
效果图代码实现:<!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-theme.min.css" /> <script src="jquery.min.js"></
JavaScript图片自动轮播
1.需求 有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换 2.技术分析 ​    a.切换图片 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;01切换图片&amp;lt;/title&amp;gt; &amp;lt;!-- JS的开发
ViewPage自动轮播图片
参考 1.https://www.cnblogs.com/whyalwaysme/p/4391688.html 2.https://blog.csdn.net/zhiyuan0932/article/details/52673169 不想看的直接上代码: https://download.csdn.net/download/luyujian6/10998167 MainActivi...
ViewPager+Handler图片自动轮播
ViewPager+Handler实现图片自动轮播的效果
ViewPager+holder自动轮播图片
1.xml&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_
ViewPager(四)——自动轮播图片
参考并改写自博客:http://blog.csdn.net/lfdfhl/article/details/50900497 AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.cctvjiatao.viewpagerdemo"
Viewpager实现图片自动轮播
概述今天看到一个视频,是关于用viewpager实现轮播图的,看完之后,自己也跟着试着实现了一下,就将自己的心得与demo及时记录下来,避免学到的知识过后就忘掉了。效果如下图 轮播图实现原理 运用伪无限循环的原理,即把viewpager的数量设为int的最大值,即21亿多,然后把第一个Item设为几百万左右的数,这个数是要显示图片数量的倍数,以保证设置的Item为第一张图片,一般都不会滑动到尽头
Javascript图片自动轮播
Javascript图片自动轮播,网上看到的,供大家一起共同分享学习。
jq图片自动轮播(封装)
这个图片轮播是基于jQuery开发的一个无缝衔接,可以点击左右进行滑动、可以点击下标进行滑动、也可以进行自动轮播的插件
怎么实现图片自动轮播
就是最常见的类似淘宝首页的图片自动切换的FLEX代码
图片自动轮播问题
[code=HTML]rnrnrnrn rn rn rn rn rnrnrn rn rn rn rn rn rn rn rnrnrn[/code]rnrn复制代码就可以用,这是我自己写的图片轮播的部分代码,现在想加一个功能,当鼠标点击数字按钮时就停止轮播,当鼠标移开当前点击的数字按钮时就接着轮播,上面加 //的 就是我自己加的停止轮播代码,但实现不了,麻烦各位帮下忙。
iOS 自动轮播图片
使用OC编写的自动轮播图片效果封装类,可设置换图时间、图片数量、支持手动滑动、图片点击事件
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数