我爱模板网 > 特效插件 > 滚动轮播 >  仿迅雷影视幻灯片轮播js代码正文

仿迅雷影视幻灯片轮播js代码

特效介绍
幻灯片轮播js代码

        仿迅雷影视幻灯片轮播js代码,共七屏,图片左右滚动,带标题和链接,有利于优化,兼容IE6。
使用方法
1、在head区引入下面的代码:
<link href="images/5imoban.net.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="images/5imoban.net.js"></script>
2、在body引入下面相应的代码:
<div class="foucebox">
    <div class="scrollimg">
        <div id="SwitchBigPic" style="margin-left: 0px; ">
<div class="scrollimg_div">
    <a href="http://www.5imoban.net" class="scrollimg_img" blockid="2997"><img id="bigpic_0" src="images/01.jpg"></a>
    <h3><a href="http://www.5imoban.net" class="scrollimg_txt" blockid="2997">《小姨多鹤》经典名作改编 孙俪姜武演绎年代催泪苦情大戏</a></h3>
    <div class="bg"></div>
</div>
<div class="scrollimg_div">
    <a href="http://www.5imoban.net" class="scrollimg_img" blockid="2997"><img id="bigpic_1" src="images/07.jpg" ></a>
    <h3><a href="http://www.5imoban.net" class="scrollimg_txt" blockid="2997">《决战华岩寺》谜中藏谜 首部反映僧人抗日电视剧 集抗战、夺宝、谍战等热点元素于一身</a></h3>
    <div class="bg"></div>
</div>
<div class="scrollimg_div">
    <a href="http://www.5imoban.net"  class="scrollimg_img" blockid="2997"><img id="bigpic_2" src="images/02.jpg"></a>
    <h3><a href="http://www.5imoban.net" class="scrollimg_txt" blockid="2997">风雨沙坡头》谍战情感悬疑剧 入围“影响中国旅游的电视剧”三强(35集全)</a></h3>
    <div class="bg"></div>
</div>
<div class="scrollimg_div">
    <a href="http://www.5imoban.net" class="scrollimg_img" blockid="2997"><img id="bigpic_3" src="images/03.jpg"></a>
    <h3><a href="http://www.5imoban.net" class="scrollimg_txt" blockid="2997">北京电信</a></h3>
    <div class="bg"></div>
</div>
<div class="scrollimg_div">
    <a href="http://www.5imoban.net/"  class="scrollimg_img" blockid="2997"><img id="bigpic_4" src="images/04.jpg" ></a>
    <h3><a href="http://www.5imoban.net/" class="scrollimg_txt" blockid="2997">奢华钻表,彰显男人品味、女人魅力!</a></h3>
    <div class="bg"></div>
</div>
<div class="scrollimg_div">
    <a href="http://www.5imoban.net" class="scrollimg_img" blockid="2997"><img id="bigpic_5" src="images/05.jpg"></a>
    <h3><a href="http://www.5imoban.net" class="scrollimg_txt" blockid="2997">梦芭莎春季新品上市,注册立赠38元</a></h3>
    <div class="bg"></div>
</div>
<div class="scrollimg_div">
    <a href="http://www.5imoban.net" class="scrollimg_img" blockid="2997"><img id="bigpic_6" src="images/06.jpg"></a>
    <h3><a href="http://www.5imoban.net" class="scrollimg_txt" blockid="2997">春季减肥,咖啡瘦身新时尚,向魔鬼身材冲刺!</a></h3>
    <div class="bg"></div>
</div>

<script>
var ScrollBigPic = [
'images/01.jpg'
'images/02.jpg'
'images/03.jpg'
'images/04.jpg'
'images/05.jpg'
'images/06.jpg'
'images/07.jpg'
] ;
</script>
        </div>
        <div></div>
        <div class="scrollimg_tigger">
                <a id="big_pic_nav_0" href="javascript://" target="_self" title="" class="on">1</a>
                <a id="big_pic_nav_1" href="javascript://" target="_self" title="" class="">2</a>
                <a id="big_pic_nav_2" href="javascript://" target="_self" title="" class="">3</a>
                <a id="big_pic_nav_3" href="javascript://" target="_self" title="" class="">4</a>
                <a id="big_pic_nav_4" href="javascript://" target="_self" title="" class="">5</a>
                <a id="big_pic_nav_5" href="javascript://" target="_self" title="" class="">6</a>
                <a id="big_pic_nav_6" href="javascript://" target="_self" title="" class="">7</a>
            </div>
    </div><!--scrollimg  END-->
<script>
var MovieRecom={                    
                bigpic:"SwitchBigPic",    //大图DIV之ID通用部分
                step:700,
                smallpic:"big_pic_nav",//小图之ID通用部分
                selectstyle:"currA",    //小图被选中之后的CSS
                pictxt:"",    //配套图片文字
                totalcount:7,                //图片数量
                autotimeintval:5000,
                objname:"MovieRecom"    //对象名称
            };
BigNews.init(MovieRecom);
</script>
</div>
调用代码相关参数的作用上面的注释已经说得非常清楚。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:炫酷的jQuery全屏左侧滚动缩略图相册代码 下一篇:图片90°旋转过渡的jquery轮播效果
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢