当前位置:首页 > 代码 > 正文

广告代码轮播(海报轮播代码)

admin 发布:2022-12-19 13:16 102


本篇文章给大家谈谈广告代码轮播,以及海报轮播代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

淘宝首页宽屏图片轮播代码

我有代码,如果不是学网页的,我怕你看不懂!

!doctype html

html

head

meta charset="utf-8"

titlejQuery图片轮播代码/title

style

.flexslider {

 margin: 0px auto 20px;

 position: relative;

 width: 100%;

 height: 482px;

 overflow: hidden;

 zoom: 1;

}

.flexslider .slides li {

 width: 100%;

 height: 100%;

}

.flex-direction-nav a {

 width: 70px;

 height: 70px;

 line-height: 99em;

 overflow: hidden;

 margin: -35px 0 0;

 display: block;

 background: url(images/ad_ctr.png) no-repeat;

 position: absolute;

 top: 50%;

 z-index: 10;

 cursor: pointer;

 opacity: 0;

 filter: alpha(opacity=0);

 -webkit-transition: all .3s ease;

 border-radius: 35px;

}

.flex-direction-nav .flex-next {

 background-position: 0 -70px;

 right: 0;

}

.flex-direction-nav .flex-prev {

 left: 0;

}

.flexslider:hover .flex-next {

 opacity: 0.8;

 filter: alpha(opacity=25);

}

.flexslider:hover .flex-prev {

 opacity: 0.8;

 filter: alpha(opacity=25);

}

.flexslider:hover .flex-next:hover,

.flexslider:hover .flex-prev:hover {

 opacity: 1;

 filter: alpha(opacity=50);

}

.flex-control-nav {

 width: 100%;

 position: absolute;

 bottom: 10px;

 text-align: center;

}

.flex-control-nav li {

 margin: 0 2px;

 display: inline-block;

 zoom: 1;

 *display: inline;

}

.flex-control-paging li a {

 background: url(images/dot.png) no-repeat 0 -16px;

 display: block;

 height: 16px;

 overflow: hidden;

 text-indent: -99em;

 width: 16px;

 cursor: pointer;

}

.flex-control-paging li a.flex-active,

.flex-control-paging li.active a {

 background-position: 0 0;

}

.flexslider .slides a img {

 width: 100%;

 height: 482px;

 display: block;

}

/style

/head

body

br/br/br/

!-- 轮播广告 --

div id="banner_tabs" class="flexslider"

 ul class="slides"

  li

   a title="" target="_blank" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

  li

   a title="" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

  li

   a title="" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

 /ul

 ul class="flex-direction-nav"

  lia class="flex-prev" href="javascript:;"Previous/a/li

  lia class="flex-next" href="javascript:;"Next/a/li

 /ul

 ol id="bannerCtrl" class="flex-control-nav flex-control-paging"

  lia1/a/li

  lia2/a/li

  lia2/a/li

 /ol

/div

script src="js/jquery-1.10.2.min.js"/script

script src="js/slider.js"/script

script type="text/javascript"

$(function() {

 var bannerSlider = new Slider($('#banner_tabs'), {

  time: 5000,

  delay: 400,

  event: 'hover',

  auto: true,

  mode: 'fade',

  controller: $('#bannerCtrl'),

  activeControllerCls: 'active'

 });

 $('#banner_tabs .flex-prev').click(function() {

  bannerSlider.prev()

 });

 $('#banner_tabs .flex-next').click(function() {

  bannerSlider.next()

 });

})

/script

/body

/html

JS轮播弹窗代码

//时间控制的广告代码

var cookie = {

ad0:30,//时间控制第一个广告30分钟轮播

ad1:60,//时间控制第二个广告60分钟轮播

ad_num : 2,

get_cookie : function(Name){var search = Name + "="; var returnvalue = "";if (document.cookie.length 0) {offset = document.cookie.indexOf(search);if (offset != -1) {offset += search.length;end = document.cookie.indexOf(";", offset);if (end == -1)end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end));}}return returnvalue;},

init : function(){

for(var i=0; icookie.ad_num; i++){

if(cookie.get_cookie('ppad_cookie_'+i)){

continue;

}else{

var Then = new Date();current_time = eval('cookie.ad'+i);Then.setTime(Then.getTime() + current_time*60*1000);document.cookie='ppad_cookie_'+i+'=1;expires='+ Then.toGMTString()+';path=/;';

switch(i){

case 0:

广告代码一 break;

case 1:

广告代码二 break;

}

break;

}

}

}

}

cookie.init();

//直接就放JS文件里面

求php图片轮播代码

?php

$img_list = myfun_get_image_list();

if (isset($_SESSON['cur_img_idx'])) { // 这里用COOKIE也可以

$img_index = $_SESSON['cur_img_idx'] + 1;

if ($img_index = count($img_list)) {

$img_index -= count($img_list);

}

} else {

$img_index = 0;

}

$img_path = $img_list[$img_index];

$_SESSION['cur_img_idx'] = $img_index;

echo "img src='$img_path' /";

$img_path =

在android中广告轮播是怎么做的

第二种:使用ViewFlipper实现图片的轮播

Android系统自带的一个多页面管理控件,它可以实现子界面的自动切换:

首先 需要为ViewFlipper加入View

(1) 静态导入:在layout布局文件中直接导入

(2) 动态导入:addView()方法

ViewPlipper常用方法:

setInAnimation:设置View进入屏幕时候使用的动画

setOutAnimation:设置View退出屏幕时候使用的动画

showNext:调用该函数来显示ViewFlipper里面的下一个View

showPrevious:调用该函数来显示ViewFlipper里面的上一个View

setFlipInterval:设置View之间切换的时间间隔

startFlipping使用上面设置的时间间隔来开始切换所有的View,切换会循环进行

stopFlipping:停止View切换

讲了这么多,那么我们今天要实现的是什么呢?

(1) 利用ViewFlipper实现图片的轮播

(2) 支持手势滑动的ViewFlipper

我们需要先准备几张图片:把图片放进drawable中

创建两个动画:在res下面新建一个folder里面新建两个xml:

left_in:

android:duration=5000

android:fromXDelta=100%p

android:toXDelta=0/

left_out:

android:fromXDelta=0

android:toXDelta=-100%p

android:duration=5000/

一个布局文件:

xmlns:tools=

android:layout_width=match_parent

android:layout_height=match_parent

tools:context=.MainActivity

android:id=@+id/flipper

android:layout_width=fill_parent

android:layout_height=fill_parent/

一个主类:

public class MainActivity extends Activity {

private ViewFlipper flipper;

private int[] resId = {R.drawable.pc1,R.drawable.pc2,R.drawable.pc3,R.drawable.pc4};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

flipper = (ViewFlipper) findViewById(R.id.flipper);

/*

* 动态导入的方式为ViewFlipper加入子View

* */

for (int i = 0; i resId.length; i++) {

flipper.addView(getImageView(resId[i]));

}

/*

* 为ViewFlipper去添加动画效果

* */

flipper.setInAnimation(this, R.anim.left_in);

flipper.setOutAnimation(this, R.anim.left_out);

flipper.setFlipInterval(5000);

flipper.startFlipping();

}

private ImageView getImageView(int resId){

ImageView image = new ImageView(this);

image.setBackgroundResource(resId);

return image;

}

}

那么这样就实现了一个图片轮询的功能效果了

我们还可以添加点击,滑动效果:

我们还需要添加两个向右的滑动效果:

right_in:

android:fromXDelta=0

android:toXDelta=-100%p

android:duration=2000/

right_out:

android:fromXDelta=100%p

android:toXDelta=0

android:duration=2000/

然后我们还需要在主类里面添加(如果你不想让图片自动播放,只想通过手势来实现图片播放那么你需要把“为ViewFlipper添加动画效果的代码”删掉):

public boolean onTouchEvent(MotionEvent event) {

// TODO Auto-generated method stub

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

startX = event.getX();

break;

case MotionEvent.ACTION_MOVE://判断向左滑动还是向右滑动

if (event.getX() - startX 100) {

flipper.setInAnimation(this, R.anim.left_in);

flipper.setOutAnimation(this, R.anim.left_out);

flipper.showPrevious();

}else if (startX - event.getX() 100) {

flipper.setInAnimation(this, R.anim.right_in);

flipper.setOutAnimation(this, R.anim.right_out);

flipper.showNext();

}

case MotionEvent.ACTION_UP:

break;

}

return super.onTouchEvent(event);

}

怎样制作轮播广告

1、首先打开你的dw,按快捷键ctrl+n创建一个新的网页。

2、点菜单栏上的表格,插入一个表格。

3、在属性栏设置表格的宽和高,这个表格用于添加轮播广告,所以宽和高都要符合我们的广告图片的宽和高。

然后点击插入添加一个可编辑区,这个区域在此例子中没用,只是为了能够保存模板,所以随意加一个即可。

点击文件,将该页面存为模板。

弹出了另存为模板的对话框。

我们接着在这个模板中添加轮播广告。将光标放到你想添加广告的表格。选择命令,kaosweaver,advanced random images。这是一个扩展插件,你可以在我的百度经验《dreamweaver如何安装扩展插件》获得安装方法。

弹出了对话框,我们设置好action和blidetime两个值得大小。random slideshow就是随机广告,blideshow timer指的是几秒钟切换一个图片。点击加号添加按钮。

选择你要添加的图片。

我添加了两个图片来示范。

点击ok以后我们就回到了模板页。你看不到轮播广告的图片,因为你需要新建页面来看。按快捷键ctrl+s保存。

我们新建一个页面,按快捷键ctrl+n,在弹出的新建对话框中选择模板。选择banner轮播模板,这是我们刚才新建的模板。

创建了页面以后,我们点击拆分按钮,找到你添加图片的地方,我们修改一下图片路径,因为你要在本地测试,所以需要修改到本地的图片地址。如果你是在网站发布,就没有必要修改了。你可以看到我添加了d:百度经验//这一行字,这就是我的图片存放的文件夹,你可以把你的图片文件夹路径写出来,一样的道理。

关于广告代码轮播和海报轮播代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;

本文地址:http://ahzz.com.cn/post/8668.html


取消回复欢迎 发表评论:

分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载